Eclipse GLSP - Client

A web-based diagram client framework for the Graphical Language Server Platform (GLSP) based on Eclipse Sprotty.

Structure

• @eclipse-glsp/protocol: Generic client-server communication protocol
• @eclipse-glsp/sprotty: Sprotty integration layer providing base bindings and re-exports
• @eclipse-glsp/client: sprotty-based GLSP client
• @eclipse-glsp-examples/workflow-glsp: Workflow diagram specific client customizations
• @eclipse-glsp-examples/workflow-standalone: Standalone example application (Node & Browser mode)

Building

This project is built with yarn. The following packages are published to npm:

• @eclipse-glsp/protocol
• @eclipse-glsp/sprotty
• @eclipse-glsp/client
• @eclipse-glsp-examples/workflow-glsp

Workflow Diagram Example

Try it online – a live deployment of the browser example running on GitHub Pages.

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, VSCode, Eclipse, Standalone). As the example is fully open source, you can also use it as a blueprint for a custom implementation of a GLSP diagram editor. See our project website for an overview of the workflow example and all components implementing it.

https://github.com/eclipse-glsp/glsp-client/assets/2311075/7436ab37-a68d-448a-8c44-a312760376c3

How to start the Workflow Diagram example?

The example can be run in two modes:

• Browser mode – The GLSP server runs as a Web Worker directly in the browser. No external server process is needed. This is the quickest way to try out the example.
• Node mode – The client connects to an external GLSP server via WebSocket. By default a pre-built Node.js server is downloaded and started, but this mode can also be used with a Java-based GLSP server.

Clone this repository and build the glsp-client packages:

yarn install

Browser mode (recommended for quick start)

yarn start:browser

This downloads the bundled Web Worker GLSP server and starts the webpack dev server on http://localhost:8083/diagram.html.

Node mode

yarn start

This downloads and starts the GLSP server and launches the webpack dev server on http://localhost:8082/diagram.html.

To use your own GLSP server (e.g. a Java or Node variant running from source), start the server separately and launch the client without the built-in server:

yarn start --client-only

Development

For active development, the dev scripts compile TypeScript in watch mode and start all necessary processes in parallel:

# Browser mode – watches sources, starts webpack dev server
yarn dev:browser

# Node mode – watches sources, starts GLSP server, starts webpack dev server
yarn dev

How to start the Workflow Diagram example server from the sources

If you want to explore or change the Workflow Diagram Server too, you can clone, build and start the Java or Node variant of the workflow example glsp-server from your IDE instead of using the pre-built version of the Workflow Diagram Server. Checkout the glsp-server or glsp-server-node repo for instructions on building and running the Workflow Diagram Server example.

Where to find the sources?

In addition to this repository, the source code of the Workflow Diagram server example can be found here: https://github.com/eclipse-glsp/glsp-server/tree/master/examples/org.eclipse.glsp.example.workflow

More information

For more information, please visit the Eclipse GLSP Umbrella repository and the Eclipse GLSP Website. If you have questions, please raise them in the discussions and have a look at our communication and support options.