Bloge Studio

Bloge Studio is a browser-based visual environment for building and editing BLOGE graphs. It is aimed at teams that want a visual orchestration surface without giving up the .bloge source of truth.

What Studio does

Bloge Studio can:

• open and visualize .bloge graphs
• edit DAG structure through drag-and-drop interactions
• generate DSL from the visual model in real time
• show diagnostics and schema-aware metadata
• export graph assets for repository-based workflows

Key capabilities

• Sugiyama-based DAG layout
• custom visual node types for operators, branches, transforms, foreach, and loop constructs
• Monaco-based code editing alongside the visual canvas
• undo / redo support through snapshot history
• operator-catalog loading from operator-metadata.json

Tech stack

Layer	Technology
UI	React 19 + TypeScript
Graph canvas	React Flow
State	Zustand
Styling	Tailwind CSS + custom properties
Editor	Monaco Editor
Layout	Sugiyama algorithm
Testing	Vitest + Testing Library
Shared language core	bloge-lang

Architecture overview

Studio is organized around a few major areas:

• Canvas for DAG editing
• Code editor for .bloge source
• Operator palette for searchable operator insertion
• Property panel for node configuration
• Diagnostics panel for parser, compiler, and lint feedback

The design goal is to keep visual editing and source editing aligned instead of creating two unrelated models.

Workflow

1. load operator metadata
2. create or import nodes on the canvas
3. connect edges and configure node properties
4. inspect the generated .bloge source
5. export the DSL into the repository
6. run the same asset through BLOGE's normal compiler and runtime

Studio is an authoring surface, not a second execution engine.

Local development

cd bloge-studio
npm install
npm run dev
npm run build
npm test

The build produces a deployable static output for web distribution.

Operator metadata integration

Studio can ingest operator-metadata.json generated by the Maven plugin. That lets the UI surface:

• available operators
• input and output schema
• field completion hints
• richer data-flow visualization

When to use Studio

Studio is especially useful when:

• graph authors want a visual review surface
• teams generate or inspect .bloge assets collaboratively
• operator catalogs and schema should be discoverable without reading Java source
• the workflow is complex enough that a DAG view is easier to review than code alone

Next steps

• Generate metadata in Maven Plugin & Lint
• Keep the language contract close by with DSL Overview
• See representative graphs in Example Catalog