The same visual editor is embedded in CTOR as the Editor tab. There, saving compiles your edits into the project’s bricks-ctor source and commits them to Git, whereas here saving updates the cloud application config directly.
How BRICKS applications work
BRICKS applications run on a JSON configuration that defines the UI, data, logic, and interactions. The BRICKS Foundation runtime reads this configuration and renders the application on screen. There are two ways to create this configuration:
Both produce the same JSON configuration. You can start with the Config Editor and later Generate Project to switch to a code-first workflow — or deploy from code and continue editing in the Config Editor.
Application structure
A BRICKS application is a tree of composable entities:Subspaces
A subspace is a self-contained unit of functionality — think of it as a screen or feature module. Each subspace has its own bricks, generators, data, canvases, and animations. The application has a root subspace as its entry point. Use subspaces to organize your application into logical sections. You can nest subspaces by referencing one subspace inside another’s canvas.Canvases
A canvas defines a view layout. It positions items (bricks or subspace references) on a grid using frame coordinates (x, y, width, height). Canvases support:- Lifecycle events —
firstEnter,enter, andexitevents that trigger actions when the canvas becomes active or inactive - Canvas switching — Navigate between canvases for multi-screen flows
- Item positioning — Place bricks and subspace references at specific coordinates and sizes
Bricks
Bricks are the visual building blocks — UI components that display content and handle interaction.
Bricks can be styled, animated, respond to press events, and have their properties dynamically bound to data.
Generators
Generators handle all external I/O and data processing. They connect your app to APIs, databases, hardware, AI models, and more. Each generator has outlets (output channels) that feed data into data nodes, and events that trigger actions.Data
Data nodes store application state. They are typed (string, number, boolean, array, object) and can be linked to brick or generator properties for reactive updates. When a generator outlet emits a value, the linked data updates, and any bricks bound to that data re-render automatically.Data calculations
Data calculations are JavaScript functions that transform data. They run in a sandboxed environment with 25+ built-in libraries (lodash, moment, crypto, and more). Use them for formatting, parsing, or computing derived values.Animations
Define visual effects and transitions for bricks. Animations can be triggered by events and applied to properties like position, opacity, scale, and rotation.Actions and events
Actions are commands triggered by events. Bricks and generators emit events (press, response, error, timer tick), and you wire them to actions like:- Changing a canvas
- Updating data
- Triggering a generator
- Running an animation
- Navigating between subspaces
Quick edits
Use Short Edit to apply quick property changes without creating a full release. Short Edit lets you modify individual brick or generator properties by reference, which is useful for rapid iteration and live adjustments on production devices. You can also use the BRICKS CLI to apply quick edits programmatically:Validate configuration
The Config Editor validates your configuration against the BRICKS schema as you edit. You can also validate a configuration file from the CLI:Simulator
The Config Editor toolbar has a Simulator pill (formerly Web Preview) that runs your application in the browser — no device needed. It compiles the current config and renders it in an embedded panel. Use the resize controls to split the panel horizontally or vertically. The Simulator is not available while editing an Automation or a Data Calculation. By default, the Simulator substitutes lightweight fallbacks for hardware and AI models — camera, maps, thermal printer, and on-device LLM/STT/TTS all run as local stand-ins. Open Simulator Settings from its menu to use a real implementation instead. To capture a test, use Record Events as Automations. Your interactions are recorded and written into the config as an Auto Generated test.Save and release
1
Save your changes
Click Save in the Config Editor to persist your changes. This updates the application’s working configuration and automatically deploys the changes to bound devices.
2
Release a version (optional)
Go to the application detail page and create a release to snapshot the current configuration as a versioned release for deployment to other devices.
Saving in the Config Editor automatically deploys changes to bound devices. Create a release when you want to snapshot a version for deployment to other devices.
Core reference
For detailed property documentation on every brick, generator, data type, and configuration option, see the core reference.Core reference
Full documentation for all BRICKS platform entities and properties.