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.

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

sprotty’s is inspired by modern reactive frameworks like React/Flux. Information flows in a unidirectional circle between three functional components. This architecture is much less susceptible to event feedback cycles than the traditional model-view-controller approach. As the components don’t rely on a shared state, they can be unit-tested individually without the need to set up the entire environment or to start a browser.

In the viewer component, sprotty uses a very fast virtual DOM framework that patches the actual DOM with the changes. Using so called thunks you can skip entire branches of the DOM if they are unchanged to further optimize performance.

sprotty’s client is implemented in TypeScript, so you can enjoy the benefits of static typing if you wish or use JavaScript directly if not. The SVG views can be easily specified using JSX and styled with CSS.

All components of a diagram are wired up with dependency injection. This way, users can customize every single part, while getting good defaults without much ado.

The sprotty server is written in Xtend, which is transpiled to Java as TypeScript is to JavaScript. Integration with Xtext and a language server is easy.

Current State

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!

By | 2017-06-15T10:56:38+00:00 June 8th, 2017|Cloud IDE, Diagrams, DSLs, Eclipse, Language Server, sprotty|6 Comments

About the Author:

Dr. Jan Köhnlein has been a passionate committer to Xtext and Xtend from the beginning. He is one of the leaders of TypeFox and drives the FXDiagram project.


  1. […] sich ein Web-basiertes Framework für Diagramme. Zur Entstehung berichtet Dr. Jan Köhnlein auf dem Blog von TypeFox, dass der Wunsch aufkam, die Vorzüge des Arbeitens mit Xtext, Monaco und dem Language Server […]

  2. Rahul C July 7, 2017 at 08:51 - Reply

    Can i get the updatesite of Sprotty in Eclipse ?

    • Jan Köhnlein July 7, 2017 at 15:04 - Reply

      sprotty does not require Eclipse and as such there is no update site.
      The client part can be fetched via npm.
      The server part can be fetched via maven/gradle from jcenter/sonatype (the letter for snapshots).
      To import and edit sprotty’s server source code in Eclipse, install Buildship (Eclispe Gradle support). Then choose Import > Gradle > Existing Gradle Project and point it to the directory server of the checked out Git repository.

  3. Edilberto Castellanos October 26, 2017 at 06:20 - Reply


    How does sprotty relates to sirius?

    I know that technically they don’t have commons but, there are use cases where both fit.

    Thanks in advance

    • Jan Köhnlein October 27, 2017 at 10:18 - Reply

      Sirius is an diagram editing framework written in Java running in Eclipse only.

      sprotty is currently a diagram view framework (no editing for the underlying model) written in TypeScript. You can run it in Eclipse using the SWT browser widget (see my blogpost). As committers to the Xtext framework, we focussed on views first as that avoids a lot of problems when working with graphical and textual representation in parallel.

      Turning sprotty into an editing framework is feasible and within reach. Given the very flexible architecture with the configurable Actions it should be easy to get a simple, non-generic example working. We and our partners are looking into a generic extension as well, but we cannot promise yet when it’s going to be available.

  4. Etienne Juliot October 27, 2017 at 11:00 - Reply

    Going to the web for Sirius is a long run. For example, we already prepared it with Sirius 2.0 by refactoring all its refresh engine to make it standalone and independent of Eclipse UI, to be able to deploy it on a back-end. So, the current architecture provides the result of the computation of applying a specifier configuration of designer (a VSM) to a semantic model is a graph model (aird), which is consumed by a front-end, today Eclipse GMF based. A large part of the power of Sirius come from this ability to define custom graphical designers. We think feasible to keep this engine + the VSM editor environmen for specifiers, and to add a new web front-end.
    We (Sirius Team at Obeo, with the kindly support of Jan and other Typefox dev) are working to experiment usage of Sprotty as this front-end, with a “LSP-like protocol for graphical editors” which could be produce from a Sirius back-end. We are still in the early-stages. If you have a concrete use-case to apply this architecture, don’t hesitate to contact me or Jan.

Leave A Comment