Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.bricks.tools/llms.txt

Use this file to discover all available pages before exploring further.

The Config Editor is a visual editor in BRICKS Controller for building and editing your application or module configuration directly in the browser. Open any application or module and click Config Editor to start editing.

​
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:
ApproachToolBest for
VisualConfig Editor in BRICKS ControllerQuick edits, non-developers, visual layout work
Code-firstbricks-ctor (TypeScript SDK)Version control, AI-assisted development, CI/CD pipelines
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: 
Application
└── Subspace (feature/screen container)
    ├── Canvas (view/scene layout)
    │   └── Items (positioned Bricks or Subspace references)
    ├── Brick (UI component)
    ├── Generator (data/IO provider)
    ├── Data (state storage)
    ├── Animation (visual effects)
    └── Data Calculation (data transforms)
The Config Editor provides a structured interface for managing each of these.

​
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, and exit events 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.
BrickPurpose
TextDisplay text with styling
TextInputEditable text field
RichTextRich text with HTML content, multiple fonts, and inline images
ImageDisplay images
VideoVideo playback
VideoStreamingRTSP / RTMP live video streams
WebrtcStreamWebRTC video and audio stream
GenerativeMediaAI-generated images and videos
WebViewEmbedded web content
Lottie.json and .dotlottie animations with speed, loop, and frame range control
Rive.riv animations with state machine inputs, text runs, and artboard selection
SvgSVG vector graphics
ChartData visualizations
IconFontAwesome 6 Pro icons
QrCodeQR code display
CameraLive camera feed
MapsMap display
RectContainer with background, border, shadow
ItemsData-driven list or grid from an array
SlideshowAuto-advancing slides with transition effects
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.
CategoryExamples
AI & LLMAssistant, LLM (GGML/OpenAI/Anthropic/ONNX), Vector Store, Reranker
SpeechText-to-Speech, Speech-to-Text, VAD, Realtime Transcription
NetworkHTTP, WebSocket, GraphQL, MQTT, TCP, UDP, HTTP Server
StorageFile, SQLite, Data Bank, Media Flow
HardwareBluetooth LE, Serial Port, Camera, Keyboard
Control flowTick (timer), Alarm Clock, Step, Iterator, Watchdog
OtherWebRTC, Web Crawler, MCP, Thermal Printer

​
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: 
# List available property references
bricks app short-refs <app-id>

# Apply a quick edit
bricks app short-edit <app-id> -l '<json>'

​
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: 
bricks app check-config config.json

​
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.