VS Code Extensions
Visual Inspector

Visual Inspector

by flowmo

Visual Inspector is a VS Code inspection tool for .visual.html prototypes, offering live previews, structured layer trees, responsive viewports, and easy copying of classes, styles, text, and attributes into OutSystems.

Downloads

69

Rating

— (0)

Version

0.9.1

Last updated

Jul 27, 2026

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.

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

  1. Open any .visual.html file in VS Code — the Visual Inspector opens automatically.
  2. Use the layer panel on the left to browse elements.
  3. Click an element to jump to its line in the source (requires the source file to be open beside the inspector).
  4. 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.

Requirements

  • VS Code ^1.85.0

Known Issues

Please report issues at github.com/izambasiron/flowmo-lol-flowchart-editor/issues.

Support

For questions or feedback, contact [email protected] or visit flowmo.lol.

License

See LICENSE.