Theia + sprotty Create a Cloud IDE with Graphical Views

OpenShift 101 – What’s about and why it matter
July 8, 2017
Vert.x + Kotlin – fuga dal callback-hell
July 17, 2017

Theia + sprotty Create a Cloud IDE with Graphical Views

Miro Spönemann (TypeFox)

Theia provides a foundation for implementing integrated development environments. These IDEs are not only suitable for software developers, but all kinds of engineers and domain experts. Theia is based around a flexible layout engine and leverages industry standards such as the Language Server Protocol (LSP). It allows to design rich software tools that can run both as desktop applications and in the web browser.

sprotty is a web-based framework for creating graphical diagrams. The combination of modern appearance and smooth animations provides a pleasant user experience. It also offers a thin, JSON-based client/server protocol that can be easily combined with the LSP. By leveraging the Eclipse Layout Kernel (ELK), diagrams can be created fully automatically. You can use any source data to feed the diagrams, e.g. models loaded with the Eclipse Modeling Framework (EMF).

I will show an example on how to create your custom Theia application, integrate Eclipse Xtext via the LSP, and enrich the application with sprotty diagrams. The same example can be executed both in a web browser and as a standalone application based on Electron.

The example is available at

Slides: Theia + sprotty – milano 2017


sprotty extension for Theia:
YANG language server with diagram support:
YANG IDE based on Theia:
YANG IDE based on Eclipse with sprotty embedded in a browser widget:
another example of integrating sprotty with Theia:

Leave a Reply

Your email address will not be published. Required fields are marked *