Playground #

Explore Marzipan's features interactively with the Bakeshop demo application!

Bakeshop Demo 🎮 #

The Bakeshop is a comprehensive React playground that showcases every feature of Marzipan. It's the perfect place to experiment with the editor before integrating it into your project.

Features #

• ✨ Live Editor - See changes in real-time
• 🎨 Theme Switcher - Try Solar, Cave, and custom themes
• 🧩 Plugin Showcase - Test all available plugins
• ⚙️ Option Tweaker - Adjust every configuration option
• 📊 Stats Display - Monitor word count, characters, and lines
• 🔧 Toolbar Customization - Add, remove, and reorder buttons
• 💻 Code Examples - See implementation code for each feature

Running Locally #

Clone the repository and start the demo:

# Clone the repository
git clone https://github.com/pinkpixel-dev/marzipan.git
cd marzipan/bakeshop-demo

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser and start exploring!

What You Can Try #

1. Basic Editing #

• Type markdown and see the live preview overlay
• Use keyboard shortcuts (Ctrl/Cmd + B for bold, I for italic, etc.)
• Try smart list continuation by pressing Enter in a list

2. Toolbar Features #

• Click formatting buttons to apply styles
• Insert links, quotes, and code blocks
• Create headers, lists, and task lists
• Toggle between plain textarea and overlay preview

3. Themes #

• Switch between Solar (light) and Cave (dark) themes
• Use the accent swatch picker to customize colors
• See how themes affect syntax highlighting

4. Plugins #

Try out the plugin ecosystem:

• Tables - Create and format markdown tables

  • Basic table plugin
  • Grid picker for visual table creation
  • Table generator with prompts

• Mermaid Diagrams - Render flowcharts, sequence diagrams, and more

  markdown

  ```mermaid
  graph TD
    A[Start] --> B[Process]
    B --> C[End]
  

• Syntax Highlighting - Beautiful code block highlighting

  markdown

  ```typescript
  const hello = 'world';
  

• Image Management - Upload and manage images

  • Image picker for simple URL insertion
  • Full image manager with drag-drop support

• Accent Swatches - Pick custom accent colors

  • Color picker with RGB/HEX input
  • Eyedropper tool for sampling colors
  • Persistent color choices

5. Configuration #

Experiment with options:

• Typography: Font size, line height, padding
• Behavior: Auto-resize, smart lists, autofocus
• Features: Toolbar, stats, active line highlighting
• Mobile: Mobile-specific styling options

Demo Structure #

The Bakeshop is organized into panels:

bakeshop-demo/
├── src/
│   ├── App.tsx              # Main application
│   ├── components/
│   │   ├── Editor.tsx       # Marzipan editor instance
│   │   ├── OptionsPanel.tsx # Configuration controls
│   │   ├── PluginPanel.tsx  # Plugin showcase
│   │   └── ThemePanel.tsx   # Theme customization
│   └── examples/            # Example content
└── ...

Learn By Example #

The Bakeshop demonstrates:

• Framework Integration - How to use Marzipan in React
• State Management - Managing editor state and options
• Plugin Configuration - Initializing and configuring plugins
• Event Handling - Responding to editor events
• Custom Toolbars - Building your own toolbar buttons
• Theming - Applying and customizing themes

Code Examples #

Each feature in the Bakeshop includes code examples you can copy:

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

function MyEditor() {
  useEffect(() => {
    const [editor] = new Marzipan('#editor', {
      toolbar: true,
      theme: 'cave',
      plugins: [tablePlugin()],
    });
    
    return () => editor.destroy();
  }, []);
  
  return <div id="editor" />;
}

Tips for Using the Bakeshop #

1. Start Simple - Begin with basic editing, then explore features
2. Try Plugins - Enable one plugin at a time to understand each
3. Experiment - Change options and see immediate effects
4. Check Console - View logs and debug information
5. Copy Code - Use code examples as starting points for your project

Building Your Own Playground #

Want to create a custom playground? The Bakeshop is open source!

# Start with the Bakeshop as a template
cd bakeshop-demo

# Customize to your needs
# - Modify components
# - Add new examples
# - Style to match your brand
# - Add custom plugins

# Build and deploy
npm run build

Next Steps #

• 📖 Getting Started - Begin using Marzipan
• 🧩 Plugins - Learn about available plugins
• ⚙️ Configuration - Customize your editor
• 💻 Frameworks - Integrate with your framework

Feedback #

Have ideas for the playground?

• 💬 Discussions
• 🐛 Issues

Made with ❤️ by Pink Pixel