The next generation of AV development
A Visual Studio Code extension that brings visual interface creation, open project files, Git workflows, professional code-editing tools, and AI-assisted development into one connected experience.
For Visual Studio Code · macOS & Windows
Available on Visual Studio Marketplace
A unified workflow
AVstudio Editor NG is built for AV professionals who want the speed of a visual editor without giving up the flexibility, transparency, and control of modern software development.
Design interfaces, organize real project files, collaborate through Git, and extend your work using familiar web technologies, all inside Visual Studio Code and compatible VS Code-based platforms.
Visual Editor
Select a control on the canvas and configure its size, appearance, content, and actions in the properties sidebar. Keep your interface and its settings together as you design.
Browse AVstudio Editor documentation
Live Preview
Run your interface in a browser while keeping the editor open. Try navigation, scene selection, and lighting controls, then check the displayed values and active states.
Browse AVstudio Editor documentation
Connectors & Variables
Configure connection settings in dedicated forms and manage typed variables in one place. Use actions and data bindings to connect controls to commands, incoming data, and interface state.
A new foundation for creating, managing, and evolving professional AV interfaces.
Build modern, responsive AV interfaces visually while retaining direct access to the underlying web project.
Projects use a logical folder structure and open, human-readable JSON, HTML, CSS, and JavaScript files, without a proprietary project container.
Work naturally with Git, GitHub, and other version-control systems for history, branching, code reviews, merges, archiving, and project handoff.
Delivered as a VS Code extension, with support for compatible platforms such as Cursor, Windsurf, and Antigravity, plus your preferred themes and extensions.
Connect a compatible AI agent to the built-in MCP server for live project context, diagnostics, and supported editor commands. The generated AVstudio guide helps agents work with your project's structure and data model.
Keep local backups, reuse components and shared libraries, and retain access to project files without relying on proprietary exports or an online platform.
Bring visual interface creation, open project files, and professional development tools into your Visual Studio Code workflow.
Install the extension from the Visual Studio Marketplace to get started.
Get the Visual Studio Code extension and bring visual design, code, Git, and AI into one connected workflow.
Install from Visual Studio MarketplaceAnswers to common questions about AVstudio Editor NG.
AVstudio Editor NG is the next generation of AVstudio's visual interface editor. It combines visual interface creation with direct access to the underlying web project and professional development tools.
Yes. AVstudio Editor NG runs as a Visual Studio Code extension, so visual design and code editing can remain part of one connected workflow.
Support is planned for compatible VS Code-based platforms such as Cursor, Windsurf, and Antigravity. Compatibility may vary as those platforms and AVstudio Editor NG continue to evolve.
Projects use a logical folder structure and open, human-readable files including JSON, HTML, CSS, and JavaScript, without requiring a proprietary project container.
Yes. The file-based workflow is designed to work naturally with Git, GitHub, and other version-control systems for history, branching, reviews, collaboration, and project handoff.
Yes. A compatible AI coding assistant can use your open project files and the generated AVstudio guide to help create pages and elements, apply styles, configure actions, and write code. Connect it to the built-in MCP server to add live project context, diagnostics, and supported editor commands to the workflow.
The Model Context Protocol (MCP) server exposes project snapshots, diagnostics, page parameters, open editor context, and icon tools. A connected agent can also invoke supported, allowlisted editor commands. Available tools depend on the installed extension version and the assistant client.
No. You can design interfaces, edit project files, and run Live Preview without MCP. MCP is an optional connection for compatible AI assistants. The generated AVstudio guide explains the project structure and editing rules; MCP adds live editor context and tools.
Install AVstudio Editor NG from the Visual Studio Marketplace using the installation link on this page.
