Back to top

Getting Started

GLSP is architected to be very flexible and provides several implementation options:

  • 🖥️ Server
    GLSP servers can be written either in Java or with Typescript based on nodejs.
  • 🗂️ Source Model
    You can use any format or framework for managing your source model. For the most common choices, GLSP provides dedicated base modules, such as for EMF, emf.cloud, or GModel-JSON, which contains the graphical model directly.
  • 🖼️ Tool Platform
    Diagram editors can used in multiple tool platforms or used in plain web applications or in an Electron app. While GLSP editors can be integrated into any web application, GLSP provides dedicated integration components for seamlessly deploying a GLSP editor inside of Eclipse Theia, VS Code, or Eclipse RCP.

Due to GLSP’s architecture, you can even change any of those options above later on, without impacting other parts of your implementation, or support multiple variants, e.g. VS Code and Eclipse RCP, while sharing almost all of your server and client code.

To get you started quickly, GLSP provides project templates for the most popular choices. Thus, please clone the glsp-examples repository and switch to the folder project templates:

git clone https://github.com/eclipse-glsp/glsp-examples.git
cd glsp-examples/project-templates

Now select your preferred server language, source model format, and platform integration (see list below). Switch to the respective folder and follow its readme file.

If you don’t find your preferred combination, please raise a question in the Github discussions. If you need help on deciding which combination is right for you, please refer to the integrations page or look at our support options.

What next?

Once you are up and running based on the project template above, we recommend to start working on the following aspects next:

  • ➡️ Add your custom source model instead of using the example model!
  • ➡️ Define the diagram elements to be generated from the source model into the graphical model!
  • ➡️ Make the diagram look the way you want by adjusting the diagram rendering and styling!
  • ➡️ Look at the workflow example to explore the implementation of more advanced editor features