{"library":"sprotty","title":"Sprotty Diagramming Framework","type":"library","description":"Sprotty is a next-generation, open-source diagramming framework built with web technologies, primarily TypeScript. It provides a robust, extensible foundation for creating interactive graphical views in web applications and rich clients. The framework excels in fast, scalable SVG rendering with built-in animations, supporting both client-side-only and distributed (client/server) runtimes. Currently at version 1.4.0, it maintains an active release cadence with several minor versions per year since reaching maturity with its 1.0.0 release. Key differentiators include its reactive client architecture, a highly configurable dependency injection system (based on InversifyJS), and seamless integration capabilities with tools and ecosystems like Xtext, Langium, the Language Server Protocol (LSP), VS Code, and Theia, enabling the development of complex graphical editors and sophisticated visualizations. It leverages JSX for declarative view definition and standard CSS for comprehensive styling.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install sprotty"],"cli":null},"imports":["import { Container, ContainerModule } from 'inversify';","import { LocalModelSource, SprottyDiagramInitializer, TYPES, loadDefaultModules } from 'sprotty';","import { SGraph, SNode, SEdge } from 'sprotty-protocol';"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":"https://sprotty.org","github":"https://github.com/eclipse-sprotty/sprotty","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/sprotty","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import 'reflect-metadata'; // Required by InversifyJS\nimport { Container, ContainerModule } from 'inversify';\nimport { SGraph, SNode, SEdge } from 'sprotty-protocol';\nimport {\n  ConsoleLogger,\n  LogLevel,\n  LocalModelSource,\n  TYPES,\n  SprottyDiagramInitializer,\n  loadDefaultModules,\n  configureModelElement,\n  RectangularNodeView,\n  RectangularNode,\n  PolylineEdgeView,\n  SLabelView\n} from 'sprotty';\n\nconst diagramModule = new ContainerModule((bind, unbind, isBound, rebind) => {\n  // Bind custom types to Sprotty's DI system\n  bind(TYPES.ILogger).to(ConsoleLogger).inSingletonScope();\n  rebind(TYPES.LogLevel).toConstantValue(LogLevel.warn);\n\n  // Load core Sprotty modules\n  loadDefaultModules(bind, unbind, isBound, rebind);\n\n  // Configure model elements and their views\n  configureModelElement(bind, RectangularNode.TYPE, RectangularNode, RectangularNodeView);\n  configureModelElement(bind, SEdge.TYPE, SEdge, PolylineEdgeView);\n  configureModelElement(bind, SLabelView.TYPE, SLabelView, SLabelView);\n\n  // Bind the ModelSource for client-side diagramming\n  bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope();\n});\n\nexport function setupSprottyDiagram(containerId: string) {\n  const diagramContainer = document.getElementById(containerId);\n  if (!diagramContainer) {\n    console.error(`Container element with ID '${containerId}' not found.`);\n    return;\n  }\n\n  const container = new Container();\n  container.load(diagramModule);\n\n  const modelSource = container.get<LocalModelSource>(TYPES.ModelSource);\n  const initializer = new SprottyDiagramInitializer(diagramContainer, modelSource, container);\n\n  initializer.initialize();\n\n  const initialModel: SGraph = {\n    type: 'graph',\n    id: 'graph',\n    children: [\n      {\n        type: RectangularNode.TYPE,\n        id: 'node1',\n        x: 100, y: 100, width: 80, height: 50,\n        children: [{ type: SLabelView.TYPE, id: 'label1', text: 'Node 1' }]\n      },\n      {\n        type: RectangularNode.TYPE,\n        id: 'node2',\n        x: 300, y: 150, width: 80, height: 50,\n        children: [{ type: SLabelView.TYPE, id: 'label2', text: 'Node 2' }]\n      },\n      {\n        type: SEdge.TYPE,\n        id: 'edge1',\n        sourceId: 'node1',\n        targetId: 'node2'\n      }\n    ]\n  };\n\n  modelSource.setModel(initialModel);\n\n  console.log('Sprotty diagram initialized and model set.');\n}\n\n// To run this, you would typically call it from an HTML page:\n// <div id=\"my-sprotty-container\" style=\"width: 600px; height: 400px; border: 1px solid black;\"></div>\n// <script type=\"module\">import { setupSprottyDiagram } from './your-script-path'; setupSprottyDiagram('my-sprotty-container');</script>\n","lang":"typescript","description":"This quickstart sets up a basic client-side Sprotty diagram using a local model source, demonstrating dependency injection configuration, model definition with a simple graph, two nodes, and an edge, and rendering it into a specified HTML element.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}