SyteLine IDS Form Designer

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.

Performance

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

MCP server (sl-ids-forms)

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

1. 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.
2. 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.
3. Reload Kiro to pick up the server. Use “IDS Form: Unregister MCP Server from Kiro” to remove it.

Settings

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; expression autocomplete for the when rules; multi-select drag.