Getting Started with Marzipan

Welcome to Marzipan! This guide will help you get up and running in just a few minutes.

Installation

Install Marzipan using your favorite package manager:

::: code-group

bash [npm]

npm install @pinkpixel/marzipan

bash [pnpm]

pnpm add @pinkpixel/marzipan

bash [yarn]

yarn add @pinkpixel/marzipan

:::

Your First Editor

Create your first Marzipan editor with just a few lines of code:

html

<!DOCTYPE html>
<html>
<head>
  <title>Marzipan Demo</title>
</head>
<body>
  <div id="editor"></div>
  
  <script type="module">
    import { Marzipan } from '@pinkpixel/marzipan';
    
    const [editor] = new Marzipan('#editor', {
      placeholder: 'Start typing your markdown...',
      value: '# Hello Marzipan!\n\nWelcome to the **best** markdown editor!',
      toolbar: true,
      showStats: true,
    });
  </script>
</body>
</html>

That's it! You now have a fully functional markdown editor with:

✅ Live overlay preview
✅ Formatting toolbar
✅ Statistics panel
✅ Keyboard shortcuts

Understanding the Basics

The Constructor

new Marzipan(target, options)

target: CSS selector, Element, NodeList, or Array
options: Configuration object (see Configuration)
Returns: Array of Marzipan instances

TIP

The constructor always returns an array, even for a single element. Use array destructuring for convenience:

const [editor] = new Marzipan('#editor');

Core Features

Overlay Preview The magic of Marzipan is its overlay rendering system. Markdown is rendered directly over the textarea with perfect pixel alignment - no split panes or separate preview windows needed!

Zero Dependencies All markdown formatting logic is bundled internally. No need to install markdown-actions or any other formatting libraries.

Smart Lists Pressing Enter in a list automatically continues the list format. Works for bullet lists, numbered lists, and task lists.

Keyboard Shortcuts Built-in shortcuts for common formatting:

Tab / Shift+Tab - Indent/outdent
Ctrl/Cmd+B - Bold
Ctrl/Cmd+I - Italic
Ctrl/Cmd+K - Insert link

Next Steps

Now that you have a working editor, explore these topics:

Quick Start - Learn common patterns and use cases
Basic Usage - Understand core functionality
Actions System - Use formatting helpers in your code
Themes - Customize the appearance
Plugins - Extend functionality

Need Help?

📖 API Reference - Complete API documentation
🎮 Playground - Try Marzipan interactively
🐛 Issues - Report bugs or request features
💬 Discussions - Ask questions and share ideas

Getting Started with Marzipan #

Installation #

Your First Editor #

Understanding the Basics #

The Constructor #

Core Features #

Next Steps #

Need Help? #