// Create a single editor const [editor] = new OverType('#editor', { value: '# Hello World', theme: 'solar' }); // Get/set content editor.getValue(); editor.setValue('# New Content'); // Change theme for this instance editor.setTheme('cave');

// Enable default toolbar with all formatting buttons const [editor] = new OverType('#editor', { toolbar: true, value: '# Document\n\nSelect text and use the toolbar!' }); // Default toolbar: Bold, Italic, Code | Link | H1, H2, H3 | Lists, Tasks | Quote | View Mode

import OverType, { toolbarButtons } from 'overtype'; const [editor] = new OverType('#editor', { toolbar: true, toolbarButtons: [ toolbarButtons.bold, toolbarButtons.italic, toolbarButtons.separator, { name: 'save', icon: '<svg>...</svg>', title: 'Save', action: ({ editor, getValue }) => { localStorage.setItem('draft', getValue()); } } ] }); // Available: bold, italic, code, link, h1, h2, h3, bulletList, // orderedList, taskList, quote, separator, viewMode

editor.showNormalEditMode(); // Default WYSIWYG editing editor.showPlainTextarea(); // Raw markdown, no preview editor.showPreviewMode(); // Read-only preview with clickable links

const [editor] = new OverType('#editor', { value: '- [ ] Todo\n- [x] Done', toolbar: true // Use view mode dropdown to see checkboxes }); // Edit mode: Shows `- [ ]` and `- [x]` syntax (preserves alignment) // Preview mode: Renders actual checkbox inputs

import { codeToHtml } from 'shiki'; // Global highlighter (all instances) OverType.setCodeHighlighter((code, lang) => codeToHtml(code, { lang, theme: 'nord' }) ); // Per-instance override const [editor] = new OverType('#editor', { codeHighlighter: (code, lang) => myHighlighter(code, lang) });

// Initialize multiple editors at once const editors = OverType.init('.markdown-editor', { theme: 'cave', fontSize: '16px' }); // Each editor is independent editors.forEach((editor, index) => { editor.setValue(`# Editor ${index + 1}`); });

// Use with form validation const [editor] = new OverType('#message', { placeholder: 'Your message...', textareaProps: { required: true, maxLength: 500, name: 'message' } }); // The textarea will work with native form validation document.querySelector('form').addEventListener('submit', (e) => { const content = editor.getValue(); // Form will automatically validate required field });

const [editor] = new OverType('#editor', { theme: { name: 'my-theme', colors: { bgPrimary: '#faf0ca', bgSecondary: '#ffffff', text: '#0d3b66', h1: '#f95738', h2: '#ee964b', h3: '#3d8a51', strong: '#ee964b', em: '#f95738', link: '#0d3b66', code: '#0d3b66', codeBg: 'rgba(244, 211, 94, 0.2)', blockquote: '#5a7a9b', hr: '#5a7a9b', syntaxMarker: 'rgba(13, 59, 102, 0.52)', cursor: '#f95738', selection: 'rgba(244, 211, 94, 0.4)' } } });

const [editor] = new OverType('#editor', { value: '# Title\n\n**Bold** text with [links](https://example.com)' }); // Get the raw markdown const markdown = editor.getValue(); // Returns: "# Title\n\n**Bold** text with [links](https://example.com)" // Get rendered HTML with syntax markers (for debugging/inspection) const html = editor.getRenderedHTML(); // Returns HTML with <span class="syntax-marker"> elements visible // Get clean HTML for export (no OverType-specific markup) const cleanHTML = editor.getRenderedHTML({ cleanHTML: true }); // Returns clean HTML suitable for saving/exporting // Convenience method for clean HTML const exportHTML = editor.getCleanHTML(); // Same as getRenderedHTML({ cleanHTML: true }) // Get the current preview element's HTML (actual DOM content) const previewHTML = editor.getPreviewHTML(); // Returns exactly what's shown in the editor's preview layer // Example: Export clean HTML to server const htmlToSave = editor.getCleanHTML(); // No syntax markers // Example: Clone exact preview appearance document.getElementById('clone').innerHTML = editor.getPreviewHTML();

// Enable stats bar on initialization const [editor] = new OverType('#editor', { showStats: true }); // Show or hide stats bar dynamically editor.showStats(true); // Show editor.showStats(false); // Hide // Custom stats format const [editor] = new OverType('#editor', { showStats: true, statsFormatter: (stats) => { // stats object contains: { chars, words, lines, line, column } return `<span>${stats.chars} characters</span>  <span>${stats.words} words</span>  <span>${stats.lines} lines</span>  <span>Line ${stats.line}, Col ${stats.column}</span>`; } });

function MarkdownEditor({ value, onChange }) { const ref = useRef(); const editorRef = useRef(); useEffect(() => { const [instance] = OverType.init(ref.current, { value, onChange }); editorRef.current = instance; return () => editorRef.current?.destroy(); }, []); useEffect(() => { if (editorRef.current && value !== editorRef.current.getValue()) { editorRef.current.setValue(value); } }, [value]); return <div ref={ref} style={{ height: '400px' }} />; }

// Import just the parser import { MarkdownParser } from 'overtype/parser'; // Parse markdown to HTML const html = MarkdownParser.parse('# Hello World\n\nThis is **bold** text.'); // Use in Node.js for SSR app.get('/preview', (req, res) => { const markdown = req.body.content; const html = MarkdownParser.parse(markdown); res.json({ html }); }); // Use in static site generator const posts = markdownFiles.map(file => ({ content: MarkdownParser.parse(file.content), metadata: file.metadata })); // Use in browser extension chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { if (request.markdown) { const html = MarkdownParser.parse(request.markdown); sendResponse({ html }); } });

new OverType(target, options)

{ // Typography fontSize: '14px', lineHeight: 1.6, fontFamily: 'monospace', padding: '16px', // Theme - 'solar', 'cave', or custom theme object theme: 'solar', // Custom colors (override theme colors) colors: { h1: '#e63946', h2: '#457b9d', // ... any color variable }, // Mobile styles (applied at <= 640px) mobile: { fontSize: '16px', padding: '12px', lineHeight: 1.5 }, // Behavior autofocus: false, placeholder: 'Start typing...', value: '', // Auto-resize autoResize: false, // Auto-expand height with content minHeight: '100px', // Minimum height when autoResize is enabled maxHeight: null, // Maximum height (null = unlimited) // Native textarea properties textareaProps: { required: true, maxLength: 500, name: 'content', // Any HTML textarea attribute }, // Toolbar toolbar: false, // Enable/disable toolbar toolbarButtons: [], // Custom button array (v2.0) // Defaults to all built-in buttons when toolbar: true // Syntax highlighting codeHighlighter: null, // Function: (code, lang) => html // Overrides global OverType.setCodeHighlighter() // Smart lists smartLists: true, // Enable GitHub-style list continuation on Enter // Stats bar showStats: false, // Enable/disable stats bar statsFormatter: (stats) => { // Custom stats format return `${stats.chars} chars | ${stats.words} words`; }, // Callbacks onChange: (value, instance) => {}, onKeydown: (event, instance) => {} }

// Get current markdown content editor.getValue() // Set markdown content editor.setValue(markdown) // Get rendered HTML of the current content editor.getRenderedHTML() // With syntax markers (for debugging) editor.getRenderedHTML({ cleanHTML: true }) // Clean HTML without OverType markup editor.getCleanHTML() // Alias for getRenderedHTML({ cleanHTML: true }) // Get the current preview element's HTML editor.getPreviewHTML() // Actual DOM content from preview layer // Change theme (instance-specific, overrides global theme) editor.setTheme('cave') // Built-in theme name editor.setTheme(customThemeObject) // Custom theme // Set code highlighter (instance-specific) editor.setCodeHighlighter((code, lang) => highlightedHTML) editor.setCodeHighlighter(null) // Disable for this instance // View modes editor.showNormalEditMode() // Switch to normal edit mode (default) editor.showPlainTextarea() // Switch to plain textarea mode editor.showPreviewMode() // Switch to preview mode // Focus/blur editor.focus() editor.blur() // Show or hide stats bar editor.showStats(true) // Show stats editor.showStats(false) // Hide stats // Check if initialized editor.isInitialized() // Re-initialize with new options editor.reinit(options) // Destroy the editor editor.destroy()

// Set global theme (affects all instances without instance themes) OverType.setTheme('cave') // Built-in theme OverType.setTheme(customTheme) // Custom theme object OverType.setTheme('solar', { h1: '#custom' }) // Override specific colors // Set global code highlighter (affects all instances without instance highlighter) OverType.setCodeHighlighter((code, lang) => highlightedHTML) OverType.setCodeHighlighter(null) // Disable global highlighting // Note: Instance methods override global settings // Initialize multiple editors (same as constructor) OverType.init(target, options) // Get instance from element OverType.getInstance(element) // Destroy all instances OverType.destroyAll() // Access themes OverType.themes.solar OverType.themes.cave

// ❌ No longer supported { customToolbarButtons: [...], hideButtons: [...], buttonOrder: [...] }

// ✅ v2.0: Single explicit array import { toolbarButtons } from 'overtype'; { toolbar: true, toolbarButtons: [ toolbarButtons.bold, toolbarButtons.italic, { name: 'custom', icon: '...', action: ({ editor, getValue }) => {} } ] }

// Safe to call multiple times - will recover existing editors OverType.init('.editor'); // The library will: // 1. Check for existing OverType DOM structure // 2. Recover content from existing textarea if found // 3. Re-establish event bindings // 4. Or create fresh editor if no existing DOM