Altia BluePrint

Declarative UI for embedded HMIs — authored in VS Code, running on real hardware as you type.

Altia BluePrint is a declarative UI language for embedded graphical interfaces. Rather than describing how an interface should be built step by step, you define what it is: its structure, behavior, data bindings, animations and states. Altia handles the rest.

The Altia BluePrint extension for VS Code gives .abp files full language support — syntax highlighting, live diagnostics, hovers and in-editor component documentation. A live viewer runs your design on your computer while you edit it. Change data, evaluate expressions, add objects and alter geometry with instant feedback in the viewer.

Contact Altia to discuss how to run the live viewer on any embedded platform with any operating system.

The language itself, with its full reference and example designs, is at altia.github.io/BluePrint.

Why BluePrint

Declarative by design. Define components, layouts, states and bindings; express animations and transitions naturally; react to data changes automatically. Build reusable UI patterns instead of framework plumbing.

Built for AI-assisted development. BluePrint's structured, readable syntax is easy for large language models to generate, modify and analyze — and the extension writes the full language reference into your project, so your coding agent works from the real specification instead of guessing. Generate components, create animations, refactor interfaces and document designs in natural language.

See changes instantly. Live visualization during development, rapid iteration and hardware-targeted validation as part of the same workflow — not a separate step at the end.

Embedded from the start. BluePrint is part of the Altia ecosystem: production-focused architecture, optimized embedded execution and a deterministic path to target hardware through Altia DeepScreen code generation. The same workflow trusted by global automotive and embedded product manufacturers — automotive cockpits and clusters, industrial operator interfaces, medical devices and consumer smart devices.

Getting started

1. Install Altia BluePrint from the Extensions view, or from the Visual Studio Marketplace. VS Code installs the package for your platform: Windows x64, or macOS on Apple silicon or Intel.
2. Run Altia BluePrint: Create Project... from the command palette (Ctrl+Shift+P, ⇧⌘P on macOS), or open a folder that already contains a .abp design. A new project comes with a manifest, a starter main.abp, folders for modules and assets and a run configuration.
3. Open main.abp. It becomes the active design automatically; to work on a different one, run Altia BluePrint: Choose Active Design... or click the design name in the status bar.
4. Press F5 to run it.

Everything the extension needs runs locally and starts on its own — there is nothing to configure.

Working in VS Code

Language support

Syntax highlighting, hovers, go-to-definition on imports and diagnostics as you type: unknown components and properties, type and range errors, broken imports and shader compile errors reported against the line that caused them. Fenced ```abp blocks are highlighted in Markdown too, so design notes read the way the editor does.

Run your design

Press F5 or use the play button in the Altia BluePrint activity-bar view. The live viewer opens your design, rendered by the same engine that will run it on the target. Edits reach it as you make them — no rebuild, no restart. Stop, restart and reopen the viewer from the status bar, the design view or the command palette. log actions print to the Debug Console.

The status bar carries the connection state and active design, plus a live indicator while the design is running — amber when it is running on another machine, with a warning when the viewer has been closed.

Change data while it runs

Use Open HMI Data Editor to open an editor for your design showing every Data property in it, nested containers as collapsible groups. Type in a field and the live viewer reacts on each keystroke, so you can sweep a value and watch the screen follow. Numbers, strings and booleans are fields and checkboxes. Arrays are edited as JSON. Values you are not editing update live with the viewer, every frame.

Evaluate expressions

Select an expression and press Ctrl+Shift+E: the result appears at the end of the line, errors in red, evaluated in the scope of the declaration it sits in. It works whether or not the viewer is running — stopped, you get the authored values.

Open Expression Console gives you an hmi> prompt in the Terminal panel for trying expressions one line at a time, with history and full line editing, colored with the editor's own token colors. While the viewer runs, the Debug Console and Watch pane evaluate expressions too and hovering an identifier shows its live value.

Projects and modules

A design is its entry file plus everything reachable through its imports. The Design view shows that import graph as a tree, decorated with any problems in each module and marking modules shared by more than one parent. The active design is recorded in the project manifest, so it is checked in and the same for everyone who opens the folder. Any module can be run on its own, in its own viewer alongside the main design.

Geometry editor

Every points, corners and anchor declaration's name is a link. Click it and a Geometry editor opens beside the text, bound to that one property, drawing the shape the way the engine draws it. Drag the vertices to change the shape which resolves to an ordinary text edit on the points in your file. Comments and layout are left alone. Undo works on both the canvas and the text. The live viewer follows along.

Component documentation, in the editor

The Documentation view shows the reference page for whatever you are working on: what it is, where it sits in the hierarchy, a property table with inherited properties labelled with where they come from, the events and actions it accepts, its nesting rules and the values of every enumeration its properties range over — with syntax-highlighted examples.

Hover a component and follow the Documentation link, run Show Documentation on the cursor or turn on Follow Cursor to have it track you through the file. It ships with the extension, so it works offline.

Set up AI agents and tools

Setup AI and Tools... writes everything the extension offers people and agents working outside the editor into your project:

• AGENTS.md — the instructions for coding agents, in a marked block. An existing AGENTS.md keeps everything else it says.
• .altia/abp-reference/ — one page per component kind and enumeration, plus an index and a language digest, so agents author BluePrint from the real specification.
• .altia/client/ — the C++ and JavaScript client API, with a worked example of each.
• .altia/tools/ — a copy of the server, which checks a design on its own (.altia/tools/blueprint/blueprint --check main.abp) and captures one (--play main.abp --capture shot.png), and blueprint-lsp.js, the language server from the command line (diagnostics, values, captures as JSON).

.altia/ is added to .gitignore: the files are per machine and match the extension that wrote them.

The extension offers it when you open a BluePrint project that does not have the files yet, or has them from an older version, and when you create a project. It always asks first, and Don't Ask for This Folder stops it asking.

Capture a display

Capture HMI Display... saves one of the design's displays as a PNG. With several displays it asks which one. It works against a server on this machine and against one on a target board.

User guide

Show User Guide opens the illustrated user guide in your browser, from the palette, the book icon in the Design view's title, or the status bar's action menu. It ships with the extension, so it works offline, and on macOS it shows the keys as ⌘ and ⇧ combinations. After you install or update the extension, a welcome tab opens once, with a button to the guide; Show Welcome reopens it.

Externals

Code actions can call out to your own code: ext.name(args) in a code action runs a function from a Node module you provide, served by a host that runs alongside the viewer.

The module. Create externals.js beside your design's entry file, or at the workspace root if there is none there beside the entry -- the location is fixed, there is nothing to configure. Export the functions you want to call as module.exports:

module.exports = {
    formatSpeed(mps) { return `${(mps * 3.6).toFixed(1)} km/h`; },
    async logEvent(name) { /* ... */ }
};

Functions may be sync or async. Arguments and return values travel as numbers, strings, booleans, null and arrays of those (undefined and null both travel as null, which the engine reads as Undefined). Anything else -- an object, a function, NaN, Infinity -- comes back as null, with a warning logged so you notice instead of silently getting the wrong value. A call whose export throws or rejects reads undefined; the cause is logged the same way.

Reloading. Saving externals.js reloads it automatically; module state (anything held in closures) is lost on reload. If a stub's event loop is hung, run Altia BluePrint: Reload External Functions from the command palette to force it.

Timeout. The engine waits one second for a call to answer before it reads undefined and continues.

Commands

All commands are under the Altia BluePrint category in the command palette (Ctrl+Shift+P).

Advanced: running on a target board

Your HMI does not have to render on your development machine. It can run on the board that owns the real display while your project stays here — the board renders, the files never have to be copied to it and editing is exactly the same.

Point altiaBluePrint.serverHost at the board (or save it with Connect To..., which keeps a list of targets you switch between). Connecting to a target turns this window's own server off. To come back, pick This machine at the top of Connect To..., or Use Local Server in the status bar menu. To make a window always use a target, set altiaBluePrint.connectionMode to external.

Three things to know before pointing this at a bench:

• No authentication and no encryption. Anything that can reach the port can read and rewrite your documents. Use it on a trusted network only.
• One editor at a time. A target serves a single session; a second VS Code window will look connected but stay silent.
• The target outlives the editor. Closing VS Code leaves the design running on the board; connecting again picks it back up, and Shut Down Server... releases everything.

Related settings: altiaBluePrint.serverPort (default 7568), altiaBluePrint.connections (saved targets, kept in settings so they can be committed and shared), altiaBluePrint.connectTimeoutMs, and altiaBluePrint.serverLogLevel for how much engine logging reaches the output channel.

A lost connection is not retried: the server ended the session when the connection closed, so the status bar reads disconnected and Reconnect starts a new session when the target is back.

Troubleshooting

• "server not installed" in the status bar — the installed extension is not the one for this platform. Uninstall it, install it again from the Extensions view so VS Code picks this platform's package, and reload the window. If you install from a .vsix, use the one for this platform: win32-x64, darwin-arm64 (Apple silicon) or darwin-x64 (Intel Mac).
• "server not running" or "the server stopped" — the local server ended. Click the status bar and choose Start Server; the Altia BluePrint output channel has the server's last lines.
• "disconnected" in the status bar — click it to reconnect. If you have pointed altiaBluePrint.serverHost at another machine, check that it is reachable.
• Run reports no active design — open a .abp file, or run Choose Active Design....
• A log action prints nothing — its output goes to the Debug Console, and only while the live viewer is running.
• The data editor's fields are disabled — they need a running viewer. Press F5. Expressions still evaluate while stopped, against authored values.
• A shader change has no effect — run Recompile Shaders; stale shaders are also reported as a warning on the file.

Known Issues

The known defects in this release, each with its ticket key and a workaround where there is one, are listed in KNOWN_ISSUES.md, which ships with the extension. Run Show Known Issues to open it. Check it before reporting a problem: a listed issue is already known. Setup AI and Tools... copies it into .altia/abp-reference/, so coding agents check it too.

Requirements

VS Code 1.105 or later, on Windows x64 or macOS (Apple silicon or Intel).

Most frameworks were built for developers. BluePrint was built for developers, designers, AI and embedded systems together — closing the distance between an idea and a shipping embedded product.