Eclipse Sprotty - Diagrams in the Web

Cloud-based technologies have taken up a lot of momentum at Eclipse. The new Eclipse project Sprotty fits well into this trend: With Sprotty you can add modern diagrams to your web applications with little effort.

Sprotty's client side is entirely based on web-native technologies: The code is written in TypeScript, avoiding surprises from cross-compilation when running in the browser. It uses a uni-directional flow of events and virtual DOM, similar to React/Flux. This approach simplifies testing a lot and it avoids the typical event feedback loops from traditional model-view-controller-based frameworks. By leveraging SVG for rendering and CSS for styling, Sprotty diagrams run smoothly in all major browsers, including the Eclipse browser widget. Typical problems like SVGs lack of layout facilities in combination with CSS styling are solved and nicely hidden from the user.

We have also put a lot of effort into a modern UX. For example, animations and visual transitions are built right into the core, helping users to better understand changes in the diagram. This even applies to undo/redo operations. The API abstracts these animations such that the application programmer does not have to deal with them.

Sprotty's reactive architecture makes it possible to distribute the execution of a diagram arbitrarily between a client and a server. From our experience, diagrams often only show a small section of a huge dataset, e.g. from a database. Using Sprotty, the latter can remain entirely on the server. The client will be equipped only with the minimum details it needs to render the diagram

This matches exactly the scenario of the Language Server Protocol. Sprotty has been designed to play the graphical part in IDEs based on language servers, such as Eclipse Theia, VS Code, Eclipse (via lsp4e) and others. For that purpose, Sprotty ships with a powerful server library sprotty-server written in Java to extend language servers. In particular, Sprotty plays nicely with the language servers generated by the Eclipse Xtext framework. For an automatic layout, you can connect the Eclipse Layout Kernel easily.

When you use Sprotty in combination with Xtext, LSP4J, Eclipse Theia, Sprotty Theia and ELK, you have a full Eclipse open-source toolstack at your fingertips to build a workbench for domain-specific languages that runs in the cloud or as rich-client. For a reference, have a look at the yangster project.

As both the client and the server are wired up using dependency injection (InversifyJS/Guice), you can tweak almost every aspect of the code beyond the defaults, giving you the flexibility you need for production-ready applications.

Sprotty has been initiated by TypeFox and Ericsson and has been picked up by other companies such as Obeo and EclipseSource in the meantime. We at TypeFox use it successfully in many customer projects. Even the Graphics Server Protocol initiative mostly mirrors Sprotty's protocol. Sprotty is now becoming an Eclipse Project under the umbrella of the Eclipse Cloud Development project. While we initially focussed on graphical views, the framework got more and more contributions in the direction of diagram editing.

You can play around with Sprotty on our example website. We're currently moving a lot of things to Eclipse, so if you are interested in more, check the repository or the forum.

About the Author

Jan Köhnlein

Dr. Jan Koehnlein is one of the founders of TypeFox (Kiel, Germany), a company specialized in development tools for all kinds of experts. He contributes to open source projects like Xtext, Xtend, FXDiagram, Sprotty and Theia.