https://github.com/eclipse-glsp/glsp-client
Web-based client framework of the graphical language server platform
https://github.com/eclipse-glsp/glsp-client
diagram diagram-editor diagramming glsp graphical-modeling graphical-models lsp sprotty web-based
Last synced: 6 months ago
JSON representation
Web-based client framework of the graphical language server platform
- Host: GitHub
- URL: https://github.com/eclipse-glsp/glsp-client
- Owner: eclipse-glsp
- License: other
- Created: 2019-10-31T15:14:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-05T15:35:25.000Z (over 1 year ago)
- Last Synced: 2024-07-05T15:47:56.704Z (over 1 year ago)
- Topics: diagram, diagram-editor, diagramming, glsp, graphical-modeling, graphical-models, lsp, sprotty, web-based
- Language: TypeScript
- Homepage: https://www.eclipse.dev/glsp
- Size: 4.1 MB
- Stars: 42
- Watchers: 6
- Forks: 29
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Eclipse GLSP - Client [](https://ci.eclipse.org/glsp/job/eclipse-glsp/job/glsp-client/job/master/) [](https://github.com/eclipse-glsp/glsp-client/actions/workflows/e2e.yml)
A web-based diagram client framework for the [Graphical Language Server Platform (GLSP)](https://github.com/eclipse-glsp/glsp) based on [Eclipse Sprotty](https://github.com/eclipse/sprotty).
## Structure
- `@eclipse-glsp/protocol`: Generic client-server communication protocol
- `@eclipse-glsp/client`: sprotty-based GLSP client
## Building
This project is built with `yarn` and is available from npm via [@eclipse-glsp/protocol](https://www.npmjs.com/package/@eclipse-glsp/protocol) and [@eclipse-glsp/client](https://www.npmjs.com/package/@eclipse-glsp/client).
## 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, 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](https://www.eclipse.org/glsp/documentation/#workflowoverview) 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?
Clone this repository and build the glsp-client packages:
```bash
yarn install
```
Next, download and start a pre-built version of the Workflow Example Node Diagram Server with:
```bash
yarn start:exampleServer
```
Once the server is running, open the `glsp-client/examples/workflow-standalone/app/diagram.html` file in your favorite browser.
### 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`](https://github.com/eclipse-glsp/glsp-server#workflow-diagram-example) or [`glsp-server-node`](https://github.com/eclipse-glsp/glsp-server-node#workflow-diagram-example) 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:
## More information
For more information, please visit the [Eclipse GLSP Umbrella repository](https://github.com/eclipse-glsp/glsp) and the [Eclipse GLSP Website](https://www.eclipse.org/glsp/).
If you have questions, please raise them in the [discussions](https://github.com/eclipse-glsp/glsp/discussions) and have a look at our [communication and support options](https://www.eclipse.org/glsp/contact/).