A Chrome DevTools-style inspection tool for .visual.html screen prototypes — built to help you copy AI-generated structure, classes, and attributes into OutSystems Service Studio.
[!CAUTION]
NOT A VISUAL EDITOR: Unlike OutSystems Service Studio, this is not a drag-and-drop editor. It is an inspection tool (similar to Chrome DevTools) designed to help you copy the structure, classes, and attributes from an AI-generated screen so you can recreate it quickly in OutSystems.
Part of the Flowmo Extension Pack — a vibe coding environment for OutSystems developers.
Support model: best-effort, no response-time guarantee
Privacy
No telemetry is intentionally added in this extension.
Your files remain in your local VS Code workspace.
Features
Inspection tool — Highly specialized for .visual.html files, providing a live preview alongside a structured layer tree.
Layer panel — Browse the element hierarchy with tag names, classes, and IDs.
The "Copy-to-Studio" Workflow — High-speed recreation of AI intent in Service Studio by copying:
CSS Classes (e.g., display-flex gap-m)
Inline Styles (e.g., background-image: ...)
Text Content and placeholders.
Attributes (e.g., aria-label, data-*).
Bidirectional click-to-select — Select in the tree to highlight in preview, or click in preview to select in the tree.
Interactive mode — Toggle "Inspect" vs "Interactive" to test UI states like dropdowns and accordions.
Responsive viewports — Instant preview across Mobile, Tablet, and Desktop presets.
Live sync — Edits made by your AI agent in the source file are reflected in the inspector immediately.
Usage
Open any .visual.html file in VS Code — the Visual Inspector opens automatically.
Use the layer panel on the left to browse elements.
Click an element to jump to its line in the source (requires the source file to be open beside the inspector).
To open the source alongside the inspector, click the $(go-to-file) icon in the editor toolbar or run Visual Inspector: Open Source Text from the Command Palette.
