🚀 Quikdown Editor v1.0.5 - CDN Example

This page demonstrates loading Quikdown Editor from CDN.
No build tools needed - just include the script and go!
Version 1.0.5 | Bundle size: 36KB minified (ESM), includes quikdown_bd for bidirectional editing

Live Demo

Complete HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Markdown Editor</title>
</head>
<body>
    <!-- Container for editor -->
    <div id="editor" style="height: 400px;"></div>
    
    <!-- Load and initialize (that's it!) -->
    <script type="module">
        import QuikdownEditor from 'https://unpkg.com/quikdown@1.0.5/dist/quikdown_edit.esm.min.js';
        new QuikdownEditor('#editor');
    </script>
</body>
</html>

With Options & Custom Fences

const editor = new QuikdownEditor('#editor', {
    mode: 'split',                    // 'source', 'split', or 'preview'
    lazy_linefeeds: false,            // Single \n becomes <br>
    debounceDelay: 150,               // Milliseconds to wait before updating
    customFences: {                   // Custom fence handlers (override built-ins)
        'graph': (code) => `<div class="graph">${code}</div>`,
        'custom': (code) => `<div class="custom">${code}</div>`
    },
    onChange: (markdown, html) => {  // Callback on content change
        console.log('Content changed');
    }
});

// Toggle lazy linefeeds at runtime
editor.setLazyLinefeeds(true);
const isLazy = editor.getLazyLinefeeds(); // true

Key Features

Try Different Modes