🧁 Marzipan

Framework-agnostic markdown editor with a live overlay preview, zero runtime dependencies, and batteries-included formatting actions.

• Pure TypeScript core – ships typed ESM builds and declaration files.
• First-party actions – formatting helpers live in src/actions and export with the library, so you can drop markdown-actions entirely.
• Plugin library – production-ready plugins (tables, Mermaid, syntax highlighting, media helpers, accent swatches, and more) live in src/plugins and publish under @pinkpixel/marzipan/plugins/*.
• Overlay preview – renders markdown directly over the textarea so alignment never drifts.
• Themeable UI – includes Solar (light), Cave (dark), and accent swatch tooling for custom palettes.
• Demo Bakeshop – a Vite + React playground that exercises every option and plugin.

npm install @pinkpixel/marzipan

import { Marzipan } from '@pinkpixel/marzipan';

const [editor] = new Marzipan('#my-textarea', {
  toolbar: true,
  theme: 'cave',
  smartLists: true,
});

import { actions } from '@pinkpixel/marzipan';

// Toggle bold formatting using our zero-dependency action suite
const textarea = document.querySelector('textarea')!;
actions.toggleBold(textarea);

import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';

new Marzipan('#editor', {
  plugins: [tablePlugin()],
});

cd bakeshop-demo
npm install
npm run dev

Visit http://localhost:5173 to explore every panel, plugin, and action in a live environment.

The src/plugins directory publishes directly to consumers. Available helpers include:

• tablePlugin, tableGridPlugin, tableGeneratorPlugin – interactive table authoring.
• tinyHighlightPlugin – lightweight syntax highlighting for fenced code blocks (ships tinyHighlightStyles).
• accentSwatchPlugin – synced accent palette picker.
• imageManagerPlugin, imagePickerPlugin – opinionated media workflows.
• mermaidPlugin, mermaidExternalPlugin – diagram rendering via ESM or CDN.

Import only what you need:

import { mermaidPlugin } from '@pinkpixel/marzipan/plugins/mermaidPlugin';

All guides live in /docs:

• docs/README.md – orientation & navigation.
• docs/quick-start.md – install, instantiate, and wire up actions/plugins.
• docs/api.md – class API, action helpers, TypeScript signatures.
• docs/plugins.md – plugin catalogue, configuration, and bundling tips.
• docs/types.d.ts – generated type definitions.

The new CHANGELOG tracks releases and major documentation updates.

Read OVERVIEW.md for architecture, tooling, and roadmap context, including how src/actions and src/plugins integrate with the build.

Run these from the repository root:

The Bakeshop has its own scripts inside bakeshop-demo/ (dev, build, preview, lint, typecheck).

Pull requests are welcome! See CONTRIBUTING.md for the development workflow, coding standards, and Node.js requirements (20+).

• Issues: GitHub Tracker
• Email: admin@pinkpixel.dev
• Discussions & ideas: open a thread in the repo

• Inspired by markdown-actions; Marzipan now bundles a fully typed successor.
• Built with TypeScript, Vite, and React (for the demo app).

Made with ❤️ by Pink Pixel