Blocks
Add ready-made sections and elements from the block picker, drag them onto the canvas, keep favorites, insert page templates and save your own blocks.
Blocks are ready-made sections and elements, such as a hero, a pricing table or a footer. Add one and it becomes real code in your project that you can edit like anything else.
What you can do
- Browse blocks by category and search them by name.
- Preview a block at desktop and mobile width before you add it.
- Add a block at an exact spot, or drag it onto the canvas.
- Mark blocks as favorites and find your recent ones.
- Insert a whole page template made of several sections.
- Save any element as your own block and reuse it.
Add a block
Open the picker
In the Layers panel, hover the gap between two rows, or an empty container, and choose +. The Add block picker opens. The block will land at that spot.
Find a block
Pick a category, or type in Search blocks. Categories are Marketing, App UI, Ecommerce, Components, Elements, Sections and Industries. Your Favorites and Recently used blocks show first.
Preview it
Hover a block to see a larger preview. Switch between Desktop and Mobile to check both widths.
Insert it
Click the block, or press Enter on it. A notification confirms it, for example Hero added. Choose Undo to take it back, or Personalize with AI to have the AI adapt its text and images to your project.
Drag a block onto the canvas
Drag a block card from the picker and drop it on a frame. Where it lands depends on the element under the pointer:
- Top quarter of a container: before it.
- Bottom quarter: after it.
- Middle: inside it, at the end.
A drop line shows the spot before you release.
Favorites
Hover a block and choose Add to favorites. Favorites show first in the picker. Choose Remove from favorites to take a block out.
Page templates
Open the Templates tab of the picker. Switch between:
- Sections: page layouts made of several blocks, such as Landing page, Pricing page, Store front and Contact page. Choose Insert.
- Sites: full multi-page projects. See Pages and routes.
My Blocks
Save any element to reuse it later:
- Right-click the element on the canvas and choose Save as block.
- Enter a Block name, then choose Save block.
Your saved blocks are in the My Blocks tab. Open the menu of a block to Rename or Delete it. Deleting a saved block does not affect the copies already added to your project.
Blocks become your code
A block is copied into your project as a component, with the images it needs. After that it is yours: edit it on the canvas, in the code panel or with the AI.
Shortcuts
| Action | Shortcut |
|---|---|
| Move between blocks | Arrow keys |
| Insert the focused block | Enter |
| Close the picker | Esc |