Skip to main content

​
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. Block Editor Interface

​
Available Block Types

Heading

Six levels (H1-H6) for document structure

Text

Rich text paragraphs with formatting

List

Bullet or numbered lists

Table

Data tables with headers

Callout

Info, warning, success, error boxes

Signature

Digital signature blocks

Divider

Section separators

Date

Formatted date displays

Checkbox

Task lists and checkboxes

Image

Embedded images (coming soon)

​
Block Types in Detail

​
Heading Block

Create document structure with six heading levels: 
# 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:
  • Features
  • Use Cases
  • Best Practices
  • Bold text
  • Italic text
  • Multi-paragraph support
  • Automatic spacing

​
List Block

Create ordered or unordered lists: Bullet Lists: 
• Item one
• Item two
• Item three
Numbered Lists: 
1. First step
2. Second step
3. Third step
Use numbered lists for sequential information (steps, priorities) and bullet lists for non-ordered items (features, benefits).

​
Table Block

Structured data in rows and columns:
FeatureDescriptionStatus
HeadersColumn labels✅
RowsData entries✅
SortingClick to sort🔜
FilteringSearch 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 Callout - General information or helpful tips
Warning Callout - Caution or attention needed
Success Callout - Positive outcomes or confirmations
Customization:
  • Title (optional)
  • Body text
  • Icon
  • Color scheme

​
Signature Block

Professional signature blocks for agreements: 
━━━━━━━━━━━━━━━━━━
Sarah Johnson
Project Manager
TechCorp Inc.
Signed: Jan 15, 2025
━━━━━━━━━━━━━━━━━━
Fields:
  • Name
  • Role/Title
  • Company
  • Date
  • Signature status
Digital signatures are visual only. For legally binding signatures, integrate with DocuSign or Adobe Sign.

​
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
  • 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:
1

Click Block

Click anywhere in the block to activate editing
2

Modify Content

Type, delete, or paste content directly
3

Apply Formatting

Use keyboard shortcuts or toolbar for formatting
4

Click Outside

Click outside or press Esc to save changes

​
Keyboard Shortcuts

ActionShortcutDescription
BoldCmd/Ctrl + BMake text bold
ItalicCmd/Ctrl + IMake text italic
SaveCmd/Ctrl + SSave document
UndoCmd/Ctrl + ZUndo last change
RedoCmd/Ctrl + Shift + ZRedo change
Exit EditEscExit edit mode

​
Managing Blocks

​
Adding Blocks

  • AI Chat
  • + Button
  • Slash Command
Ask the AI to add content:
"Add a table showing project milestones"

​
Reordering Blocks

Drag & Drop

Hover over a block and drag the handle to reorder

Keyboard

Use Cmd/Ctrl + Up/Down to move blocks (coming soon)

​
Deleting Blocks

Deleted blocks cannot be recovered. Consider duplicating important blocks before deletion.
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: 
Template Configuration:
  - Font Family: Geist Sans
  - Primary Color: #3B82F6
  - Heading Sizes: H1 (36px) → H6 (14px)
  - Paragraph Spacing: 16px
  - Line Height: 1.6
See Templates for full customization options.

​
Block-Specific Styles

Some blocks have individual styling:
  • Info: Blue (#3B82F6)
  • Warning: Amber (#F59E0B)
  • Success: Green (#10B981)
  • Error: Red (#EF4444)
  • Header background
  • Row striping
  • Border colors
  • Cell padding
  • Line thickness
  • Line style (solid, dotted, dashed)
  • Color
  • Spacing

​
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: 
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

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

​
Best Practices

Organize documents with proper heading hierarchy (H1 → H2 → H3) for better readability and SEO.
Split long paragraphs into multiple text blocks with headings in between for easier scanning.
Use callouts to highlight key information, warnings, or success criteria.
Use tables instead of lists when presenting related data points (prices, dates, features).
Apply template styles globally rather than styling individual blocks.

​
Next Steps

Templates

Customize block styling

Using Blocks Guide

Detailed block guide

Export

Export documents

AI Creation

Generate blocks with AI