OverType

Live Examples

Features

How it works

Comparisons

Installation

NPM (bundlers: Vite, webpack, Rollup, etc.)

npm install overtype

import OverType from 'overtype';
const [editor] = new OverType('#editor', { value: '# Hello' });

// ESM — default or named import
import OverType from 'overtype';
import { OverType } from 'overtype';
// CommonJS
const { OverType } = require('overtype');

CDN: native ES module (no build step)

<script type="module">
 import OverType from 'https://cdn.jsdelivr.net/npm/overtype@latest/dist/overtype.esm.js';
 const [editor] = new OverType('#editor', { value: '# Hello' });
</script>

CDN: global script tag (IIFE)

<script src="https://cdn.jsdelivr.net/npm/overtype@latest/dist/overtype.min.js"></script>
<script>
 const [editor] = new OverType('#editor', { value: '# Hello' });
</script>

Quick Start

// 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');

Usage

Basic Editor

<div id="editor" style="height: 400px;"></div>
<script>
 const [editor] = new OverType('#editor', {
 placeholder: 'Start typing markdown...',
 value: '# Welcome\n\nStart writing **markdown** here!',
 onChange: (value, instance) => {
 console.log('Content changed:', value);
 }
 });
</script>

Toolbar

// 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

{
 name: 'customToggle',
 icon: '<svg>...</svg>',
 title: 'Custom Toggle',
 isActive: ({ editor, activeFormats }) => activeFormats.includes('bold'),
 action: ({ editor }) => {
 // Toggle your custom formatting
 }
}

import OverType, { markdownActions } from 'overtype';
const [editor] = new OverType('#editor');
// Apply formatting to the editor's textarea directly
document.querySelector('#bold-btn').addEventListener('click', () => {
 markdownActions.toggleBold(editor.textarea);
 editor.textarea.focus();
});

View Modes

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

Task Lists

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

Syntax Highlighting

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)
});

Keyboard Shortcuts

Multiple Editors

// 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}`);
});

Form Integration

// 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
});

File Uploads

const [editor] = new OverType('#editor', {
 fileUpload: {
 enabled: true,
 maxSize: 10 * 1024 * 1024, // 10MB
 mimeTypes: ['image/png', 'image/jpeg'], // optional whitelist; empty = accept all
 batch: false, // true = one onInsertFile call per drop
 // Upload to your backend, return the markdown link to insert
 onInsertFile: async (file) => {
 const { url } = await uploadToBackend(file);
 const isImage = file.type.startsWith('image/');
 return isImage ? `![${file.name}](${url})` : `[${file.name}](${url})`;
 },
 // Optional: fires when an inserted link is removed from the editor.
 // Useful for deleting orphaned files from storage.
 onRemoveFile: ({ url, filename, file }) => {
 fetch(`/api/files/${encodeURIComponent(url)}`, { method: 'DELETE' });
 }
 }
});

Custom Theme

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)'
 }
 }
});

Preview & HTML Export

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();

Stats Bar

// 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>`;
 }
});

React Component

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' }} />;
}

Standalone Parser

// 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 });
 }
});

API

Constructor

new OverType(target, options)

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
 // Spellcheck
 spellcheck: false, // Enable browser spellcheck (disabled by default)
 // Link tooltip
 transformLinkUrl: (url) => url, // Rewrite the URL shown/opened in the link tooltip (per instance)
 // 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) => {},
 onFocus: (event, instance) => {},
 onBlur: (event, instance) => {},
 // File upload (paste/drop) — see "File Uploads" section below
 fileUpload: {
 enabled: true,
 maxSize: 10 * 1024 * 1024, // bytes (default 10MB)
 mimeTypes: [], // empty = accept all
 batch: false, // single onInsertFile call per drop
 onInsertFile: async (file) => `[${file.name}](url)`, // required: return inserted markdown
 onRemoveFile: ({ url, filename, file }) => {} // fires when an inserted link is removed
 }
}

Instance Methods

// 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()

Static Methods

// 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
// Extend parsing with custom syntax (footnotes, directives, etc.)
// IMPORTANT: You must maintain 1-to-1 character alignment - wrap text, don't change it
// See: https://panphora.github.io/overtype/examples/custom-syntax.html
OverType.setCustomSyntax((html) => {
 return html.replace(/\[\^(\w+)\]/g, '<span class="footnote">$&</span>');
})
// Note: Instance methods override global settings
// Initialize multiple editors (same as constructor)
OverType.init(target, options)
// Initialize with per-element config via data-ot-* attributes
// Uses kebab-case: data-ot-show-stats="true" → showStats: true
// Accepts a selector, Element, NodeList, or Array of elements
OverType.initFromData('.editor', { /* defaults */ })
// Get instance from a selector, Element, NodeList, or Array
// Returns the instance for the first matching element
OverType.getInstance(target)
// Destroy all instances
OverType.destroyAll()
// Access themes
OverType.themes.solar
OverType.themes.cave

Keyboard Shortcuts

Supported Markdown

Web Component

<overtype-editor
 value="# Hello OverType!"
 theme="solar"
 height="300px"
 toolbar>
</overtype-editor>

Migration from v1.x

Breaking Change: Toolbar API (v2.0)

// ❌ 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 }) => {} }
 ]
}

DOM Persistence & Re-initialization

// 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

Examples

Limitations

Images Not Supported

Monospace Font Required

Fixed Font Size

Visible Markdown Syntax

Links Require Modifier Key

Transforming Link URLs

const urlPreviewRegExp = [[/^\//, '/preview/'], [/www\./, '']];
const [editor] = new OverType('#editor', {
 transformLinkUrl: (url) => urlPreviewRegExp.reduce((value, re) => value.replace(...re), url)
});

Recipes

Development

# Install dependencies
npm install
# Development build with watch
npm run dev
# Production build
npm run build
# Run tests
npm test
# Check bundle size
npm run size

Browser Support

Architecture

Data Attribute Configuration

<div class="editor" data-ot-toolbar="true" data-ot-theme="cave"></div>
<div class="editor" data-ot-auto-resize="true" data-ot-min-height="200px"></div>
<div class="editor" data-ot-show-stats="true" data-ot-placeholder="Write here..."></div>
<script>
 OverType.initFromData('.editor', { fontSize: '14px' }); // defaults
</script>

Native textarea attributes (required, name, etc.)

<!-- One attribute per prop: data-ot-textarea-<attr> -->
<div class="editor" data-ot-textarea-required data-ot-textarea-name="message"></div>
<!-- Or the whole object as JSON -->
<div class="editor" data-ot-textarea-props='{"required":true,"maxLength":500,"name":"message"}'></div>

Contributors

Core Features & Fixes

TypeScript & Framework Support

New Features & Enhancements

Developer Experience

License

Contributing

Hyperclay