Blocks

The Blocks tab (the grid icon in the left sidebar) gives you a library of pre-built, full-section blocks — heros, CTAs, testimonials, galleries, footers, and more. Each block is harvested from a real template and automatically adapts to your site’s active theme on insert.

This is different from the Components tab, which contains individual primitive elements (Heading, Image, Navbar, etc.).

Browse blocks

Open the Blocks tab to see all available blocks. You can:

• Search by keyword to narrow results.
• Switch light/dark thumbnails — use the light/dark switch beside search to preview block thumbnails in the same color mode as the canvas.
• Filter by tag — click one or more tag chips (e.g. hero, cta, navigation, content) to show only matching blocks.
• Filter by template — click a template name chip to see only blocks from that source template.

The Blocks switch and the topbar dark/light preview control stay in sync. If you turn on dark preview from either place, the canvas and block thumbnails both show the dark version; switching back returns both to light.

Searching and filtering blocks by tag

Preview a block

Open a block card’s ⋯ menu and choose Preview to see the full block. The preview uses the same light/dark mode as the Blocks panel and canvas, so you can check the block in the color mode you are currently editing before inserting it.

Opening the full preview for a block

Insert a block

There are two ways to add a block to your page:

Click the card — the block is added after the section you have selected, or at the end of the page if nothing is selected. With a column selected, it goes inside the column instead. Swebsy then selects it and scrolls to it.

Drag onto the canvas — drag a block card from the panel directly onto the canvas and drop it at the position you want. A placement indicator shows where the block will land.

Insert from the preview — in the preview, click Insert to add the block the same way a click does.

1. Open the Blocks tab.
2. Find the block you want using search or tag filters.

3. Click the card to add it after the selected section (or at the end of the page), or drag it onto the canvas to place it at a specific position.

Dragging a block from the panel onto the canvas

Expected result

The block is inserted on the canvas. Its styles and fonts are merged into your site’s theme automatically.

After inserting

Once a block is on the canvas it behaves like any other canvas content — you can select individual components inside it, edit text inline, swap images, change colours in the Design panel, and reorder or delete via the Layers tab.

Common issues

Block catalog is empty — the catalog is bundled with the app. If you see no blocks, try refreshing the page. If the problem persists, check your network connection and reload.

Block looks unstyled after insert — the block adapts to your site’s theme. If it still looks wrong, check that your Theme tokens are configured correctly.