AVstudio Editor
Design touch interfaces for AV/IT and IoT control systems directly in Visual Studio Code — visually, with open project files you fully own.
AVstudio Editor is the VS Code extension of AVstudio: build responsive HTML5 control UIs, dashboards and panels for Crestron®, AMX, Q-SYS, KNX, MQTT and other AV and automation platforms, preview them live, and keep everything in a Git-friendly, file-based project.
Why AVstudio Editor
- Visual editor — WYSIWYG canvas with free-form layout, containers and constraints, and live preview of every element (button, text, image, spacer, slider, round slider, dpad, shades, color picker, state control, input, date/time, video, subpage, subpage list).
- Your files, your rules — a logical folder structure of open, human-readable JSON, HTML, CSS and JavaScript files; no proprietary project container, and it works with Git, GitHub and other version control.
- Data and hardware — datasources, variables and functions, plus built-in connectors for WebSocket, HTTP/Web, MQTT, Crestron®, AMX, KNX and DoorBird.
- Responsive and fixed layouts — one design adapts across phones, tablets and wall-mounted touch panels without rework: pick a fluid responsive layout, or a pixel-exact fixed layout when you need it.
- Themes and reusable layout — centralised theme variables, global slots and subpages for reusable compositions.
- Live Preview — open any page in a browser or Chrome with DevTools, pick a device size and orientation, and see changes instantly. Connect straight to real control systems for live feedback and real data, so you can run a full end-to-end test in a couple of clicks — no deployment or upload needed. Runs in Visual Studio Code and compatible VS Code-based editors such as Cursor, Windsurf and Antigravity.
- Productivity — project health checks, start-page control, icon library, page parameters, missing-file generation, editor window size and device rotation.
- AI-ready — built-in MCP server for AI coding agents (Cursor, Antigravity and other MCP-capable tools) for project context, diagnostics, commands and icon tools, plus a generated AVstudio skill for AI agents.
Works with your ecosystem
- Editors — Visual Studio Code and compatible platforms such as Cursor, Windsurf and Antigravity.
- Targets — the build is a portable HTML5 project, so it can be deployed to devices of any type (iOS and Android), to ready-made platforms such as Crestron One, to AVstudio App Container, and to AVstudio AVS-10 / AVS-15 touch panels.
- Systems and protocols — Crestron®, AMX, Q-SYS, KNX, Global Caché, NETIO, MQTT, WebSocket, HTTP/REST, RTSP and SIP, with hardware interfaces such as RS-232/RS-485, relay, digital I/O and IR.
Use cases
Conference rooms, live events, hospitality, exhibitions and museums, and security — plus smart homes, building automation, commercial AV, marine and industrial control.
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) and Element Properties
AVstudio: Open Live Preview to test in a browser or on device
Commands
All commands live under AVstudio in the Command Palette: create project, page, container, theme, datasource, variable and function; create connectors (WebSocket, Web, MQTT, Crestron, AMX, KNX, DoorBird); page parameters; variables; icon explorer; open Live Preview; set start page; select editor window size; rotate device; run project health check; generate project and missing project files; build project; set up MCP server; generate AVStudio skill; profile.
AI and MCP
The extension ships a built-in MCP server that exposes project context, diagnostics, page parameters, open editors, icon packs and command execution to AI agents. Connect an MCP-capable assistant in VS Code to generate pages and elements, configure actions, apply styles and validate projects against the documented data model.
Requirements
VS Code 1.104+ and an AVstudio project (with avstudio.config).
Legal
Crestron® is a registered trademark of Crestron Electronics, Inc.
AMX is a trademark of Harman International Industries, Inc.
Q-SYS and QSC are trademarks of QSC, LLC.
KNX is a registered trademark of KNX Association.
Global Caché is a trademark of Global Caché, Inc.
NETIO is a trademark of NETIO products a.s.
DoorBird is a trademark of Bird Home Automation GmbH.
All other trademarks are the property of their respective owners.
AVstudio is not affiliated with, endorsed by, or sponsored by these companies.
Telemetry & privacy
AVstudio Editor collects only anonymous environment metadata to help debug and stabilize the product. We do not collect personal data, and never access or transmit your project content, source code, files or credentials. Read the full policy: https://avstudio.app/privacy/
Links
| |
