Pure TypeScript Markdown Editor
Framework-agnostic editor with overlay preview and zero runtime dependencies
Pure TypeScript implementation with all markdown actions bundled internally. No external formatting libraries required.
Live markdown rendering directly over the textarea with pixel-perfect alignment. See your content formatted in real-time.
Built-in Solar (light) and Cave (dark) themes with custom accent color support. Fully customizable styling.
15+ formatting helpers for bold, italic, headers, lists, links, and more. Use them anywhere in your app.
Tree-shakeable plugins for tables, Mermaid diagrams, syntax highlighting, image management, and custom extensions.
Works seamlessly with React, Vue, Svelte, Angular, or vanilla JavaScript. No lock-in.
Responsive design with iOS zoom prevention, touch-optimized controls, and adaptive layouts.
Auto-resize, smart lists, keyboard shortcuts, statistics panel, link tooltips, and active line highlighting.
Written in strict TypeScript with comprehensive type definitions. Full IDE autocomplete support.
npm install @pinkpixel/marzipan
import { Marzipan } from '@pinkpixel/marzipan';
const [editor] = new Marzipan('#my-editor', {
toolbar: true,
theme: 'cave',
smartLists: true,
});
new Marzipan('#preview-demo', {
toolbar: {
buttons: ['bold', 'italic', '|', 'plain', 'view']
},
theme: 'solar',
colors: {
toolbarActive: '#ffe066',
cursor: '#ff8c00'
},
value: '# Overlay Preview\n\nTry toggling between the plain textarea and live preview modes.'
});
The plain shorthand instantly flips the preview overlay on and off, while view opens the dropdown for preview-only mode. Combine instance-level colors with global themes to brand the editor without restarting your app.
Marzipan is designed from the ground up for speed and efficiency:
Marzipan makes markdown editing a joy to implement:
Your users will love the editing experience:
🧁 Core Library
@pinkpixel/marzipan - The main editor with actions and themes
🔌 Plugins
@pinkpixel/marzipan/plugins/* - Optional enhancements:
🥤 Demo App
Bakeshop Demo - Full React playground showcasing every feature with live examples
Join the Marzipan community:
Marzipan is Apache 2.0 licensed.
Made with ❤️ by Pink Pixel