Skip to content

The vmblu Playground

The browser-based Playground is itself modeled with vmblu. Its architecture coordinates workspace and document handling, model and Sysblu editing, source navigation, layout, and runtime features while reusing the core and UI libraries shared with the VS Code extension.

vmblu Playground architecture
The vmblu Playground architecture

The fact that the vscode extension and the playground app could share so many nodes, out of the box, made it a breeze to port the original browser based app to the vscode environment, which is based on a webview, but has a completely different underlying system. Just by introducing a few special nodes we could capture the differences and keep the core vmblu logic untouched.

vmblu VS Code webview architecture
The vmblu VS Code webview architecture

Try the browser editor

Open Playground to explore the editor in your browser. Select a tutorial model from the workspace, then inspect its nodes, routes and source code.