Template Customizer

The template customizer is a full-screen modal with a left controls panel and a right live preview. Every change you make is reflected in real time. The customizer provides approximately 60 controls across 5 sections: typography, colors, elements, spacing, and alignment.

Control fonts, sizes, and weights for all text elements in your document.

• Heading font family: Choose from curated Google Fonts for headings (H1 through H6)
• Body font family: Choose the font for paragraphs, lists, and other body text
• Code font family: Choose the monospace font for inline code and code blocks
• Heading weight: Font weight for all headings (400 to 900)
• Body weight: Font weight for body text (400 to 700)
• Base font size: The root font size that all other sizes scale from
• H1 through H6 scale sliders: Individual size multipliers for each heading level
• Line height: Spacing between lines of body text (1.0 to 2.5)
• Code line height: Spacing between lines in code blocks

Each template has 16 color values per mode (light and dark), for a total of 32 color controls. A light/dark toggle at the top of the colors section lets you switch which set you are editing.

Colors Per Mode (16)

• Background: Page background color
• Text: Primary body text color
• Heading: Color for all heading levels
• Accent: Used for callout borders, badges, and decorative elements
• Link: Hyperlink color
• Border: General border color for tables, dividers, and separators
• Code background: Background color for inline code and code blocks
• Code text: Text color inside code blocks
• Blockquote border: Left border or background color for blockquotes
• Blockquote background: Background fill for blockquote containers
• Blockquote text: Text color inside blockquotes
• Table border: Border color for table cells
• Table header background: Background color for table header row
• Table header text: Text color in table headers
• Table alternating row background: Stripe color for even table rows
• HR color: Color for horizontal rules

Each color is set via a native color picker and a hex text input. Changes apply instantly to the live preview.

Fine-tune how specific Markdown elements render.

• Blockquote style: Left border, background fill, or italic with border (3 options)
• Blockquote border width: Thickness of the left border on blockquotes
• HR style: Thin line, thick line, dashed, or gradient (4 options)
• Table border style: Full borders, horizontal lines only, or minimal (3 options)
• Alternating rows: Toggle striped background on even table rows
• Code block radius: Corner rounding on code blocks (0px to 16px)
• Code line numbers: Toggle line numbers in fenced code blocks
• Image border radius: Corner rounding on images (0px to 24px)
• Link underline: Toggle underline on hyperlinks

• Content max width: Maximum width of the document content area
• Paragraph spacing: Vertical space between paragraphs
• Heading spacing: Vertical space above headings
• List indent: Indentation for nested list levels

• Text align: Left, center, right, or justify for body text
• Heading align: Left, center, right, justify, or inherit from text align
• Image align: Left, center, or right
• Mermaid diagram align: Left, center, or right
• Table align: Left, center, or right

After customizing, save your work as a custom template. Custom templates appear in a dedicated section at the top of the template picker, alongside your favorited built-in templates. You can edit or delete custom templates at any time.

Custom templates are stored in Supabase and persist across devices. They are available wherever you sign in.