Svelte5 Milkdown Editor

beanflowai

Svelte 5 Milkdown Editor

A modern Svelte 5 component library for Milkdown markdown editor with split view, themes, and auto-save functionality.

Features

✨ Svelte 5 - Built with the latest Svelte 5 using runes
📝 Rich Text Editing - WYSIWYG markdown editor powered by Milkdown
🔀 Split View - Side-by-side visual and raw markdown editing with live sync
🎨 Multiple Themes - Nord, Nord Dark, Frame, and Frame Dark themes
💾 Auto-save - Optional auto-save functionality with customizable delay
✅ Task Lists - Interactive checkboxes for task management
🎯 Syntax Highlighting - Code blocks with syntax highlighting
📊 Tables - Full table support with styling
🔗 Links & Images - Rich link and image handling
📱 Responsive - Mobile-friendly design
💪 TypeScript - Full TypeScript support with type definitions

Installation

npm install svelte5-milkdown-editor

Usage

Basic Editor

<script>
  import { MilkdownEditor } from 'svelte5-milkdown-editor';
  import 'svelte5-milkdown-editor/styles';

  let content = $state('# Hello World\n\nStart editing!');

  function handleChange(newContent) {
    content = newContent;
    console.log('Content changed:', newContent);
  }

  function handleReady(instance) {
    console.log('Editor ready:', instance);
  }
</script>

<MilkdownEditor
  defaultValue={content}
  onChange={handleChange}
  onReady={handleReady}
  theme="nord"
  height="500px"
  placeholder="Start typing..."
/>

Split View Editor

<script>
  import { SplitViewEditor } from 'svelte5-milkdown-editor';
  import 'svelte5-milkdown-editor/styles';

  const markdown = `# Split View Demo

Edit on the left, see raw markdown on the right!

## Features
- ✅ Live synchronization
- ✅ Resizable panes
- ✅ Theme support`;

  function handleSave(content) {
    localStorage.setItem('content', content);
    console.log('Auto-saved!');
  }
</script>

<SplitViewEditor
  defaultValue={markdown}
  theme="nord-dark"
  height="600px"
  autosave={{
    enabled: true,
    delay: 2000,
    onSave: handleSave
  }}
/>

With TypeScript

import type { EditorOptions, EditorInstance } from 'svelte5-milkdown-editor';
import { MilkdownEditor } from 'svelte5-milkdown-editor';

const options: EditorOptions = {
  theme: 'nord',
  placeholder: 'Type here...',
  readonly: false
};

function handleReady(instance: EditorInstance) {
  // Access Milkdown Crepe instance
  const markdown = instance.crepe.getMarkdown();
  console.log(markdown);
}

API Reference

MilkdownEditor

Props

Prop	Type	Default	Description
`defaultValue`	`string`	`''`	Initial markdown content
`theme`	`'nord' \| 'nord-dark' \| 'frame' \| 'frame-dark'`	`'nord'`	Editor theme
`height`	`string`	`'400px'`	Editor height (CSS value)
`minHeight`	`string`	`'300px'`	Minimum height (CSS value)
`placeholder`	`string`	`undefined`	Placeholder text
`readonly`	`boolean`	`false`	Read-only mode
`class`	`string`	`''`	Additional CSS classes
`id`	`string`	`'milkdown-editor'`	Element ID
`onChange`	`(content: string) => void`	`undefined`	Content change callback
`onReady`	`(instance: any) => void`	`undefined`	Editor ready callback
`onError`	`(error: Error) => void`	`undefined`	Error callback
`autosave`	`AutosaveConfig`	`undefined`	Auto-save configuration

AutosaveConfig

{
  enabled: boolean;
  delay?: number;  // milliseconds, default: 3000
  onSave?: (content: string) => void;
}

Methods

The component exports the following methods:

// Get current markdown content
getContent(): string

// Set markdown content
setContent(content: string): void

// Get editor instance
getEditorInstance(): EditorInstance

// Focus the editor
focus(): void

// Blur the editor
blur(): void

// Set theme
setTheme(theme: 'nord' | 'nord-dark' | 'frame' | 'frame-dark'): void

// Get current theme
getTheme(): string

Example using methods

<script>
  import { MilkdownEditor } from 'svelte5-milkdown-editor';

  let editor;

  function handleGetContent() {
    const content = editor.getContent();
    console.log(content);
  }

  function handleSetContent() {
    editor.setContent('# New Content');
  }
</script>

<MilkdownEditor bind:this={editor} />

<button onclick={handleGetContent}>Get Content</button>
<button onclick={handleSetContent}>Set Content</button>

SplitViewEditor

Extends all props from MilkdownEditor with additional props:

Prop	Type	Default	Description
`initialViewMode`	`'split' \| 'editor' \| 'raw'`	`'split'`	Initial view mode
`showToolbar`	`boolean`	`true`	Show toolbar with controls
`resizable`	`boolean`	`true`	Allow pane resizing

Styling

Import Styles

The package includes CSS for all Milkdown features. Import it in your app:

// In your main JS/TS file
import 'svelte5-milkdown-editor/styles';

Or in your CSS file:

@import 'svelte5-milkdown-editor/styles';

Custom Styling

You can override styles using CSS variables:

:root {
  --milkdown-primary-color: #2e3440;
  --milkdown-bg-color: #ffffff;
  --milkdown-border-color: #ccc;
  --milkdown-focus-color: #007bff;
}

/* Dark theme */
[data-theme="nord-dark"] {
  --milkdown-primary-color: #d8dee9;
  --milkdown-bg-color: #2e3440;
  --milkdown-border-color: #4c566a;
  --milkdown-focus-color: #5e81ac;
}

Themes

The editor comes with 4 built-in themes:

Nord - Light theme with arctic color palette
Nord Dark - Dark variant of Nord theme
Frame - Clean and minimal light theme
Frame Dark - Dark variant of Frame theme

Switch themes dynamically:

<script>
  let currentTheme = $state('nord');
</script>

<MilkdownEditor theme={currentTheme} />

<button onclick={() => currentTheme = 'nord'}>Nord</button>
<button onclick={() => currentTheme = 'nord-dark'}>Nord Dark</button>
<button onclick={() => currentTheme = 'frame'}>Frame</button>
<button onclick={() => currentTheme = 'frame-dark'}>Frame Dark</button>

Requirements

Svelte 5.0.0 or higher
Node.js 18 or higher (recommended)

Development

# Clone the repository
git clone https://github.com/yourusername/svelte5-milkdown-editor.git
cd svelte5-milkdown-editor

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build library
npm run package

# Check types
npm run check

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

Credits

Built with Milkdown
Powered by Svelte 5
Uses ProseMirror under the hood

Top categories