1Start with a blank canvas
Open the builder. Every project starts as an empty canvas.
2Add a template
Click Templates on the left edge to open the library. Search or browse, then click a template to add it to the canvas.
3Add an image
Click Media, then drop an image file onto the new window, or click the window to choose a file.
4Edit a widget
Select a widget to edit it. The Properties panel sets its name, position, size and code.
5Connect data
Open the Data Connections tab and click + Add API. Enter a URL, click + Add Variable, and enter the path to a value in the response. Any widget that reads that variable name updates automatically.
6Export
Open File, then Export, then Complete HTML. You get one self-contained file. Save to File keeps a project file you can load again later.
See exactly how one gets built, or explore a full live project — both open right here.
What you're actually looking at
Every project on this page is the real, unmodified output of this builder — not a
screenshot standing in for one, and not a hosted service rendering it for you. The
"Process Control HMI" demo above is a single exported .html file sitting in
this site's own static files, loaded into the card's iframe exactly the way it would load
if you downloaded it and opened it on your own machine. There's no server behind it doing
any work — the pump states, tank levels, and alarms you see moving are a small piece of
page-level JavaScript updating globalVariables on a timer, which is the same
mechanism a real API-driven project uses, just standing in for one here.
That matters for evaluating a tool like this one: a marketing render can show you
anything, but an export you can open the JSON of can't. Click a card's folder icon and
switch to its .json file to see precisely what the builder itself produces —
the same builderPages / dataConnections shape covered in the
JSON Project Schema guide, populated with a real
project's worth of windows and variables instead of a trimmed-down sample.
It's also why this page stays light despite showing a fairly large, multi-page HMI
project: nothing on this page re-renders the project from scratch — the iframe just loads
the one static file, lazily, the moment its card scrolls into view or gets opened. Closing
the preview doesn't tear anything down either; the same instant display
toggling the exported project itself uses between its own Process/Alarms/Trends pages is
what makes switching views here feel immediate rather than like a page is reloading.