Editor Blocks
The TinyEmails editor uses a drag-and-drop block system. Each block is a building unit you arrange visually to construct your email.
Content blocks
| Block | Description | Key properties |
|---|---|---|
| Heading | H1-H6 heading text | Font size, weight, color, alignment |
| Text | Paragraph text | Font family, size, color, line height |
| Rich Text (RTE) | Full rich-text editor (bold, italic, links, lists) | Powered by Lexical editor; supports formatting toolbar |
| Button | Call-to-action button | Link URL, button text, background color, border radius, padding |
| Image | Insert an image | Source URL, alt text, width, height, alignment |
| Avatar | Circular profile image | Source URL, size |
| Divider | Horizontal line separator | Color, thickness, width, margin |
| Spacer | Vertical space between blocks | Height in pixels |
| Raw HTML | Custom HTML code | Direct HTML editing, for advanced layouts or embedded content |
Layout blocks
| Block | Description | Use case |
|---|---|---|
| Columns (2-col) | Two-column side-by-side layout | Feature comparisons, image + text |
| Columns (3-col) | Three-column layout | Product grids, feature highlights |
| Container | Generic wrapper for grouping blocks | Background colors, padding, borders around a group of blocks |
Adding blocks
- Open the Blocks panel (left sidebar)
- Drag a block onto the canvas
- Drop it where you want it: between existing blocks or inside a column
- Click the block to select it and edit its properties
Editing blocks
Click any block to select it. The right sidebar shows:
| Panel | What you edit |
|---|---|
| Styles | Colors, fonts, spacing, borders, background, shadows |
| Inspect | Raw property values, useful for precise control |
| Data | Connect dynamic data fields to the block (for template variables) |
Block hierarchy
The Document Tree (left sidebar, toggle) shows the nesting structure of all blocks. Use it to:
- Navigate complex layouts
- Select blocks that are hard to click on the canvas
- Reorder blocks by dragging in the tree
- Delete blocks
Common patterns
Hero section
Container (dark background)
→ Heading (white text, large)
→ Text (white text, subtitle)
→ Button (bright color, CTA)
Two-column feature
Columns (2-col)
→ Column 1: Image
→ Column 2: Heading + Text + Button
Footer
Container (gray background)
→ Text (small, centered — company name, address)
→ Text (small, centered — unsubscribe link)
Tip
Use Containers to create visual sections with different background colors. Nest content blocks inside containers to build structured layouts.
Note
The Raw HTML block lets you insert any HTML; use it for custom layouts, embedded content, or dynamic template tags that your email provider supports (like merge tags).