> ## Documentation Index
> Fetch the complete documentation index at: https://opencanvas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Using the Block Palette in DesignJS
> How to use DesignJS's 25-block palette — Layout, Typography, Form, and Media categories — to insert real HTML/CSS into your canvas.
The block palette gives you a library of 25 pre-built HTML snippets that you can drop onto the canvas with a single click. Every block is plain HTML with Tailwind CSS v4 utility classes — what lands on the canvas is the actual markup that an AI agent sees and can modify via MCP tools. There is no proprietary format or translation step.
## Opening the block palette
The block palette lives in the **Blocks** tab of the left panel. Click the tab label to switch to it. Blocks are organized in a responsive grid; each tile shows an icon and a short label. Hovering a tile highlights it with an accent border.
The left panel defaults to the **Layers** tab. Switch to **Blocks** whenever you want to insert new elements from the catalogue.
## Inserting a block
**Click to insert** — click any block tile and it is added to the active artboard's canvas immediately. The block appears at the bottom of the current component tree.
**Drag to canvas** — press and hold on a block tile, then drag it over the canvas iframe. GrapesJS's drag-and-drop system tracks the pointer position and inserts the block at the drop target when you release. This lets you place a block directly inside a container element rather than appending it to the root.
To insert a block inside a specific container, drag it from the palette and drop it onto the container element in the canvas. The blue drop-target highlight shows where the component will land.
## Block categories
### Layout
Structural containers for building page sections and grid systems.
| Block | HTML tag | Default Tailwind classes |
| ----------- | ----------- | ------------------------- |
| Div | `