A VS Code custom editor that opens SyteLine IDS form JSON files (*.ids.json) in a visual designer instead of raw text.
Features
- Custom editor on
**/*.ids.json — opens forms visually, with an "Open as JSON" button to fall back to text.
- Form tab — edit form metadata (name, caption, template, primary IDO, datasource, initial command, filter form spec) and toggle
primary_standardoperations.
- Layout tab with three views — Tree, Preview, and Split:
- Container tree reassembled from the flat
layout.notebooks / sections / components arrays (containment is by container name reference). Grid columns nest under their grid; template panes (##…) and no-container items collapse into a single (root).
- Add / duplicate / delete on every node; a toolbar to add components (any of 35 types), groups/sections, and notebooks.
- Drag-drop to reparent (onto a container) or reorder (onto a sibling).
- Visual preview canvas rendering containers as boxes and components on a CSS grid by
position.row/column; add per box, delete per cell, and drag-drop in/out of containers.
- Properties panel for the selected component / section / notebook, including
component_class { name, parameters }, enabled_when / visible_when / required_when, and component events.
- Events tab — searchable, inline-editable table with add/delete.
- Variables tab — searchable, inline-editable table with add/delete.
- Script tab — read-only view of the embedded
form_script.
- Validation — dangling
container references, duplicate names, empty Property bindings, unknown component types, and events without a response are surfaced in an issues panel (click to navigate) and a footer badge.
Every edit mutates the parsed JSON and re-serializes with the exact SyteLine convention — JSON.stringify(obj, null, 2) with CRLF, no BOM, no trailing newline — so diffs stay clean. Verified byte-for-byte against real forms up to 2.1 MB / 1,724 components.
The webview skips a full rebuild when a state push changes nothing visible (a structural render signature gates re-renders), builds the container tree once per render, and preserves scroll positions. On a 1,724-component form: tree build ≈ 0.6 ms, signature check ≈ 0.6 ms.
Architecture
| Area |
Files |
| JSON round-trip |
src/model/idsJson.ts |
| Model + container tree |
src/model/idsFormModel.ts |
| Enums (mined from 2,466 forms) |
src/model/enums.ts |
| Edit operations + factory |
src/model/editOps.ts, src/model/itemFactory.ts |
| Validation |
src/model/validate.ts |
| Custom editor host |
src/editor/formEditorProvider.ts |
| Webview shell + state |
src/webview/main.ts, appContext.ts, signature.ts |
| Views |
src/webview/views/{formTab,layoutTab,tree,preview,props,eventsTab,variablesTab,scriptTab,issuesPanel}.ts |
| Schema tooling |
scripts/mine-schema.js → docs/ids-form-structure.md |
The extension ships a dependency-free MCP server so an MCP-capable agent (e.g. Kiro) can read and
edit IDS/IV2 forms with the same engine the visual designer uses. It reuses the pure model modules, so
edit semantics never diverge between the UI and the agent.
Enable it
- Run the command “IDS Form: Register MCP Server with Kiro” (choose User or Workspace scope). This
writes an entry into
.kiro/settings/mcp.json and, on Windows, a resilient mcp-sl-ids.cmd launcher
next to it.
- Set
slIds.idsRoots to the folder(s) that contain your *.ids.json / *.iv2.json forms (passed
to the server as MG_IDS_ROOTS). Re-run the register command after changing it.
- Reload Kiro to pick up the server. Use “IDS Form: Unregister MCP Server from Kiro” to remove it.
Settings
| Setting |
Purpose |
slIds.idsRoots |
Folders searched for forms (MG_IDS_ROOTS). |
slIds.mcpNodePath |
Optional explicit Node executable (instead of the Windows .cmd / Electron-as-Node launcher). |
Tools (41) — 10 read-only (form_list, form_get_model, form_validate, form_get_component,
form_get_variable, form_get_section, form_get_notebook, form_get_tree, form_list_events,
form_list_missing_variables) plus a dedicated, self-describing tool for every one of the designer’s 31
edit operations (add/rename/delete/move/reparent components, sections, notebooks, cards, tabs, variables,
events, form fields), and form_apply_edit as a raw escape hatch.
Safety model
- All mutating tools are dry-run by default and require
apply:true to write; they re-validate after
every change and preserve the exact byte conventions (CRLF/BOM/indent).
- Only the read-only tools are in the registration’s
autoApprove list; every write requires approval.
- Path scope: the server reads/writes any absolute path it is given (there is no workspace sandbox).
This is intentional for a local developer agent — point
slIds.idsRoots at trusted form folders and be
aware that apply:true calls modify files on disk.
Develop
npm install
npm run build # bundle extension + webview
npm test # 79 unit + integration tests
npm run watch # rebuild on change
npm run mine-schema <dir> # profile a folder of *.ids.json
npm run mine-schema <dir> -- --doc docs/ids-form-structure.md
Press F5 to launch an Extension Development Host, then open any *.ids.json.
Not yet implemented
Template (form.template) resolution to show template-provided panes by real name; add/delete of cards & tabs from the UI; expression autocomplete for the when rules; multi-select drag.
| |
