{"id":14982815,"url":"https://github.com/eclipse-glsp/glsp-vscode-integration","last_synced_at":"2025-10-29T18:31:21.723Z","repository":{"id":41855029,"uuid":"357139765","full_name":"eclipse-glsp/glsp-vscode-integration","owner":"eclipse-glsp","description":"Integration of the web-based GLSP client with VSCode","archived":false,"fork":false,"pushed_at":"2024-02-28T09:35:59.000Z","size":22963,"stargazers_count":16,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-20T13:26:47.272Z","etag":null,"topics":["diagram-editors","diagramming","glsp","graphical-modeling","language-server-protocol","lsp","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://www.eclipse.dev/glsp","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eclipse-glsp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.MD","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-04-12T09:48:51.000Z","updated_at":"2024-04-15T08:43:55.140Z","dependencies_parsed_at":"2024-04-15T08:55:09.753Z","dependency_job_id":null,"html_url":"https://github.com/eclipse-glsp/glsp-vscode-integration","commit_stats":{"total_commits":55,"total_committers":10,"mean_commits":5.5,"dds":"0.32727272727272727","last_synced_commit":"cd1fff23d8baed913e297dc1e5727e8c703ac5fa"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-vscode-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-vscode-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-vscode-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eclipse-glsp%2Fglsp-vscode-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eclipse-glsp","download_url":"https://codeload.github.com/eclipse-glsp/glsp-vscode-integration/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219857402,"owners_count":16556067,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diagram-editors","diagramming","glsp","graphical-modeling","language-server-protocol","lsp","vscode","vscode-extension"],"created_at":"2024-09-24T14:06:08.215Z","updated_at":"2025-10-29T18:31:21.229Z","avatar_url":"https://github.com/eclipse-glsp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eclipse GLSP VS Code Integration [![Build Status](https://ci.eclipse.org/glsp/job/eclipse-glsp/job/glsp-vscode-integration/job/master/badge/icon)](https://ci.eclipse.org/glsp/job/eclipse-glsp/job/glsp-vscode-integration/job/master/)\n\nThis project contains the glue code necessary to diagram editors built with the [graphical language server platform (GLSP)](https://github.com/eclipse-glsp/glsp) with VS Code, as well as an example VS Code extension for the workflow diagram example for testing purposes.\n\n## Workflow Diagram Example\n\nThe workflow diagram is a consistent example provided by all GLSP components.\nThe example implements a simple flow chart diagram editor with different types of nodes and edges (see screenshot below).\nThe example can be used to try out different GLSP features, as well as several available integrations with IDE platforms (Theia, VS Code, Eclipse, Standalone).\nAs the example is fully open source, you can also use it as a blueprint for a custom implementation of a GLSP diagram editor.\nSee [our project website](https://www.eclipse.org/glsp/documentation/#workflowoverview) for an overview of the workflow example and all components implementing it.\n\n\u003e _**Remark:**_ The workflow example is a fully dev example, as it combines a variety of integration and connectivity options to easily test the different use cases.\n\u003e However, it should not be used as a blueprint for your custom implementation, for this we recommend the [GLSP project templates](https://github.com/eclipse-glsp/glsp-examples/tree/master/project-templates) in the GLSP example repository.\n\n\u003chttps://user-images.githubusercontent.com/588090/154449892-a9693efb-21f3-4105-85ae-dbf97fffd442.mp4\u003e\n\n### How to start the Workflow Diagram example?\n\nClone this repository and build the VS Code integration packages:\n\n```bash\nyarn install\n```\n\nNow you can start the VS Code extension by opening this repository in VS Code and executing the `Workflow GLSP Example Extension` launch configuration, provided with this project.\n\n\u003e A precompiled version of the Workflow Diagram Server will be launched automatically by the extension.\n\u003e To debug or modify the server and run it separately: see the instructions below.\n\n### How to start the Workflow Diagram example server from the sources\n\nIf 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.\nCheckout 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.\n\nTo test the VS Code extension with an external server (e.g started from your IDE) the launch configuration `Workflow GLSP Example Extension (External GLSP Server)` can be used.\n\n### Start Workflow Diagram example in WebSocket mode\n\nThe default example use case uses a socket communication from the extension to the GLSP server.\nTo communicate with the server via WebSockets, the `Workflow GLSP Example Extension (Websocket)` launch configuration can be used.\nThis launch config establishes a connection to the server via the endpoint `ws://localhost:8081/workflow`.\nTo test the websocket connection with an external server the `Workflow GLSP Example Extension (External WebSocket GLSP Server)` launch config can be used\n\n### Start Workflow Diagram example without a dedicated server process\n\nThe default example use case uses a socket communication from the extension to a GLSP server process.\nTo directly start the server in the extension context without an extra process, the `Workflow GLSP Example Extension (Integrated Node GLSP Server)` launch configuration can be used.\n\n### Start Workflow Diagram example as a Web extension\n\nIn addition to a classic node-based VS Code extension, it is also possible to start the Workflow Diagram example as a VS Code web extension.\nFor this, the `Workflow GLSP Example Web Extension` launch configuration can be used.\nPer default, this extension starts the GLSP server within the extension context and uses direct communication without json-rpc.\nIn addition, it is also possible to use an external GLSP server via WebSocket. To use this approach simply start a Workflow GLSP server that is listening on `ws://localhost:8081/workflow` (default websocket config for the Workflow example server) and then start the web extension via `Workflow GLSP Example Web Extension` launch configuration.\nWhen available (i.e. the websocket address is reachable) the extension will automatically use the external server instead of the default in-context server.\n\n\u003e _**Remark:**_ In production, one would decide for one way of connectivity, and would not implement all the different options as we do in the workflow diagram example.\n\u003e This was setup to easily show and switch between the different possibilities.\n\n### How to package the Workflow Diagram example extension\n\nThe `vsce` CLI tool can be used to package/publish a vscode extension.\n\nBefore packaging it's recommended to execute a `production build` with\n\n```bash\nyarn bundle:prod\n```\n\nThis ensures that the extension sources are bundled efficiently without development overhead like source maps.\nBoth example extension (normal \u0026 web) have a `package` utility script that will automatically create the corresponding `*.vsix` file with `vsce`.\nTo package the normal extension use\n\n```bash\nyarn workflow package\n```\n\nand for the web extension use\n\n```bash\nyarn workflow:web package\n```\n\n### Where to find the sources?\n\nIn addition to this repository, the related source code can be found here:\n\n-   \u003chttps://github.com/eclipse-glsp/glsp-server\u003e\n-   \u003chttps://github.com/eclipse-glsp/glsp-server-node\u003e\n-   \u003chttps://github.com/eclipse-glsp/glsp-client\u003e\n\n## More information\n\nFor 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/).\nIf 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/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-glsp%2Fglsp-vscode-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feclipse-glsp%2Fglsp-vscode-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feclipse-glsp%2Fglsp-vscode-integration/lists"}