Marzipan

Appearance

Return to top
On this page

Options Reference

Complete reference for all Marzipan configuration options.

Default Options

ts
const defaultOptions = {
  // Typography
  fontSize: '14px',
  lineHeight: 1.6,
  fontFamily: '"SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace',
  padding: '16px',
  
  // Mobile
  mobile: {
    fontSize: '16px',    // Prevents iOS zoom
    padding: '12px',
    lineHeight: 1.5
  },
  
  // Behavior
  autofocus: false,
  autoResize: false,
  minHeight: '100px',
  maxHeight: null,
  placeholder: 'Start typing...',
  value: '',
  smartLists: true,
  
  // Features
  toolbar: false,
  showStats: false,
  showActiveLineRaw: false,
  
  // Callbacks
  onChange: null,
  onKeydown: null,
  statsFormatter: null,
  
  // Native
  textareaProps: {},
  
  // Theme (per-instance)
  theme: null,
  
  // Plugins
  plugins: []
};

Typography Options

fontSize

Font size for the editor text.

Type: string
Default: '14px'

ts
new Marzipan('#editor', {
  fontSize: '16px'
});

lineHeight

Line height multiplier.

Type: number
Default: 1.6

ts
new Marzipan('#editor', {
  lineHeight: 1.8
});

fontFamily

Font family stack. Should be monospace for proper alignment.

Type: string
Default: System monospace fonts

ts
new Marzipan('#editor', {
  fontFamily: 'Monaco, "Courier New", monospace'
});

padding

Internal padding for the editor.

Type: string
Default: '16px'

ts
new Marzipan('#editor', {
  padding: '20px'
});

Mobile Options

mobile

Mobile-specific style overrides.

Type: Object
Default:

ts
{
  fontSize: '16px',    // Prevents zoom on iOS
  padding: '12px',
  lineHeight: 1.5
}
ts
new Marzipan('#editor', {
  mobile: {
    fontSize: '18px',
    padding: '10px',
    lineHeight: 1.4
  }
});

iOS Zoom Prevention

Use 16px or larger font size on mobile to prevent automatic zoom when focusing the textarea.

Behavior Options

autofocus

Automatically focus the editor on initialization.

Type: boolean
Default: false

ts
new Marzipan('#editor', {
  autofocus: true
});

autoResize

Automatically expand height based on content.

Type: boolean
Default: false

ts
new Marzipan('#editor', {
  autoResize: true,
  minHeight: '200px',
  maxHeight: '600px'
});

minHeight

Minimum height when autoResize is enabled.

Type: string
Default: '100px'

ts
new Marzipan('#editor', {
  autoResize: true,
  minHeight: '300px'
});

maxHeight

Maximum height when autoResize is enabled. null = unlimited.

Type: string | null
Default: null

ts
new Marzipan('#editor', {
  autoResize: true,
  maxHeight: '800px'
});

placeholder

Placeholder text when editor is empty.

Type: string
Default: 'Start typing...'

ts
new Marzipan('#editor', {
  placeholder: 'Write your markdown here...'
});

value

Initial markdown content.

Type: string
Default: ''

ts
new Marzipan('#editor', {
  value: '# Welcome\n\nStart writing!'
});

smartLists

Enable smart list continuation on Enter key.

Type: boolean
Default: true

ts
new Marzipan('#editor', {
  smartLists: true  // Press Enter in list to continue
});

Feature Options

toolbar

Enable the formatting toolbar.

Type: boolean | Object
Default: false

ts
// Enable with default buttons
new Marzipan('#editor', {
  toolbar: true
});

// Custom button configuration
new Marzipan('#editor', {
  toolbar: {
    buttons: [
      'bold', 'italic', 'code',
      '|',
      'h1', 'h2', 'h3',
      '|',
      'link', 'quote',
      '|',
      'bulletList', 'orderedList', 'taskList',
      '|',
      'plain', 'view'
    ]
  }
});

Available shorthands:

  • bold, italic, code
  • link, quote
  • h1, h2, h3
  • bulletList, orderedList, taskList
  • view – View dropdown (plain / overlay / preview)
  • plain – Toggle plain textarea mode
  • |, separator, divider – Visual separators

Pass full button objects if you need to customise icons, actions, or dropdown behaviour.

showStats

Show the statistics panel.

Type: boolean
Default: false

ts
new Marzipan('#editor', {
  showStats: true
});

showActiveLineRaw

Highlight the current line without markdown rendering.

Type: boolean
Default: false

ts
new Marzipan('#editor', {
  showActiveLineRaw: true
});

Callback Options

onChange

Called when content changes.

Type: (value: string, instance: Marzipan) => void
Default: null

ts
new Marzipan('#editor', {
  onChange: (value, instance) => {
    console.log('Content:', value);
    console.log('Word count:', value.split(/\s+/).length);
    
    // Auto-save
    localStorage.setItem('draft', value);
  }
});

onKeydown

Called on keydown events.

Type: (event: KeyboardEvent, instance: Marzipan) => void
Default: null

ts
new Marzipan('#editor', {
  onKeydown: (event, instance) => {
    // Custom save shortcut
    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
      event.preventDefault();
      saveContent(instance.getValue());
    }
  }
});

statsFormatter

Custom formatter for the statistics display.

Type: (stats: StatsObject) => string
Default: null

ts
new Marzipan('#editor', {
  showStats: true,
  statsFormatter: ({ words, chars, lines, line, column }) => {
    const readingTime = Math.ceil(words / 200);
    return `📝 ${words} words (${readingTime} min) • Line ${line}:${column}`;
  }
});

Stats Object:

ts
interface StatsObject {
  chars: number;    // Total characters
  words: number;    // Word count
  lines: number;    // Total lines
  line: number;     // Current line number
  column: number;   // Current column number
}

Native Options

textareaProps

Native textarea attributes and properties.

Type: Object
Default: {}

ts
new Marzipan('#editor', {
  textareaProps: {
    'data-testid': 'markdown-editor',
    'aria-label': 'Markdown content',
    'maxlength': 10000,
    'spellcheck': true,
    'autocapitalize': 'sentences',
    'style': { border: '2px solid blue' }
  }
});

Theme Options

theme

Instance-specific theme override.

Type: string | Object | null
Default: null

ts
// Use built-in theme
new Marzipan('#editor', {
  theme: 'cave'
});

// Custom theme for this instance
new Marzipan('#editor', {
  theme: {
    name: 'custom',
    colors: {
      bgPrimary: '#1a1a1a',
      bgSecondary: '#121212',
      text: '#ffffff',
      toolbarBg: '#141414'
    }
  },
  colors: {
    selection: 'rgba(255, 255, 255, 0.08)'
  }
});

See Themes Guide for complete theme reference.

colors

Merge custom color tokens on top of the resolved theme (global or per-instance).

Type: Partial<ThemeColors>
Default: undefined

ts
new Marzipan('#editor', {
  theme: 'solar',
  colors: {
    toolbarActive: '#ffe066',
    cursor: '#ff8c00'
  }
});

Plugin Options

plugins

Array of plugin instances.

Type: Array<Plugin>
Default: []

ts
import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';
import { mermaidPlugin } from '@pinkpixel/marzipan/plugins/mermaidPlugin';

new Marzipan('#editor', {
  plugins: [
    tablePlugin({ defaultColumns: 3 }),
    mermaidPlugin({ theme: 'dark' })
  ]
});

See Plugins for available plugins and options.

Complete Example

ts
import { Marzipan } from '@pinkpixel/marzipan';
import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';

const [editor] = new Marzipan('#editor', {
  // Typography
  fontSize: '16px',
  lineHeight: 1.7,
  fontFamily: 'Monaco, Consolas, monospace',
  padding: '20px',
  
  // Mobile
  mobile: {
    fontSize: '16px',
    padding: '12px',
    lineHeight: 1.5
  },
  
  // Behavior
  autofocus: true,
  autoResize: true,
  minHeight: '300px',
  maxHeight: '800px',
  placeholder: 'Write something awesome...',
  value: '# Hello World\n\nStart here!',
  smartLists: true,
  
  // Features
  toolbar: {
    buttons: [
      'bold', 'italic', 'code', '|',
      'h1', 'h2', '|',
      'link', 'quote', '|',
      'bulletList', 'orderedList'
    ]
  },
  showStats: true,
  showActiveLineRaw: false,
  theme: 'cave',
  
  // Callbacks
  onChange: (value, instance) => {
    console.log('Content changed');
    localStorage.setItem('draft', value);
  },
  
  onKeydown: (event, instance) => {
    if ((event.ctrlKey || event.metaKey) && event.key === 's') {
      event.preventDefault();
      saveToServer(instance.getValue());
    }
  },
  
  statsFormatter: ({ words, chars, lines, line, column }) => {
    return `${words} words • ${chars} chars • Line ${line}:${column}`;
  },
  
  // Native properties
  textareaProps: {
    'aria-label': 'Markdown editor',
    'spellcheck': true,
    'maxlength': 50000
  },
  
  // Plugins
  plugins: [
    tablePlugin({ defaultColumns: 3, defaultRows: 4 })
  ]
});

See Also

Released under the Apache 2.0 License

Made with ❤️ by Pink Pixel