Quikdown Editor Demo

How to Use Quikdown Editor

Import the editor from CDN or npm
Create a container div with a defined height
Initialize with options
That's it! The editor handles everything else

HTML Setup

<!-- Container for the editor -->
<div id="editor" style="height: 500px;"></div>

Complete Working Example

<!DOCTYPE html>
<html>
<head>
    <title>My Editor</title>
</head>
<body>
    <!-- 1. Create a container -->
    <div id="editor" style="height: 500px;"></div>
    
    <!-- 2. Load and initialize -->
    <script type="module">
        import QuikdownEditor from 'https://unpkg.com/quikdown/dist/quikdown_edit.esm.min.js';
        
        // That's it! Editor is ready
        const editor = new QuikdownEditor('#editor', {
            mode: 'split',
            plugins: { highlightjs: true, mermaid: true }
        });
        
        // Optional: Load some content
        editor.setMarkdown('# Hello World\n\nStart typing!');
    </script>
</body>
</html>

Minimal Setup (3 lines)

<div id="editor" style="height: 500px;"></div>
<script type="module">
    import QuikdownEditor from 'https://unpkg.com/quikdown/dist/quikdown_edit.esm.min.js';
    new QuikdownEditor('#editor');
</script>

Available Methods

// Set markdown content
editor.setMarkdown('# Hello World');

// Get current markdown
const markdown = editor.getMarkdown();

// Get rendered HTML
const html = editor.getHTML();

// Change view mode
editor.setMode('preview');  // or 'source' or 'split'

// Clean up when done
editor.destroy();

Options

The editor in the demo tab was initialized with these options:

{
    mode: 'split',
    theme: 'auto',
    showToolbar: true,
    lazy_linefeeds: false,
    plugins: {
        highlightjs: true,
        mermaid: true
    }
}