AVstudio Editor
AVstudio Editor - design touch interfaces for AV, conference and smart-home controllers directly in VS Code.
Build responsive pages from containers and controls, wire them to data and hardware, and preview live - without leaving the editor.
Why AVstudio Editor
- Visual canvas - free-form layout with containers, constraints and live element preview (button, text, image, slider, dpad, shades, rgb picker, video, subpage and more)
- Themes and layout - centralised theme variables, global slots and subpages for reusable compositions
- Data and hardware - datasources, variables, functions and connectors (WebSocket, Web, MQTT, Crestron, KNX)
- Live Preview - open any page in a browser or Chrome with DevTools, pick device size and orientation, see changes instantly
- Productivity - project health checks, start-page control, icon library, page parameters, missing-file generation
- AI-ready - built-in MCP server for AI agents (Cursor, Antigravity, etc.) - project context, diagnostics and icon tools
Quick start
AVstudio: Create new AVstudio project from the Command Palette- Open a
*.page - the Visual Editor opens automatically
- Edit in the sidebar: Page Properties (incl. Page Layout), Element Properties
AVstudio: Open Live Preview to run on device
Commands
Add page, Add container, Add theme, Add datasource, Add connector, Add variable, Set start page, Select editor window size, Rotate device, Run Project Health Check, Copy MCP client config - all under AVstudio in the Command Palette.
Requirements
VS Code 1.104+, AVStudio project with avstudio.config.
| |
