AVstudio is excited to host our next Live Workshop on December 16th at 11:00 AM EST.
What To Expect
Our team will walk through helpful tips and tricks, best practices for building layouts efficiently, and a variety of simple interface examples to help you get started.
Along with these topics, you will have plenty of opportunities to ask questions and get answers from our team. We want this session to reflect what you need most, so your questions will guide much of the conversation. We’re open to anything. If you need help navigating the platform’s features, want to share ideas for improvements, or need advice on structuring a layout, we are ready to dive in and help you move forward with AVstudio Editor.
Upon registering, we encourage you to submit any questions or feedback you may have. This allows us to prepare targeted demonstrations that show precisely how to achieve the results you are looking for. If you do not have questions yet, that is completely fine. Our prepared topics will give you plenty of useful ideas and techniques you can apply right away.
Register Today
Join us for a session designed to help you build faster, design smarter, and get more out of AVstudio Editor.
The demand for modern, responsive and intuitive user interfaces has never been greater. For AV integrators and developers, delivering these experiences often involves navigating through a complex web of programming languages, proprietary ecosystems and time-consuming workflows. This challenge led to the creation of AVstudio Inc., a spinoff of integration firm AVgator Inc., as well as the development of its flagship product, AVstudio Editor.
During a recent conversation with Commercial Integrator, Vadim Chekirka, founder and CEO of AVstudio, provided context on why the company’s HTML5 visual editor emerged and described how it addresses longstanding industry demands.
The Launch of AVstudio Editor
The story of AVstudio Editor begins with a massive integration project completed by AVgator about five years ago. The job encompassed more than 100 rooms and 120 user interfaces, requiring extensive HTML5 coding in the process. This compelled AVgator to bring in web developers to support the AV programming team. The project was a success, but it came at a high cost, consuming about a thousand hours of labor. This led to a crucial realization: A better, more efficient tool was needed to handle the scale of the projects they were taking on, without expecting AV programmers to become web developers in the process.
That experience revealed a gap in the market for an efficient visual editor capable of producing high-quality HTML5 interfaces. AVstudio Editor emerged as the solution, created to streamline UI development for both AV and IoT environments. It’s a tool built by integrators for integrators.
Redefining Flexibility in Systems Integration
AVstudio Editor integrates seamlessly with numerous systems and programming tools. Rather than locking developers into a single ecosystem, the platform is designed to be control-system agnostic. AVstudio Editor supports a wide range of systems, including, but not limited to, AMX, Crestron, Q-SYS and Node-RED for IoT applications. This gives integrators the freedom to choose the hardware that best fits each project.
This approach enables teams to design a single interface and connect it to any control system they prefer, without requiring a redesign. As Chekirka states, “You develop one user interface…one design…and you just select what control system you prefer to have.” End users benefit most from this consistency, allowing a team’s focus to elevate from the underlying technology to the user experience, which is what truly matters.
AVstudio Editor further achieves this through open standards, using web sockets and the MQTT protocol. Ensuring seamless communication across a multitude of devices and platforms, AVstudio Editor is an ideal tool not just for traditional AV but also for the expanding world of industrial IoT.
Reducing Development Time and Costs
In the world of commercial integration, time is money; that’s why speed and efficiency were key focal points for AVstudio when developing their platform. The WYSIWYG [What You See is What You Get] interface and drag-and-drop functionality eliminate the need for tedious line-by-line coding of standard UI elements, significantly reducing development time. According to Chekirka, users can reduce interface-development time by up to 80% as compared to traditional HTML5 development.
This efficiency becomes particularly critical when dealing with last-minute client requests. Instead of rewriting sections of code, developers can adjust components visually, apply rules and see the updates immediately. This is nearly impossible to achieve when working with raw HTML5 code in traditional development environments.
The AVstudio Editor’s live preview feature further accelerates the workflow. Changes are visible in real time, even connecting directly to the control system during the design phase. “[If] you drag the button on the editor, you will see [it] in preview right [away],” Chekirka explains. “You don’t need to recompile [or] load to the touchpanel to see how it looks like.” This immediate feedback loop ensures a polished final product and avoids the frustrating cycle of compiling, deploying and testing. This is considered one of the platform’s most impressive and unique features, providing something that no other vendor on the market can quite match.
An Advanced User Experience
AVstudio Editor empowers integrators and their teams to produce sleek, fast, highly functional interfaces without requiring expert developers. These are the building blocks for premium user experiences and projects that look and feel custom-made. And this is a crucial differentiator for high-end clients who demand unique solutions. Although AVstudio Editor simplifies the design process, it does not limit the power available to advanced programmers. Developers can still inject custom JavaScript, use their own CSS [Cascading Style Sheets] and integrate with remote data sources. “We give advanced programmers the ability to do their own elements, code or scripts,” Chekirka notes.
Moreover, AVstudio is developing an intuitive theme editor that simplifies visual design and that is unlike anything currently on the market. Instead of managing dozens of color variables, users can create a consistent theme in just a few clicks. This feature aims to make professional styling far faster and easier for every skill level.
This balance of simplicity and power makes AVstudio Editor accessible to a wide range of skill levels, suiting everyone from AV technicians to seasoned web developers. The end result is a faster, higher-quality design cycle and clients that are more satisfied.
Introducing App Container: The Offline Deployment Solution
AVstudio is also expanding its ecosystem with App Container, a new mobile application for iOS, Android, Windows and macOS, currently in beta testing. App Container allows developers and end users to run projects in a self-contained, offline environment. This eliminates the need for online-controller hosting, providing a secure and reliable way to deploy and view interfaces on mobile devices.
App Container will include features such as push notifications and the ability to switch between projects, adding another layer of convenience for users. Those interested can download the beta version immediately.
The Future of UI Design and AVstudio Editor
With nearly 900 developers already using the platform, AVstudio Editor has quickly established itself as a leading tool for AV industry professionals. Moreover, AVstudio is itself now a standalone entity, having branched off from AVgator with more than $1 million of capital investment. And with ongoing community feedback, weekly documentation updates and hands-on workshops, the brand’s value proposition is growing even more compelling.
To explore the future of UI development, visit the AVstudio website. You can register for a free account to begin experimenting with AVstudio Editor. You can also subscribe to the newsletter to stay informed about product updates, new features, upcoming workshops and the official launch of App Container.
AVstudio is excited to announce our upcoming live webinar on November 25th at 11:00 AM (EST). This session is designed to give our users a deeper look into what AVstudio Editor can do, while also providing direct access to our team for a live Q&A.
What To Expect
During the webinar, our team will walk through the powerful tools built into AVstudio Editor and demonstrate how they can be used to create fast, flexible, and fully responsive interfaces. You’ll have the opportunity to speak with our developers directly, ask questions, gain clarity on features you’re using, share feedback, and explore ideas for your current or upcoming projects.
This is also a great chance to learn about recent improvements, upcoming updates, and best practices for getting the most out of the platform.
Throughout the session, you’ll gain insights into:
Building dynamic, responsive interfaces using AVstudio Editor
Using Data Sources, Variables, and Connectors in real-world scenarios
Integrations with MQTT, Node-RED, Home Assistant, and other tools
Best practices for ensuring smooth performance across devices
Tips to streamline your design and development workflow
Why You Should Join
As AV and IoT environments continue to evolve, developers need tools that keep pace with modern workflows. AVstudio Editor is built to support this growth, offering a fast, HTML5-driven environment that adapts to projects of any scale.
This webinar will show you why AVstudio Editor is the best platform on the market. If you’re new to AVstudio Editor, this is a great opportunity to learn the basics, ask questions to our team, and provide feedback on how we can better improve our product to fit your needs.
Save Your Spot
Register today to save your spot. You don’t want to miss it. Once registered, we encourage you to let us know which topics you’d most like to discuss so we can tailor the session to your needs.
AVstudio is proud to introduce one of our most powerful updates yet. Version 3.9.12 brings full MQTT connector support, enabling developers and integrators to build interfaces that communicate in real time across devices, control systems, and automation environments.
This update not only expands what AVstudio Editor can connect to, but also the capabilities of projects created in the editor. Data can move fast and seamlessly between your UI and the systems it manages like never before.
Full MQTT Protocol Support
We’ve added complete support for the MQTT protocol, allowing you to:
Connect to multiple hosts and ports
Use secure (SSL/TLS) connections
Authenticate with login and password
Modify the PATH for total configuration control
Whether you’re building local prototypes or deploying enterprise-grade automation, AVstudio gives you everything needed to fine-tune your MQTT setup for stability and flexibility.
Dynamic Data Through MQTT Data sources
With MQTT connectors, your AVstudio data sources can now be dynamically updated with live data. By linking to a specific topic, data inside your interface can be continuously synchronized.
To streamline your development workflow, we’ve also introduced a Mixed DataSource Type. By combining local data with MQTT feedback, you can maintain a solid local copy of the data, enabling you to prototype your interface seamlessly.
Once you switch to production mode, the data will be updated in real time via the MQTT channel. This means no more waiting for data to arrive. You can build, preview, and deploy with uninterrupted speed.
MQTT for Variables and Parameters
We’ve expanded the functionality of variable and parameter updates through MQTT Feedback. By assigning the correct connector and topic, any variable or parameter in your project can receive live updates. This enables precise control of the interface and its elements.
Connect to Node-RED, Home Assistant, and More
AVstudio now connects to Node-RED, Home Assistant, and other systems over the MQTT Protocol. It only takes two clicks to establish a connection, making it easier than ever to exchange data between your interface and an automation or control system. This highly efficient solution enables dynamic management of data flows and end devices.
Bug Fixes and Performance Enhancements
In addition to MQTT support, this update includes several refinements:
Stabilized Mixed DataSources: Fixed issues where local fallbacks for a repair DataSource were not correctly retrieved.
Improved Performance: Element selection, positioning, and property adjustments make AVstudio Editor faster, smoother, and more efficient.
AVstudio Editor Continues To Evolve
Update 3.9.12 reinforces AVstudio Editor’s powerful features through open, flexible connectivity. With MQTT, Node-RED, and real-time data feedback, your projects can be created faster, smarter, and more precise than ever.
Click the link below for a short video showcasing how this update enhances the development process: 👇
In the evolving world of AV and IoT technology, developers need tools that not only look professional but also streamline project completion and enhance efficiency. As the demand grows for solutions that are faster, smoother, and more dynamic, integrators are moving away from traditional interface builders and embracing AVstudio Editor, the industry’s leading HTML5 GUI and IoT platform.
Here are five reasons why AVstudio Editor is, without a doubt, the #1 interface development tool on the market.
Built for Now and the Future
Many tools still used by developers today are severely outdated, inflexible, slow to process, and locked into fixed-resolution layouts. AVstudio Editor, on the other hand, is built entirely with HTML5, enabling a new standard of speed, adaptability, and design freedom.
It integrates seamlessly with modern AV, IoT, and automation technologies, delivering responsive scaling, dynamic performance, and visually stunning interfaces without the need for extra software or plug-ins.
AVstudio Editor is built to grow with the industry. Its robust HTML5 infrastructure ensures that, as technology evolves, AVstudio evolves with it. The platform is AI-ready and designed for continuous expansion, allowing it to adapt to innovations and remain at the forefront of modern interface development. Its progressive and adaptive design ensures every project looks and performs perfectly across any screen or device.
A Unified Workflow with Faster Development
A frequent struggle for interface developers is the need to use multiple programs, tools, and platforms to complete a single project. AVstudio Editor eliminates this problem by enabling a unified, all-in-one workflow that remains fully compatible with other tools.Gone are the days of switching between separate applications for layout, scripting, and testing. AVstudio Editor combines visual design, live previews, and integration tools into a single powerful environment.
Developers can design visually with a WYSIWYG editor, but also create custom HTML5 blocks, JavaScript functions, and CSS styling when more control is needed. Designers can bind components directly to data sources, logic, or API endpoints, preview changes instantly, and deploy to devices with ease.
All of these features are built to dramatically reduce project turnaround time. When you save time, you save money. AVstudio Editor delivers the fastest, cleanest, and most efficient HTML5 GUI design experience possible.
Node-RED Integration and API Support
Modern AV and IoT systems rely on cross-platform connectivity, real-time communication, and dynamic data exchange. Every component, from lighting controls to security systems, must work together seamlessly for an interface to feel functional, high-end, and professional. In most interface builders, achieving this level of integration requires manual coding or forces developers to work within limited toolsets.
AVstudio Editor eliminates these barriers with Node-RED integration, full API support, and native MQTT connectivity. These capabilities allow developers and integrators to connect their graphical interfaces directly to live system data, automation logic, and cloud services without writing extensive code.
In just a few clicks, you can connect to Node-RED and start managing GUDE, NETIO, or other network-based devices, or even control IoT sensors and relays directly. Data sources drive the dynamic behavior of every interface, updating visuals and logic in real time. This compatibility saves developers countless hours and provides a more efficient, flexible alternative to manual programming. Through visual logic and low-code connectivity, AVstudio empowers users to focus on design and innovation rather than troubleshooting.
Adaptability and Compatibility
Possibly the most valuable aspect of AVstudio Editor, and what truly sets it apart from other interface builders, is its unmatched flexibility. This begins with its compatibility across numerous control systems, IoT devices, and programming tools, giving developers complete freedom in how they design and deploy projects.
AVstudio Editor removes the limitations that often slow down traditional workflows. Its flexibility is also showcased in its adaptability across devices, with a powerful HTML5 engine featuring progressive and adaptive design that automatically scales interfaces for any screen, from touch panels to tablets, laptops, and large-format displays.
AVstudio Editor stands as the #1 interface builder for developers who value versatility and creative freedom. Simply put, design once and deploy across multiple environments, systems, and devices of all kinds.
Speed, Precision, and Scalability
AVstudio Editor features a robust framework that enables developers to move from concept to deployment faster than ever before. With reusable templates, customizable components, and adaptive layouts, projects can be built efficiently while minimizing repetitive work.
Every element in AVstudio is designed for precision. Fine-tuning details is effortless with live previews, snapping grids, and advanced CSS styling, allowing for pixel-perfect accuracy and seamless visual alignment across every device and display.
AVstudio Editor delivers the scalability modern projects demand. There’s no need to start from scratch; existing interfaces can easily evolve and expand as requirements grow. Whether you’re designing a small interface for a single room or a full-scale commercial control system, AVstudio’s HTML5 foundation ensures smooth performance, responsive design, and limitless future development potential.
Smarter Interfaces Start with AVstudio
In an industry evolving every day, experience AVstudio Editor, the future of interface design and the #1 tool for developers looking to maximize speed, efficiency, adaptability, and flexibility. Built on a powerful HTML5 foundation, it gives developers everything they need to design, integrate, and deploy dynamic interfaces with ease.
Start creating smarter, more connected experiences today with AVstudio Editor.
Add custom URL parameters to your projects to control app behavior, configuration, and content within App Container’s dedicated environment. Ideal for deep linking, dynamic environments, and passing runtime data directly into your web applications.
Run web applications that don’t meet standard browser restrictions, such as strict CORS or certificate policies. Developers maintain complete control and maximum flexibility in secure, internal environments.
Store and load projects directly from the device’s local storage. This eliminates the need for web hosting and ensures full functionality even without an internet connection.
Host and manage multiple web projects within a single container environment. Each project can have its own configuration, icon, and access rules for streamlined organization.
Manage, deploy, and update projects remotely through a secure control interface. Push configurations or content updates to any connected device instantly.
