What is Marzipan? #

Marzipan is a pure TypeScript markdown editor library with a unique overlay preview system and zero runtime dependencies.

The Problem #

Traditional markdown editors face several challenges:

• Split view complexity: Managing separate edit and preview panes
• Alignment issues: Preview and source getting out of sync
• Heavy dependencies: Multiple libraries for formatting and parsing
• Framework lock-in: Tied to specific UI frameworks

The Marzipan Solution #

Marzipan solves these problems with an innovative approach:

🎯 Overlay Preview #

Instead of splitting the screen, Marzipan renders markdown directly over the textarea. This provides:

• Perfect pixel alignment between source and rendered output
• No scrolling synchronization issues
• Natural editing experience
• Cleaner UI with more space for content

💪 Zero Dependencies #

All markdown formatting is implemented in pure TypeScript and bundled with the library:

• No need for external markdown-actions or similar libraries
• Reduced bundle size
• Better tree-shaking
• Fewer breaking changes from upstream dependencies

🔧 Framework Agnostic #

Marzipan works with any framework or vanilla JavaScript:

• React, Vue, Svelte, Angular - all supported
• No framework-specific wrappers needed
• Use the same API everywhere
• Easy to integrate into existing projects

🧩 Plugin System #

Extend functionality without bloating the core:

• Tree-shakeable plugin architecture
• Import only what you need
• First-party plugins for common use cases
• Easy to create custom plugins

Who is Marzipan For? #

Marzipan is perfect for:

• Developers building note-taking apps, CMSes, or documentation tools
• Teams wanting a consistent markdown editing experience
• Projects needing fine control over formatting and rendering
• Anyone tired of bloated, framework-specific editor solutions

Design Philosophy #

Marzipan follows these core principles:

1. Simplicity First - Easy to use, hard to misuse
2. Performance Matters - Fast, lightweight, efficient
3. Developer Joy - Great DX with TypeScript and clear APIs
4. User Experience - Beautiful, intuitive, responsive
5. Flexibility - Customizable without being overwhelming

Comparison #

Next Steps #

Ready to try Marzipan? Check out the Getting Started guide!