🧁 Marzipan

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

✨ Highlights

• 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.

🍰 What’s in the repo?

Package	Description
@pinkpixel/marzipan	Core editor library located in src/ (bundled to dist/). Ships the actions toolkit and plugin exports by default.
@pinkpixel/marzipan/plugins/*	Individual plugin entry points compiled from src/plugins. Import only the helpers you need.
bakeshop-demo/	React playground showcasing toolbar presets, actions, plugins, and theming workflows.

🚀 Quick Start

1. Install

npm install @pinkpixel/marzipan

2. Create an editor

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

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

3. Use the bundled actions

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

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

4. Opt into a plugin

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

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

5. Try the Bakeshop playground

cd bakeshop-demo
npm install
npm run dev

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

🧩 Bundled Plugins

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";

🎬 Bundled Actions

The src/actions module ships a zero-dependency markdown formatting toolkit. All actions accept an HTMLTextAreaElement:

Action	Description
toggleBold	Toggle **bold**
toggleItalic	Toggle _italic_
toggleCode	Toggle `code`
toggleStrikethrough	Toggle ~~strikethrough~~ or ~text~
insertHorizontalRule	Insert --- divider
insertLink	Insert [text](url)
toggleBulletList	Toggle bullet list
toggleNumberedList	Toggle numbered list
toggleTaskList	Toggle task list (- [ ])
toggleQuote	Toggle > blockquote
insertHeader(level)	Insert # through ######
toggleH1 / toggleH2 / toggleH3	Toggle specific heading level
applyCustomFormat	Apply a custom format rule

📚 Documentation

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.

🗺️ Project Overview

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

🛠️ Scripts

Run these from the repository root:

Script	Purpose
npm run dev	Library build in watch mode
npm run build	Type check then bundle to dist/
npm run typecheck	Strict TypeScript validation
npm run lint	ESLint flat config
npm run prettier	Format source and docs

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

🚀 Deployment

Docs Site → marzipan.pinkpixel.dev

The docs are built with VitePress and deployed to Cloudflare Pages (project: marzipan-docs).

# 1. Build the VitePress site (outputs to docs-site/)
npm run docs:build

# 2. Deploy to Cloudflare Pages
wrangler pages deploy docs-site --project-name marzipan-docs

Bakeshop Demo → bakeshop.pinkpixel.dev

The interactive playground is a Vite + React app deployed to Cloudflare Pages (project: marzipan-bakeshop).

# 1. Build the main library first
npm run build

# 2. Build and deploy the demo
cd bakeshop-demo
npm run build
wrangler pages deploy dist --project-name marzipan-bakeshop

🤝 Contributing

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

💬 Support & Feedback

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

🙏 Acknowledgements

• 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