DSL syntax highlighting
Flow DSL is highlighted in two places. VS Code highlights .flow files through
a TextMate grammar, and the Flow Code webviews highlight DSL shown inside the
sidebar through a shared highlighter. Both render the same DSL the same way.
TextMate grammar for .flow files
Section titled “TextMate grammar for .flow files”A TextMate grammar registers .flow as a language in VS Code, so opening a
.flow document gives you token coloring for the header, node blocks, edge
statements, and value types described in the
grammar reference. This is the editor-native path for
files on disk.
Shared highlighter in the webviews
Section titled “Shared highlighter in the webviews”The Flow Code webviews use a shared highlighter for DSL rendered inside the sidebar rather than in a file editor. It applies to:
- The chat disclosure, where the generated DSL expands inline in a turn.
- The editable run-panel overlay, where the run-panel DSL is shown with live highlighting as you edit it. See Interface and controls.
The shared highlighter keeps the in-webview DSL consistent with the file-level grammar, so the same tokens look the same wherever the DSL appears.
Vendored local schema
Section titled “Vendored local schema”The grammar’s $schema points at a vendored local ./tmlanguage.schema.json
rather than a remote URL. The grammar validates against the schema shipped with
the extension, so highlighting does not depend on network access.