Eclipse Sprotty

Eclipse Sprotty™ is a next-generation, open-source, web-based diagramming framework.

Instead of using a cross-compiler or an existing framework, we decided to start from scratch with web technologies: The client is implemented in TypeScript, SVG is used for rendering, and CSS for styling. We also use a unidirectional event-cycle with a virtual DOM as opposed to the traditional model-view-controller pattern to better fit the demands of web applications.

One focus is on a modern, user-centric look and feel. For example, animations are built right into the core of the framework, such that the user always sees smooth transitions to guide the user’s eye. Model updates, undo/redo, navigation, everything is animated by default.

Sprotty explicitly supports to use a remote backend, allowing to visualize data that is not necessarily present in the browser app. This is not only a preferred scenario for database backends, but also meets the setting of the Language Server Protocol, where the backend encapsulates the semantics of the language. Thus, you can extend a language server with a Sprotty backend that delivers Sprotty diagrams to the frontend. As most Cloud IDEs are using the LSP, this makes Sprotty an excellent choice for diagrams to visualize code, like type-hierarchies, component dependencies etc.

For the communication between client and server, Sprotty defines a very simple but extensible JSON protocol. As the same messages are used as events in the client internally, you can almost arbitrarily balance the memory demands and computational workload between client and server by passing certain messages to the server while processing others locally. Part of the protocol is a similarly extensible diagram model, which can even be used for models beyond the usual nodes, edges and ports.

As the code is wired-up using dependency injection, you can not only add your own model elements, figures, behaviors, etc. but also replace other default components that don’t fit your need. This way Sprotty is extremely adaptable to all kinds of use cases.

In addition, Sprotty provides glue code to integrate with

• The Language Server Protocol,

• Xtext language backends based on LSP,

• The Eclipse Theia IDE framework, and as such with Eclipse Che,

• The Eclipse Layout Kernel, both client-side and server-side,

• Eclipse RCP, via lsp4e and the SWT browser widget.