Bricks overview

Bricks are Likeable's building blocks — typed, production-grade components the agent composes into your project. Everything on the canvas is a brick, from a heading to a live chart to a whole multi-page site shell.

Why bricks

Because results are composed from a known library (never raw markup), what you build is structured (an editable tree), consistent (shared styling + tokens), and reliable (each brick is validated). You can edit any brick by hand, restyle it, bind it to data, and export it as real code.

Placing & editing

Ask the agent to add something ("add a pricing table"), or insert from the Insert menu. Select a brick to edit it in the Properties panel, drag it in the Layers panel to move it, and undo anything. See Editing on the canvas.

Binding to data

Many bricks accept a bindKey — charts, stat cards, tables, and text read their live value from a keyed data element. Set up a dataset and bind bricks to it for a live view. See Connecting data.

Styling

Style a brick directly in the Properties panel, or set one decision on a container and let it cascade to everything inside (see the Styling guides).

The categories

• Layout & content — containers, text, media, structure.
• Forms & inputs — inputs, selects, buttons, forms.
• Charts & visualizations — every chart and table.
• Code, diagrams & maps — editors, diagrams, maps, markdown.
• 3D, games & motion — scenes, games, globes, animation.
• Real-time & collaboration — live, collaborative, and flag-gated bricks.
• Cookbooks — save your own reusable bricks.