blob: f041a8f19141b229433b01e81447f65eca5e7d86 [file] [log] [blame]
<html lang="en-us">
<head>
<meta name="theme" content="Syna">
<meta name="theme-version" content="v0.15">
<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 http-equiv="Content-Language" content="en-us">
<meta name="google" value="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. Those 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="Tags &amp;middot; Eclipse Graphical Language Server Platform">
<meta property="og:url" content="https://www.eclipse.org/glsp/tags/">
<meta property="og:description" content="GLSP is an extensible open source framework to build custom diagram editors in the web/cloud. Those 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:site_name" content="Eclipse Graphical Language Server Platform">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tags &amp;middot; Eclipse Graphical Language Server Platform" />
<meta name="twitter:description" content="GLSP is an extensible open source framework to build custom diagram editors in the web/cloud. Those 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/tags/" />
<meta property="og:image" content="">
<meta name="twitter:image" content="">
<meta name="author" content="Eclipse Foundation">
<meta name="generator" content="Hugo 0.58.3" />
<title>Tags &middot; Eclipse Graphical Language Server Platform</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.d4f7b782585e88dbeaf9b247cec861d285db3d18cf2168f5b716326e65ad7cc8.css" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="/glsp/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/glsp/scripts/syna-head.min.bb34bad09b42b3febef27ef9976fc5d5c34c8f199549c80f2bfb0a6ecc2586e2.js"></script></head>
<body class="bg-secondary">
<!-- 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/eclipsesource/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="particles-js"></div>
<div class="row justify-content-center align-items-start">
<img
class="overlay img-fluid"
src="/glsp/images/diagramanimated.gif"
alt="Grahpical Language Server Platform (GLSP)"height="150px"width="500px"></img>
</div>
<div class="row justify-content-center align-items-start">
<h1 class="overlay jumbotron-heading my-4 text-white">Diagram editors in the web/cloud with GLSP!</h1>
</div><div>
<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>
</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="content-fragment fragment">
<div class="overlay container-fluid bg-white">
<div class="container py-5">
<div class="row">
<article class="col-md-12">
<div class="row mx-0">
<div class="col px-0 text-center text-body">
<h2>The Eclipse Graphical Language Server Platform</h2>
</div>
</div>
<div class="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. Those 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>
<p align="center">
<img src="images/glspoverview.png" alt="GLSP Overview"/>
</p>
</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="row mx-0">
<div class="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 anything 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 stylable 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 communicate 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 or VS Code. 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="row mx-0">
<div class="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="/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="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-specifc 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="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 successfull 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 to mix in the ideal technologies on both sides and to reuse existing clients and server.</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="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 technolgy. 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>
<!-- 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/eclipsesource/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="spektrum">
<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">spektrum</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">Sprotty</a>
</li>
<li class="nav-item">
<a class="nav-link p-0 display-5" href="https://projects.eclipse.org/projects/ecd.emfcloud">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, lead 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.</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&nbsp;2019</div>
<div class="col-auto px-0"> 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>
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row mx-0">
<div class="modal-title col px-0">
<h5 class="title text-dark"></h5>
<h6 class="subtitle text-secondary"></h6>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<img src="" alt="" class="img-fluid">
<div class="modal-body p-3">
<div class="badge-container"></div>
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Theme Code -->
<script async defer src="/glsp/glsp/scripts/syna-main.min.7d08697560d9c911a0194673093ed24e917be39c0c6ea6ffe9bfefd7869f9f34.js"></script>
<script async defer src="/glsp/glsp/scripts/syna-hero.min.4c86bbf85a8655c22c5046df9f983a1f0a0f771915f9f447a6872a863a6714ef.js"></script>
</body>
</html>