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	<div>	p-4 min-h-[60px]
Section	<section>	p-8 min-h-[120px]
Header	<header>	p-4 border-b
Footer	<footer>	p-4 border-t
Nav	<nav>	flex gap-4 p-4
Main	<main>	p-8 min-h-[200px]
Flex row	<div>	flex flex-row gap-4 p-4
Flex column	<div>	flex flex-col gap-4 p-4

Use the Flex row and Flex column blocks as the foundation of most layouts — they come pre-configured with gap-4 so child elements space themselves automatically.

Typography

All six heading levels plus inline and block text elements.

Block	HTML tag	Default Tailwind classes
H1	<h1>	text-4xl font-bold
H2	<h2>	text-3xl font-semibold
H3	<h3>	text-2xl font-semibold
H4	<h4>	text-xl font-medium
H5	<h5>	text-lg font-medium
H6	<h6>	text-base font-medium
Paragraph	<p>	text-base leading-relaxed
Span	<span>	(none)
Link	<a>	text-blue-600 underline

Form

Interactive form elements for building input interfaces.

Block	HTML tag	Default Tailwind classes
Form	<form>	flex flex-col gap-4 p-4
Input	<input type="text">	px-3 py-2 border rounded-md
Textarea	<textarea>	px-3 py-2 border rounded-md
Select	<select>	px-3 py-2 border rounded-md
Button	<button>	px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700
Label	<label>	text-sm font-medium

Media

Embeddable media elements.

Block	HTML tag	Default Tailwind classes
Image	<img>	max-w-full h-auto
Video	<video controls>	max-w-full h-auto

Tailwind v4 in the canvas

The canvas iframe loads Tailwind CSS v4 from CDN. This means any Tailwind utility class you apply — whether by selecting a block, editing a class in the Traits panel, or having an AI agent call add_components with Tailwind markup — is rendered live in the canvas without a build step.

Tailwind markup via add_components

<div class="flex flex-col gap-6 p-8 bg-gray-50 rounded-xl">
  <h2 class="text-2xl font-semibold text-gray-900">Card title</h2>
  <p class="text-base leading-relaxed text-gray-600">Card body text.</p>
  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 w-fit">
    Action
  </button>
</div>

The snippet above, passed to the add_components MCP tool, renders exactly as you would expect from a Tailwind v4 stylesheet — no configuration required.

Editing blocks after insertion

Once a block is on the canvas, select it by clicking it in the canvas or the Layers tree. Use the Styles tab in the right panel to modify CSS properties (dimensions, spacing, colors, flexbox settings), and the Traits tab to edit HTML attributes (src, alt, href, placeholder, etc.).

Default Tailwind classes on inserted blocks are a starting point. You can override them via the Styles panel or by asking your AI agent to call update_styles with the component ID.