sprotty – A Web-based Diagramming Framework
Development tools in the web are trending. With Theia, we have already started to build an IDE platform with web technologies that works for browser apps as well as rich clients. While Xtext, Monaco, and LSP constitute a good foundation for textual editing, the question arises whether we can extend this idea for graphics. So we started brooding over a graphical framework as well and here is the result: Let me present you to sprotty. sprotty is a web-based framework for diagrams. It is open-source under the Apache 2 license. The [source code is on Github](https://github.com/theia-ide/sprotty.
Rendering and Animations
sprotty uses SVG, and by that offers modern, stable and scalable rendering on a wide range of browsers In sprotty, animations have been built-in right from the beginning, so the framework is prepared for asynchronous state changes everywhere. Animations help the user of a sprotty diagram to keep the context without being distracted by flickering. We already ship a set of pre-built transitions for morphing diagrams on state changes, but you can easily build your own ones. You can even travel back and forth in time using animations. sprotty also comes with a bridge to the Eclipse Layout Kernel for sophisticated automatic diagram layout.
Separation of Client and Server
A sprotty app usually consists of two major components: The client only holds a model of the current diagram, renders it, and interacts with the user. The optional server knows about an underlying semantic model and how to map it to diagram elements. Client and server communicate by sending each other JSON notifications. This minimizes the memory footprint on the client, which is necessary for a browser app. A server can handle much bigger amounts of data, e.g. from a database or a development workspace. Having said that, sprotty can of course be used a client-only app without a backend.
Integration With LSP, Xtext and Theia
While sprotty is not necessarily tied to the LSP, its architecture is a good match. We have integrated it with Theia by extending an Xtext-based language server with the sprotty server, tunneling the messages through the LSP, and creating a Theia widget holding the sprotty client. The source code is on Github as well. The result can be seen here:
Reactive Architecture with Dependency Injection
We have just started sprotty but it should already be applicable for many scenarios. We plan further extensions, e.g. to allow the user assemble the content of a diagram and persist the result. We expect to get quite some momentum in the near future in combination with the Theia project. Give it a try and let us know what you think. sprotty works best with the Chrome browser. Issue reports are welcome. Like in Theia, the CDT team at Ericsson has started contributing to sprotty, and so could you!