Block Types

Content is built with blocks. Each block has a type, a value, and optional configuration.

Available blocks

Type	Label	Description
`paragraph`	Paragraph	Plain text paragraph
`heading`	Heading	H1–H6 with level option
`richtext`	Rich Text	WYSIWYG editor — bold, italic, links, lists, headings, blockquotes
`quote`	Quote	Blockquote with optional citation
`image`	Image	Single image with caption and size options
`gallery`	Gallery	Multi-image grid with column options
`video`	Video	YouTube, Vimeo, or direct video URL
`button`	Button	CTA with link, style, and target options
`code`	Code Block	Code with language option
`html`	Custom HTML	Raw HTML content
`embed`	Embed	External content embed via URL
`spacer`	Spacer	Vertical spacing (sm/md/lg/xl)
`divider`	Divider	Horizontal rule

Block structure

{
  "id": "block-123",       // Auto-generated unique ID
  "type": "richtext",      // Block type
  "value": "<p>...</p>", // Main content (HTML for richtext, text for others)
  "options": {},           // Type-specific options
  "mediaId": "01ABC...",   // Optional media reference
  "mediaIds": []           // Optional multi-media references
}

Rendering blocks

Frontends receive blocks as JSON arrays via the API. Each starter template includes a BlockRenderer component that maps block types to React/Astro components. Extend it to add custom block types.

Rich text output

The richtext block stores clean HTML produced by the Tiptap editor. It includes:

Paragraphs, headings (H1–H3)
Bold, italic, strikethrough, inline code
Bullet and numbered lists
Blockquotes
Links (with rel="noopener noreferrer")
Horizontal rules

Render it with dangerouslySetInnerHTML (React) or set:html (Astro). The HTML is sanitized on the server before storage.