> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibedoc-ai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Block Editor

> Build complex documents with our rich, modular block system

## Overview

VibeDoc's block editor lets you build documents from modular components. Each block represents a specific type of content: headings, text, lists, tables, and more. Blocks can be added, edited, reordered, and deleted independently.

<img src="https://mintcdn.com/vibedoc/nyIpYqCdQSz9ZFvN/images/block-editor-demo.png?fit=max&auto=format&n=nyIpYqCdQSz9ZFvN&q=85&s=dedd84b8c46507ff579cd8500d4ba2db" alt="Block Editor Interface" className="rounded-lg border" data-path="images/block-editor-demo.png" />

## Available Block Types

<CardGroup cols={2}>
  <Card title="Heading" icon="heading">
    Six levels (H1-H6) for document structure
  </Card>

  <Card title="Text" icon="paragraph">
    Rich text paragraphs with formatting
  </Card>

  <Card title="List" icon="list">
    Bullet or numbered lists
  </Card>

  <Card title="Table" icon="table">
    Data tables with headers
  </Card>

  <Card title="Callout" icon="message-exclamation">
    Info, warning, success, error boxes
  </Card>

  <Card title="Signature" icon="signature">
    Digital signature blocks
  </Card>

  <Card title="Divider" icon="minus">
    Section separators
  </Card>

  <Card title="Date" icon="calendar">
    Formatted date displays
  </Card>

  <Card title="Checkbox" icon="square-check">
    Task lists and checkboxes
  </Card>

  <Card title="Image" icon="image">
    Embedded images (coming soon)
  </Card>
</CardGroup>

## Block Types in Detail

### Heading Block

Create document structure with six heading levels:

```markdown theme={null}
# H1 - Document Title
## H2 - Major Section
### H3 - Subsection
#### H4 - Minor Section
##### H5 - Detail
###### H6 - Fine Print
```

**Features:**

* Configurable font sizes
* Custom line heights
* Auto-generated IDs for linking
* Responsive sizing

**Template Options:**

* Font family
* Font weight
* Color
* Spacing above/below

### Text Block

Standard paragraph content with inline formatting:

<Tabs>
  <Tab title="Features">
    * **Bold** text
    * *Italic* text
    * Multi-paragraph support
    * Automatic spacing
  </Tab>

  <Tab title="Use Cases">
    * Body content
    * Descriptions
    * Explanations
    * Introductions
  </Tab>

  <Tab title="Best Practices">
    * Keep paragraphs focused
    * Use headings to break up text
    * Aim for 3-5 sentences per block
  </Tab>
</Tabs>

### List Block

Create ordered or unordered lists:

**Bullet Lists:**

```markdown theme={null}
• Item one
• Item two
• Item three
```

**Numbered Lists:**

```markdown theme={null}
1. First step
2. Second step
3. Third step
```

<Tip>
  Use numbered lists for sequential information (steps, priorities) and bullet lists for non-ordered items (features, benefits).
</Tip>

### Table Block

Structured data in rows and columns:

| Feature   | Description   | Status |
| --------- | ------------- | ------ |
| Headers   | Column labels | ✅      |
| Rows      | Data entries  | ✅      |
| Sorting   | Click to sort | 🔜     |
| Filtering | Search data   | 🔜     |

**Current Capabilities:**

* Custom header labels
* Any number of rows/columns
* Cell-level editing
* Responsive layout

**Coming Soon:**

* Cell formatting (bold, color)
* Merged cells
* Formulas and calculations
* CSV import/export

### Callout Block

Highlight important information with styled boxes:

<Info>
  **Info Callout** - General information or helpful tips
</Info>

<Warning>
  **Warning Callout** - Caution or attention needed
</Warning>

<Check>
  **Success Callout** - Positive outcomes or confirmations
</Check>

<Error>
  **Error Callout** - Critical information or errors
</Error>

**Customization:**

* Title (optional)
* Body text
* Icon
* Color scheme

### Signature Block

Professional signature blocks for agreements:

```plaintext theme={null}
━━━━━━━━━━━━━━━━━━
Sarah Johnson
Project Manager
TechCorp Inc.
Signed: Jan 15, 2025
━━━━━━━━━━━━━━━━━━
```

**Fields:**

* Name
* Role/Title
* Company
* Date
* Signature status

<Note>
  Digital signatures are visual only. For legally binding signatures, integrate with DocuSign or Adobe Sign.
</Note>

### Divider Block

Separate sections with visual breaks:

**Styles:**

* Simple line (`─────`)
* Double line (`═════`)
* Dotted (`· · · · ·`)
* Thick (`━━━━━`)

### Date Block

Display formatted dates:

**Formats:**

* `January 15, 2025` (Long)
* `Jan 15, 2025` (Medium)
* `01/15/2025` (Short)
* `2025-01-15` (ISO)

**Use Cases:**

* Document creation dates
* Deadlines
* Event dates
* Expiration dates

### Checkbox Block

Create interactive task lists:

* [ ] Incomplete task
* [x] Completed task
* [ ] Another task

**Features:**

* Toggle checked state
* Nested checkboxes (coming soon)
* Progress tracking (coming soon)

## Editing Blocks

### Edit Mode

Click any block to enter edit mode:

<Steps>
  <Step title="Click Block">
    Click anywhere in the block to activate editing
  </Step>

  <Step title="Modify Content">
    Type, delete, or paste content directly
  </Step>

  <Step title="Apply Formatting">
    Use keyboard shortcuts or toolbar for formatting
  </Step>

  <Step title="Click Outside">
    Click outside or press `Esc` to save changes
  </Step>
</Steps>

### Keyboard Shortcuts

| Action        | Shortcut               | Description      |
| ------------- | ---------------------- | ---------------- |
| **Bold**      | `Cmd/Ctrl + B`         | Make text bold   |
| **Italic**    | `Cmd/Ctrl + I`         | Make text italic |
| **Save**      | `Cmd/Ctrl + S`         | Save document    |
| **Undo**      | `Cmd/Ctrl + Z`         | Undo last change |
| **Redo**      | `Cmd/Ctrl + Shift + Z` | Redo change      |
| **Exit Edit** | `Esc`                  | Exit edit mode   |

## Managing Blocks

### Adding Blocks

<Tabs>
  <Tab title="AI Chat">
    Ask the AI to add content:

    ```plaintext theme={null}
    "Add a table showing project milestones"
    ```
  </Tab>

  <Tab title="+ Button">
    Click the **+ Add Block** button and select block type
  </Tab>

  <Tab title="Slash Command">
    Type `/` in edit mode to open block picker (coming soon)
  </Tab>
</Tabs>

### Reordering Blocks

<CardGroup cols={2}>
  <Card title="Drag & Drop" icon="grip-vertical">
    Hover over a block and drag the handle to reorder
  </Card>

  <Card title="Keyboard">
    Use `Cmd/Ctrl + Up/Down` to move blocks (coming soon)
  </Card>
</CardGroup>

### Deleting Blocks

<Warning>
  Deleted blocks cannot be recovered. Consider duplicating important blocks before deletion.
</Warning>

**Methods:**

* Click the **Delete** icon in block toolbar
* Select block and press `Delete` key
* Use AI: "Remove the budget section"

### Duplicating Blocks

Quickly copy blocks:

* Click the **Duplicate** icon in block toolbar
* Use `Cmd/Ctrl + D` (coming soon)
* Drag while holding `Alt` (coming soon)

## Block Styling

### Global Template Styles

Apply consistent styling across all blocks:

```yaml theme={null}
Template Configuration:
  - Font Family: Geist Sans
  - Primary Color: #3B82F6
  - Heading Sizes: H1 (36px) → H6 (14px)
  - Paragraph Spacing: 16px
  - Line Height: 1.6
```

See [Templates](/features/templates) for full customization options.

### Block-Specific Styles

Some blocks have individual styling:

<AccordionGroup>
  <Accordion title="Callout Colors">
    * Info: Blue (#3B82F6)
    * Warning: Amber (#F59E0B)
    * Success: Green (#10B981)
    * Error: Red (#EF4444)
  </Accordion>

  <Accordion title="Table Styles">
    * Header background
    * Row striping
    * Border colors
    * Cell padding
  </Accordion>

  <Accordion title="Divider Styles">
    * Line thickness
    * Line style (solid, dotted, dashed)
    * Color
    * Spacing
  </Accordion>
</AccordionGroup>

## Advanced Features

### Block Nesting

Some blocks support nesting (coming soon):

* Lists within lists
* Checkboxes within checkboxes
* Tables within callouts

### Block Linking

Link between document sections:

```markdown theme={null}
See [Section 3](#heading-section-3) for details
```

### Block Comments

Add internal notes to blocks (coming soon):

* Reviewer comments
* Editor notes
* Todo reminders

### Block History

View block edit history (coming soon):

* Who made changes
* When changes occurred
* Revert to previous versions

## Performance

### Rendering

Blocks are optimized for performance:

* Virtualized scrolling for long documents
* Lazy loading for images
* Debounced autosave
* Optimistic updates

### Limits

<Info>
  **Current Limits:**

  * Maximum blocks per document: 1000
  * Maximum table size: 50 columns × 500 rows
  * Maximum list items: 1000
  * Maximum text block length: 10,000 characters
</Info>

## Best Practices

<AccordionGroup>
  <Accordion icon="lightbulb" title="Use Semantic Structure">
    Organize documents with proper heading hierarchy (H1 → H2 → H3) for better readability and SEO.
  </Accordion>

  <Accordion icon="lightbulb" title="Break Up Long Text">
    Split long paragraphs into multiple text blocks with headings in between for easier scanning.
  </Accordion>

  <Accordion icon="lightbulb" title="Leverage Callouts">
    Use callouts to highlight key information, warnings, or success criteria.
  </Accordion>

  <Accordion icon="lightbulb" title="Tables for Data">
    Use tables instead of lists when presenting related data points (prices, dates, features).
  </Accordion>

  <Accordion icon="lightbulb" title="Consistent Formatting">
    Apply template styles globally rather than styling individual blocks.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Templates" icon="palette" href="/features/templates">
    Customize block styling
  </Card>

  <Card title="Using Blocks Guide" icon="book" href="/guides/using-blocks">
    Detailed block guide
  </Card>

  <Card title="Export" icon="file-export" href="/features/export">
    Export documents
  </Card>

  <Card title="AI Creation" icon="sparkles" href="/features/ai-creation">
    Generate blocks with AI
  </Card>
</CardGroup>