SquibView

JavaScript editor/viewer for Markdown and HTML with live preview, bidirectional editing, and rich content support.

Live Demo | Documentation | API Reference | Local Demo

What It Does

SquibView renders Markdown (or HTML) with live preview and allows editing in both source and rendered views. Changes sync automatically between views.

Key Capabilities:

• Edit markdown and see live HTML preview
• Edit in the rendered view - changes reflect back to markdown
• Full revision history with undo/redo
• Visual diff comparison between any revisions
• Export/copy as HTML with embedded images
• Works as CLI tool or JavaScript component

Supported Content:

• 📊 Mermaid diagrams, flowcharts, sequence diagrams
• 🗺️ GeoJSON/TopoJSON interactive maps
• 🧮 LaTeX math equations
• 📐 STL 3D models
• 📈 CSV/TSV tables
• 🎨 SVG graphics
• 🖼️ Images with base64 conversion
• 💻 Syntax-highlighted code

Quick Start

Browser (ESM) - Now with Bundled Dependencies! 🎉

<!-- SquibView CSS --><linkrel="stylesheet"href="https://unpkg.com/squibview/dist/squibview.min.css"><!-- Optional: Only needed for syntax highlighting and diagrams --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script><scriptsrc="https://unpkg.com/mermaid/dist/mermaid.min.js"></script><scripttype="module">// SquibView ESM build - markdown-it is now bundled! No import maps needed!importSquibViewfrom'https://unpkg.com/squibview/dist/squibview.esm.min.js';
  
  const editor = newSquibView('#editor', {
    initialContent: '# Hello\nStart typing **markdown**...'
  });
</script><divid="editor"></div>

New in v1.0.15: Default builds now include markdown-it bundled. No more import map errors! For advanced users who want to manage dependencies, use the -lean builds.

NPM Install

npm install squibview

importSquibViewfrom'squibview';
const editor = newSquibView('#editor');

CLI Tool

SquibView includes a command line tool (squibv) for converting markdown/HTML files to standalone HTML pages.

# Convert markdown to HTML page
npx squibv document.md

# Watch mode - rebuilds on file changes
npx squibv document.md --watch

# Bundle for offline use (embeds all assets)
npx squibv document.md --bundle-offline

Core Features

View Modes

editor.setView('split');  // Side-by-side editing (default)
editor.setView('src');    // Source only
editor.setView('html');   // Rendered only

Working with Content

// Set markdown content
editor.setContent('# My Document\n\nEdit this text...', 'md');

// Get current contentconst markdown = editor.getContent();
const html = editor.getRenderedHTML();

Revision History & Diffs

editor.revisionUndo();
editor.revisionRedo();

// Compare revisions (v1.0.13+)const diffHTML = editor.getSourceDiffHTML({ fromIndex: 0, toIndex: 2 });
const inlineDiff = editor.getSourceDiffInline(); // Blue additions, red deletions

Export & Copy

editor.copySource();   // Copy markdown to clipboard
editor.copyHTML();     // Copy rendered HTML
editor.exportHTML();   // Download as file

Examples

Live Examples (GitHub Pages)

• Basic Usage - Simple editor setup
• Diff Viewer - Compare revisions
• Live Diff - Track changes in real-time
• React Integration - Use with React

Local Examples (after cloning repo)

• Basic Usage
• Diff Viewer
• Live Diff
• All Examples

Documentation

Online Documentation

• Quick Start Guide - Get running in 5 minutes
• API Reference - Methods, options, events
• CLI Documentation - Command line usage

Local Documentation (after cloning)

• Documentation Home
• API Reference

Build Options

v1.0.15 Change: Default builds now include markdown-it, diff-match-patch, and tiny-emitter bundled. Use -lean builds if you need the old behavior.

License

BSD-2-Clause. See LICENSE.