TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    Sprotty Diagrams in VS Code Webviews

    This library helps you to implement a VS Code webview that displays a Sprotty diagram. You can use sprotty-vscode to integrate such a webview in a VS Code extension.

    Getting Started

    The diagram itself is implemented with the Sprotty API. See the Sprotty Wiki, the states example and the Sprotty examples for reference.

    The next step is to implement a subclass of SprottyStarter and instantiate it in your entry module as shown below.

    export class ExampleSprottyStarter extends SprottyStarter {
        createContainer(diagramIdentifier: SprottyDiagramIdentifier) {
            return createExampleDiagramContainer(diagramIdentifier.clientId);
    new ExampleSprottyStarter();

    The function createExampleDiagramContainer should create an InversifyJS container with all necessary Sprotty configuration. The passed clientId should be used in the baseDiv and hiddenDiv ids in Sprotty's ViewerOptions.

    In case you are connecting your diagram with a language server, e.g. using Xtext, you should use SprottyLspEditStarter as superclass.


    npm i sprotty-vscode-webview

    DownloadsWeekly Downloads





    (EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0)

    Unpacked Size

    194 kB

    Total Files


    Last publish


    • tortmayr
    • sprotty-owner
    • spoenemann
    • eclipse-sprotty-bot