| <!DOCTYPE html> |
| <html lang="en-us"> |
| |
| |
| <head> |
| <meta name="theme" content="Syna"> |
| <meta name="theme-version" content="v0.17.2"> |
| <meta name="theme-url" content="https://syna.okkur.org"> |
| <meta name="theme-description" content="Highly customizable open source theme for Hugo based static websites"> |
| <meta name="theme-author" content="Okkur Labs"> |
| <meta name="theme-author-url" content="https://about.okkur.org"> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| <meta name="google" content="notranslate" /> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| <meta name="description" content="GLSP is an extensible open source framework to build custom diagram editors in the web/cloud. These editors can be deployed stand-alone or integrated into a web-based IDE such as Eclipse Theia or VS Code. GLSP defines a language server protocol (LSP) for diagrams and integrates well with your existing tool chain and business logic. "> |
| <meta property="og:title" content="GLSP" /> |
| <meta property="og:description" content="Graphical Language Server Platform" /> |
| <meta property="og:type" content="website" /> |
| <meta property="og:url" content="https://www.eclipse.org/glsp/" /> |
| |
| |
| <meta name="twitter:card" content="summary_large_image"> |
| <meta name="twitter:title" content="GLSP" /> |
| <meta name="twitter:description" content="GLSP is an extensible open source framework to build custom diagram editors in the web/cloud. These editors can be deployed stand-alone or integrated into a web-based IDE such as Eclipse Theia or VS Code. GLSP defines a language server protocol (LSP) for diagrams and integrates well with your existing tool chain and business logic. "> |
| <meta name="twitter:url" content="https://www.eclipse.org/glsp/" /> |
| <meta property="og:image" content=""> |
| <meta name="twitter:image" content=""> |
| <meta name="author" content="Eclipse Foundation"> |
| |
| <meta name="generator" content="Hugo 0.78.1" /> |
| |
| <title>GLSP</title> |
| |
| <!-- Theme Styles --> |
| <style> |
| .mx-0 { |
| margin-left: 0 !important; |
| margin-right: 0 !important; } |
| |
| |
| @-ms-viewport { |
| width: device-width; } |
| |
| html { |
| box-sizing: border-box; |
| -ms-overflow-style: scrollbar; } |
| |
| *, |
| *::before, |
| *::after { |
| box-sizing: inherit; } |
| |
| .container { |
| width: 100%; |
| padding-right: 15px; |
| padding-left: 15px; |
| margin-right: auto; |
| margin-left: auto; |
| max-width: 540px; |
| max-width: 720px; |
| max-width: 960px; |
| max-width: 1140px; } |
| |
| .container-fluid { |
| width: 100%; |
| padding-right: 15px; |
| padding-left: 15px; |
| margin-right: auto; |
| margin-left: auto; } |
| |
| .row { |
| display: flex; |
| flex-wrap: wrap; |
| margin-right: -15px; |
| margin-left: -15px; } |
| |
| .no-gutters { |
| margin-right: 0; |
| margin-left: 0; } |
| .no-gutters > .col, |
| .no-gutters > [class*="col-"] { |
| padding-right: 0; |
| padding-left: 0; } |
| |
| .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, |
| .col-auto { |
| position: relative; |
| width: 100%; |
| min-height: 1px; |
| padding-right: 15px; |
| padding-left: 15px; } |
| |
| .col { |
| flex-basis: 0; |
| flex-grow: 1; |
| max-width: 100%; } |
| |
| .col-auto { |
| flex: 0 0 auto; |
| width: auto; |
| max-width: none; } |
| |
| .col-1 { |
| flex: 0 0 8.33333%; |
| max-width: 8.33333%; } |
| |
| .col-2 { |
| flex: 0 0 16.66667%; |
| max-width: 16.66667%; } |
| |
| .col-3 { |
| flex: 0 0 25%; |
| max-width: 25%; } |
| |
| .col-4 { |
| flex: 0 0 33.33333%; |
| max-width: 33.33333%; } |
| |
| .col-5 { |
| flex: 0 0 41.66667%; |
| max-width: 41.66667%; } |
| |
| .col-6 { |
| flex: 0 0 50%; |
| max-width: 50%; } |
| |
| .col-7 { |
| flex: 0 0 58.33333%; |
| max-width: 58.33333%; } |
| |
| .col-8 { |
| flex: 0 0 66.66667%; |
| max-width: 66.66667%; } |
| |
| .col-9 { |
| flex: 0 0 75%; |
| max-width: 75%; } |
| |
| .col-10 { |
| flex: 0 0 83.33333%; |
| max-width: 83.33333%; } |
| |
| .col-11 { |
| flex: 0 0 91.66667%; |
| max-width: 91.66667%; } |
| |
| .col-12 { |
| flex: 0 0 100%; |
| max-width: 100%; } |
| |
| .order-first { |
| order: -1; } |
| |
| .order-last { |
| order: 13; } |
| |
| .order-0 { |
| order: 0; } |
| |
| .order-1 { |
| order: 1; } |
| |
| .order-2 { |
| order: 2; } |
| |
| .order-3 { |
| order: 3; } |
| |
| .order-4 { |
| order: 4; } |
| |
| .order-5 { |
| order: 5; } |
| |
| .order-6 { |
| order: 6; } |
| |
| .order-7 { |
| order: 7; } |
| |
| .order-8 { |
| order: 8; } |
| |
| .order-9 { |
| order: 9; } |
| |
| .order-10 { |
| order: 10; } |
| |
| .order-11 { |
| order: 11; } |
| |
| .order-12 { |
| order: 12; } |
| |
| .offset-1 { |
| margin-left: 8.33333%; } |
| |
| .offset-2 { |
| margin-left: 16.66667%; } |
| |
| .offset-3 { |
| margin-left: 25%; } |
| |
| .offset-4 { |
| margin-left: 33.33333%; } |
| |
| .offset-5 { |
| margin-left: 41.66667%; } |
| |
| .offset-6 { |
| margin-left: 50%; } |
| |
| .offset-7 { |
| margin-left: 58.33333%; } |
| |
| .offset-8 { |
| margin-left: 66.66667%; } |
| |
| .offset-9 { |
| margin-left: 75%; } |
| |
| .offset-10 { |
| margin-left: 83.33333%; } |
| |
| .offset-11 { |
| margin-left: 91.66667%; } |
| |
| .d-none { |
| display: none !important; } |
| |
| .d-inline { |
| display: inline !important; } |
| |
| .d-inline-block { |
| display: inline-block !important; } |
| |
| .d-block { |
| display: block !important; } |
| |
| .d-table { |
| display: table !important; } |
| |
| .d-table-row { |
| display: table-row !important; } |
| |
| .d-table-cell { |
| display: table-cell !important; } |
| |
| .d-flex { |
| display: flex !important; } |
| |
| .d-inline-flex { |
| display: inline-flex !important; } |
| |
| @media print { |
| .d-print-none { |
| display: none !important; } |
| .d-print-inline { |
| display: inline !important; } |
| .d-print-inline-block { |
| display: inline-block !important; } |
| .d-print-block { |
| display: block !important; } |
| .d-print-table { |
| display: table !important; } |
| .d-print-table-row { |
| display: table-row !important; } |
| .d-print-table-cell { |
| display: table-cell !important; } |
| .d-print-flex { |
| display: flex !important; } |
| .d-print-inline-flex { |
| display: inline-flex !important; } } |
| |
| .flex-row { |
| flex-direction: row !important; } |
| |
| .flex-column { |
| flex-direction: column !important; } |
| |
| .flex-row-reverse { |
| flex-direction: row-reverse !important; } |
| |
| .flex-column-reverse { |
| flex-direction: column-reverse !important; } |
| |
| .flex-wrap { |
| flex-wrap: wrap !important; } |
| |
| .flex-nowrap { |
| flex-wrap: nowrap !important; } |
| |
| .flex-wrap-reverse { |
| flex-wrap: wrap-reverse !important; } |
| |
| .flex-fill { |
| flex: 1 1 auto !important; } |
| |
| .flex-grow-0 { |
| flex-grow: 0 !important; } |
| |
| .flex-grow-1 { |
| flex-grow: 1 !important; } |
| |
| .flex-shrink-0 { |
| flex-shrink: 0 !important; } |
| |
| .flex-shrink-1 { |
| flex-shrink: 1 !important; } |
| |
| .justify-content-start { |
| justify-content: flex-start !important; } |
| |
| .justify-content-end { |
| justify-content: flex-end !important; } |
| |
| .justify-content-center { |
| justify-content: center !important; } |
| |
| .justify-content-between { |
| justify-content: space-between !important; } |
| |
| .justify-content-around { |
| justify-content: space-around !important; } |
| |
| .align-items-start { |
| align-items: flex-start !important; } |
| |
| .align-items-end { |
| align-items: flex-end !important; } |
| |
| .align-items-center { |
| align-items: center !important; } |
| |
| .align-items-baseline { |
| align-items: baseline !important; } |
| |
| .align-items-stretch { |
| align-items: stretch !important; } |
| |
| .align-content-start { |
| align-content: flex-start !important; } |
| |
| .align-content-end { |
| align-content: flex-end !important; } |
| |
| .align-content-center { |
| align-content: center !important; } |
| |
| .align-content-between { |
| align-content: space-between !important; } |
| |
| .align-content-around { |
| align-content: space-around !important; } |
| |
| .align-content-stretch { |
| align-content: stretch !important; } |
| |
| .align-self-auto { |
| align-self: auto !important; } |
| |
| .align-self-start { |
| align-self: flex-start !important; } |
| |
| .align-self-end { |
| align-self: flex-end !important; } |
| |
| .align-self-center { |
| align-self: center !important; } |
| |
| .align-self-baseline { |
| align-self: baseline !important; } |
| |
| .align-self-stretch { |
| align-self: stretch !important; } |
| </style> |
| |
| <link href="/glsp/style.min.78f4fc84313e06df604c59876a8cbdf46ea090960dd0e4a50185b0c4beb6e708.css" rel="stylesheet"> |
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> |
| <link rel="icon" sizes="16x16 32x32" type="image/x-icon" href="/glsp/favicon.ico"> |
| <link rel="icon" href="/glsp/favicon.png"> |
| <link rel="apple-touch-icon-precomposed" href="/glsp/favicon.png"> |
| |
| <script> |
| window.syna = { |
| |
| }; |
| </script> |
| <script src="/glsp/scripts/syna-head.min.0757f18970a0a32d5acac5a2accc5fe82f787821866c545d9ed17ca765f291a3.js"></script></head> |
| <body class="bg-secondary"> |
| |
| <script |
| defer |
| src="https://static.cloudflareinsights.com/beacon.min.js" |
| data-cf-beacon='{"token": "06f5cd775d484737a074b8122aae40ef"}' |
| ></script> |
| |
| <!-- Navigation --><nav class="overlay fragment navbar navbar-expand-lg py-2 scroll-spy bg-light navbar-light" id="nav" role="navigation"> |
| <div class="container"> |
| <a class="navbar-brand py-0" href="/glsp/#"> |
| <img src="/glsp/images/logo.png" height="35" class="d-inline-block align-top" alt="GLSP"> |
| </a> |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> |
| <span class="navbar-toggler-icon"></span> |
| </button> |
| <div class="navbar-collapse justify-content-end collapse show" id="navbarCollapse"> |
| <ul class="navbar-nav"><li class="nav-item"> |
| <a href="/glsp/" |
| class="nav-link"> |
| Home |
| </a> |
| </li><li class="nav-item"> |
| <a href="/glsp/support" |
| class="nav-link"> |
| Support |
| </a> |
| </li><li class="nav-item"> |
| <a href="/glsp/documentation" |
| class="nav-link"> |
| Documentation |
| </a> |
| </li><li class="nav-item"> |
| <a href="/glsp/contact" |
| class="nav-link"> |
| Contact |
| </a> |
| </li><li class="nav-item"> |
| <a href="https://github.com/eclipse-glsp/glsp" |
| class="nav-link"> |
| GitHub |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </nav> |
| |
| <div class="scroll-to-top bg-primary has-font-icon" |
| title="Back to top" |
| ><i class="fas fa-angle-up"></i><span class="sr-only">Back to top</span> |
| </div> |
| |
| <!-- Hero --> |
| <header id="hero" class="fragment hero"> |
| <div style=""class="jumbotron text-center mb-0 bg-dark"> |
| <div id="hero-particles-js" class="hero-particles particles-js"></div> |
| <div class="hero-image-container row justify-content-center align-items-start"> |
| <img |
| class="hero-image overlay img-fluid" |
| src="/glsp/images/diagramanimated.gif" |
| alt="Grahpical Language Server Platform (GLSP)" |
| style="width: 600px !important;" |
| ></img> |
| </div> |
| <div class="hero-subtitle-container row justify-content-center align-items-start"> |
| <h1 class="hero-subtitle overlay jumbotron-heading my-4 text-white">Diagram editors in the web/cloud with GLSP!</h1> |
| </div><div class="hero-buttons"> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/glsp/#features"> |
| <div class="column justify-content-center align-content-center">Features</div> |
| </a> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/glsp/contact"> |
| <div class="column justify-content-center align-content-center">Contact</div> |
| </a> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/glsp/support"> |
| <div class="column justify-content-center align-content-center">Support</div> |
| </a> |
| <a class="overlay btn btn-lg m-2 btn-primary " href="/glsp/documentation/#examples"> |
| <div class="column justify-content-center align-content-center">Examples</div> |
| </a> |
| </div> |
| </div> |
| </header><script> |
| var fragmentName = "hero";window.syna.api.register("hero", "hero-" + fragmentName, { |
| selector: "hero-particles-js", |
| config: null, |
| }); |
| </script> |
| |
| <!-- Content --> |
| <section id="overview" class="fragment content-fragment"> |
| <div class="container-fluid bg-white overlay"> |
| <div class="container py-5 overlay"> |
| <div class="row"> |
| <article class="col-md-12"> |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>The Eclipse Graphical Language Server Platform</h2> |
| </div> |
| </div> |
| <div class="content-body col-12 content px-0 text-body"><p style='text-align: center;'> |
| GLSP is an extensible open source framework to build custom diagram editors in the web/cloud. These editors can be deployed stand-alone or integrated into a web-based IDE such as Eclipse Theia or VS Code. GLSP defines a language server protocol (LSP) for diagrams and integrates well with your existing tool chain and business logic. |
| </p> |
| <img src="images/glspoverview.png" alt="GLSP Overview" style="display: block; margin: auto;"/> |
| </div> |
| </article> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="features" class="fragment "> |
| <div class="container-fluid bg-white "> |
| <div class="container py-5 "> |
| |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>Features</h2> |
| </div> |
| </div> |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/glsp/#" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Web-based Diagram Editors"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-project-diagram fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Web-based Diagram Editors</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Web-based Diagram Editors</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>GLSP provides the perfect basis for the efficient development of web-based diagram editors including edit functionality, layouting, shapes, palettes and everything else you expect from a powerful diagram editor in the web. The SVG/Sprotty based rendering provides a fast and scalable rendering experience out of the box, which is styleable via CSS.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/glsp/#" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Flexible and extensible"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-cogs fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Flexible and extensible</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Flexible and extensible</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>GLSP enables a clear separation between a diagram client and a GLSP server which communicates using the defined protocol. This flexible approach provides a clear encapsulation of your domain-specific diagram logic on the server from the rendering part on the client. The diagram client is highly customizable and extensible to add custom shapes or editing features.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/glsp/#" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Integration and Migration"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fab fa-soundcloud fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Integration and Migration</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Integration and Migration</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The client is based on modern web technologies and can be integrated in any web page as well as into web IDEs such as Eclipse Theia, VS Code or the Eclipse desktop IDE. The server is language agnostic and can be integrated with any domain-specific logic, but more importantly with your existing modeling tool to enable a clean and efficient migration path from the desktop to the web.</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="components" class="fragment "> |
| <div class="container-fluid bg-white "> |
| <div class="container py-5 "> |
| |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>Components</h2> |
| </div> |
| </div> |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-client" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Diagram client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fab fa-html5 fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Diagram client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Diagram client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>GLSP provides a ready-to-use diagram client, which is responsible for rendering domain-specific diagrams. It is implemented using HTML5, Typescript, Sprotty and SVG. The generic GLSP diagram client can be connected to any domain-specific GLSP server via the defined protocol to support a specific diagram type. Furthermore, the diagram client is easily customizable and extensible by domain-specific features.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp/blob/master/PROTOCOL.md" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Protocol"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-broadcast-tower fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Protocol</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Protocol</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Following the successful pattern provided by the language server protocol (LSP) for textual languages, GLSP provides a defined protocol for the communication between the GLSP client and the server. In this modular architecture, server and client are well encapsulated and can be developed in an independant way. This allows mixing in the ideal technologies on both sides and reusing existing clients and server.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-server" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Graphical Language Server"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-database fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Graphical Language Server</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Graphical Language Server</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Enabled by the flexible protocol-based architecture, a domain-specific GLSP server can be implemented in any preferred technology. Therefore, you can easily integrate a GLSP server into an existing environment and reuse the domain-specific business and diagram logic. GLSP provides a frame for the implementation of GLSP servers using Java, as well as integrations with EMF and other existing modeling technologies.</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Items --> |
| <section id="integrations" class="fragment "> |
| <div class="container-fluid bg-white "> |
| <div class="container py-5 "> |
| |
| <div class="title-container row mx-0"> |
| <div class="title col px-0 text-center text-body"> |
| <h2>Diagram Editor Integrations</h2> |
| </div> |
| </div> |
| |
| <div class="row justify-content-center align-items-stretch items"> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-client" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Standalone Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-laptop fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Standalone Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Standalone Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Eclipse GLSP provides a standalone diagram client that can be directly deployed as a web application. Therefore, GLSP does not depend on the usage of any IDE.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-client" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Embedded (on any website)"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fab fa-html5 fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Embedded (on any website)</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Embedded (on any website)</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>The GLSP diagram editor client is based on standard web technologies (SVG, HTML and CSS) and can therefore be seamlessly embedded on any website.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipsesource/glsp-vscode-integration" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="VS Code Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-code fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">VS Code Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">VS Code Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Eclipse GLSP provides a ready-to-be-used integration with VS Code to provide diagram editors as extensions for the popular IDE.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-theia-integration" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Eclipse Theia Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-meteor fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Eclipse Theia Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Eclipse Theia Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Using the powerful extension mechanism of Eclipse Theia, GLSP provides a full integration of diagram editors into the popular IDE framework.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="https://github.com/eclipse-glsp/glsp-eclipse-integration" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Eclipse Desktop IDE Client"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-desktop fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Eclipse Desktop IDE Client</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Eclipse Desktop IDE Client</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Using a Chrome-based browser Eclipse GLSP provides a seemless integration of diagram editors into the Eclipse desktop IDE.</p> |
| |
| </div> |
| </div> |
| </div> |
| <div class="col-md-4 d-flex flex-column"> |
| <a href="/glsp/documentation/#workflowoverview" class="col justify-content-between d-flex flex-column header text-body"> |
| <div class="row image justify-content-center align-items-center"> |
| <span class="fa-stack fa-3x m-2" title="Examples"> |
| <i class="fas fa-circle fa-stack-2x text-primary"></i> |
| <i class="fas fa-user-check fa-stack-1x fa-inverse"></i> |
| <span class="sr-only">Examples</span> |
| </span> |
| </div> |
| <div class="row justify-content-center text-center"> |
| <h4 class="mb-3 text-body">Examples</h4></div> |
| </a> |
| <div class="row justify-content-center text-center p-2"> |
| <div class=" text-body"> |
| <p>Eclipse GLSP provides a consistent example for all available integrations, see <a href="documentation/#workflowoverview">here</a> .</p> |
| |
| </div> |
| </div> |
| </div></div> |
| </div> |
| </div> |
| </section> |
| |
| <!-- Footer --> |
| <section id="footer" class="fragment "> |
| <div class="container-fluid bg-light "> |
| <div class="container py-5 "> |
| |
| <div class="row"> |
| <div class="col-md m-2 text-body"> |
| <h4></h4> |
| <a href="#"> |
| <img src="/glsp/images/logo.png" class="img-fluid w-50" alt="GLSP"> |
| </a> |
| <div class="row justify-content-left ml-0"> |
| <span class="fa-stack fa-2x mt-3 mr-1" title="twitter"> |
| <a href="https://twitter.com/eclipseglsp" class="ignore-color-change"> |
| <i class="fas fa-circle fa-stack-2x"></i> |
| <i class="fab fa-twitter fa-stack-1x fa-fw text-light"></i> |
| <span class="sr-only">twitter</span> |
| </a> |
| </span> |
| <span class="fa-stack fa-2x mt-3 mr-1" title="github"> |
| <a href="https://github.com/eclipse-glsp/glsp" class="ignore-color-change"> |
| <i class="fas fa-circle fa-stack-2x"></i> |
| <i class="fab fa-github fa-stack-1x fa-fw text-light"></i> |
| <span class="sr-only">github</span> |
| </a> |
| </span> |
| <span class="fa-stack fa-2x mt-3 mr-1" title="spectrum"> |
| <a href="https://spectrum.chat/glsp/" class="ignore-color-change"> |
| <i class="fas fa-circle fa-stack-2x"></i> |
| <i class="far fa-comments fa-stack-1x fa-fw text-light"></i> |
| <span class="sr-only">spectrum</span> |
| </a> |
| </span> |
| </div> |
| </div> |
| <div class="col-md m-2 text-body"> |
| <h4>Related Projects</h4> |
| <ul class="nav flex-column"> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://projects.eclipse.org/projects/ecd.sprotty">Eclipse Sprotty</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://projects.eclipse.org/projects/ecd.emfcloud">Eclipse EMF.cloud</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://eclipsesource.com/technology/eclipse-theia">Eclipse Theia IDE</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link p-0 display-5" href="https://eclipse.org/che">Eclipse Che</a> |
| </li> |
| </ul> |
| </div> |
| <div class="col-md m-2 text-body"> |
| <div><h4 id="graphical-language-server-platform">Graphical Language Server Platform</h4> |
| <p>GLSP is a project hosted at the Eclipse Foundation, led by <a href="https://projects.eclipse.org/projects/ecd.glsp/who">Philip Langer</a>, organized within the <a href="https://projects.eclipse.org/projects/ecd">Eclipse Cloud Development</a> project.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <!-- Copyright --> |
| <footer class="overlay fragment container-fluid bg-secondary" id="copyright"> |
| <div class="container"> |
| <div class="row py-3"> |
| <div class="col-md"> |
| <div class="row mx-0 my-2 justify-content-center text-center text-lg-none text-black-50"> |
| <div class="row mx-0 mr-lg-auto justify-content-center"> |
| <div class="col-auto px-1 copyright-legal">© Copyright 2021</div> |
| <div class="col-auto px-0 copyright-by"> by Eclipse Foundation</div> |
| </div> |
| </div> |
| </div> |
| <div class="col-md"> |
| <div class="row mx-0 my-2 justify-content-center"> |
| <ul class="nav ml-lg-auto"> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://projects.eclipse.org/projects/ecd.glsp" |
| >About</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/privacy.php" |
| >Privacy Policy</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/termsofuse.php" |
| >Terms of Use</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/copyright.php" |
| >Copyright</a> |
| </li> |
| <li class="nav-item"> |
| <a class="nav-link py-0" href="https://www.eclipse.org/legal/" |
| >Legal</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <div id="react"></div> |
| |
| <!-- Theme Code --> |
| <script async defer src="/glsp/scripts/syna-main.min.68ae1ae47948304c9c224cfc1a97ffe16c57514bc587dd6140dcb82389a8d299.js"></script> |
| <script async defer src="/glsp/scripts/syna-hero.min.97a3fff0c67d9da74ebdd6af2640d8a9cde6200539e8c3b2c091b7fc6644420e.js"></script> |
| <script async defer src="/glsp/scripts/syna-content.min.bf537eb5ace369e45e8b4ed41b8d235a65db92236a400ed5659f7a3c41d0f221.js"></script> |
| </body> |
| </html> |
