Eclipse GLSP

For a full overview of all CI workflows across the organization, see Workflow Status.

The Graphical Language Server Platform provides extensible components for the development of diagram editors including edit functionality in (distributed) web-applications via a client-server protocol.

It follows the architectural pattern of the Language Server Protocol, but applies it to graphical modeling and diagram editors for browser/cloud-based deployments. Parts of the protocol and the web-based client implementation is based on Sprotty but extends it with editing functionality and GLSP-specific communication with the server.

For more information, please have a look at the GLSP documentation, visit the GLSP website and the protocol spec. If you have questions, please raise them in the discussions and have a look at our communication and support options.

https://user-images.githubusercontent.com/588090/154459938-849ca684-11b3-472c-8a59-98ea6cb0b4c1.mp4

Getting started

The best way to getting started is to read the overview in the documentation and follow the getting started guide.

Features

Below is a list of features that are supported by the different base technologies that can be used with GLSP.

Expand feature list

Feature	Standalone	Theia Integration	Eclipse Integration	VS Code Integration
Model Saving	✓	✓	✓	✓
Model Dirty State		✓	✓	✓
Model SVG Export	✓	✓	✓	✓
Model Layout	✓	✓	✓	✓
Restoring viewport on re-open		✓
Model Edit Modes

• Edit

• Read-only |

✓

✓  |

✓

✓ |

✓

  |

✓

✓  | | Client View Port

• Center

• Fit to Screen |

✓

✓ |

✓

✓ |

✓

✓ |

✓

✓ | | Client Status Notification | ✓ | ✓ | ✓ | ✓ | | Client Message Notification | ✓ | ✓ | | ✓ | | Client Progress Reporting | | ✓ | | ✓ | | Element Selection | ✓ | ✓ | ✓ | ✓ | | Element Hover | ✓ | ✓ | ✓ | ✓ | | Element Validation | ✓ | ✓ | ✓ | ✓ | | Element Navigation | | ✓ | ✓ | ✓ | | Element Type Hints | ✓ | ✓ | ✓ | ✓ | | Element Creation and Deletion | ✓ | ✓ | ✓ | ✓ | | Node Change Bounds

• Move

• Resize |

✓

✓ |

✓

✓ |

✓

✓ |

✓

✓ | | Node Change Container | ✓ | ✓ | ✓ | ✓ | | Edge Reconnect | ✓ | ✓ | ✓ | ✓ | | Edge Routing Points | ✓ | ✓ | ✓ | ✓ | | Ghost Elements | ✓ | ✓ | ✓ | ✓ | | Element Text Editing | ✓ | ✓ | ✓ | ✓ | | Clipboard (Cut, Copy, Paste) | ✓ | ✓ | ✓ | ✓ | | Undo / Redo | ✓ | ✓ | ✓ | ✓ | | Contexts

• Context Menu

• Command Palette

• Tool Palette |

✓

✓ |

✓

✓

✓ |

✓

✓ |

✓

✓

✓ | | Accessibility Features (experimental)

• Search

• Move

• Zoom

• Resize |

✓

✓

✓

✓ | | | | | Helper Lines (experimental) | ✓ | ✓ | ✓ | ✓ |

Repositories

The GLSP source code consists of the following repositories:

• glsp-client: Contains the code for the (Sprotty-based) client.
• glsp-server: Contains the code for a Java-based framework to create GLSP server components.
• glsp-server-node: Contains the code for a typescript-based framework to create GLSP server components running in node or pure browser applications.
• glsp-theia-integration: Provides the glue code to integrate GLSP diagrams editors into Theia.
• glsp-eclipse-integration: Provides the integration of GLSP diagram editors with the Eclipse IDE.
• glsp-vscode-integration: Provides the integration of GLSP diagrams editors into VS Code.
• glsp-examples: Contains various examples and project templates to demonstrate GLSP in action.
• glsp-playwright: Playwright-based framework for testing GLSP diagram editors.

Release plan

We release a minor version of Eclipse GLSP every three months, aligned with the Eclipse Theia Community Releases, focusing on bug fixes and adding functionality while ensuring backward compatibility. Currently, there are no major releases with API breaks planned. For a detailed history of past releases, visit our releases page on GitHub.

Shared artifacts

This repository provides the following packages and artifacts that are shared across all GLSP repositories and/or projects:

• Eclipse GLSP docker images
• Eclipse GLSP Dev Packages

Build artifacts

Packages are available via npmjs, such as the glsp-client and the theia integration. The examples are available on npmjs too.

The Java server packages are available as maven as well as p2 dependency from the following maven repository or p2 update site.

Maven Repositories

• Snapshots: https://oss.sonatype.org/content/repositories/snapshots/org/eclipse/glsp/
• Releases/Release Candidates: https://central.sonatype.com/search?q=org.eclipse.glsp&namespace=org.eclipse.glsp

P2 Update Sites

• Server Snapshots: https://download.eclipse.org/glsp/server/p2/nightly/
• Server Release Candidates: https://download.eclipse.org/glsp/server/p2/staging/

• Server Releases: https://download.eclipse.org/glsp/server/p2/releases/

• Eclipse Integration Snapshots: https://download.eclipse.org/glsp/ide/p2/nightly/

• Eclipse Integration Release Candidates: https://download.eclipse.org/glsp/ide/p2/staging/
• Eclipse Integration Releases: https://download.eclipse.org/glsp/ide/p2/releases/

All changes on the master branch are deployed automatically to the corresponding snapshot repositories.

Prerequisites for building

Client packages

We recommend node in version 22 or higher:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install 22

and Yarn

npm install -g yarn

and Lerna

npm install -g lerna

Server/Ide packages

You'll need Java 21 and maven.

Building

NOTE: This section describes how to build the core components of glsp. To build an optional integration component like the integration for VS Code or Eclipse IDE please follow the build instructions in the corresponding repository.

To build the client packages, just invoke

yarn install

in glsp-client and glsp-theia-integration.
To start an example server, you can either

• run bash yarn start:exampleServer in glsp-client and open the glsp-client/examples/workflow-standalone/app/diagram.html file in your browser of choice
• run bash yarn start in glsp-theia-integration and head your favorite browser to http://localhost:3000.

The server components are built with

mvn clean verify

in glsp-server, and

yarn

in glsp-server-node.

Building and starting the Workflow Diagram example

The Workflow Diagram is a consistent example provided by all GLSP components. The example implements a simple flow chart diagram editor with different types of nodes and edges (see screenshot below). The example can be used to try out different GLSP features, as well as several available integrations with IDE platforms (Theia, VS Code, Eclipse, S