SquibView

Squibview is a markdown editor/viewer (pure js) with live preview, bidirectional editing, and rich content support (code highlighting, diagrams, math, maps, csv/psv/tsv, 3D and more). It can be used as markdown editor or viewer in many projects or to view AI/LLM outputs interactively. In headless mode squibview can be used as a lightweight viewer with the full support of markitdown and turndown libaries.

For a lightweight pure js bidirectional parser/editor consider it's sister project quikdown which has no dependancies and starts at 9-15KB with some limits on less used commond mark features.

GitHub: Live Demo | Examples | Documentation | API Reference
Local: Live Demo | Examples | Documentation | Source

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 (including diagrams, pics, maps, 3D, editable tables and source code)
• Works as CLI tool or JavaScript component
• Streaming support for use with LLMs
• Examples with Vue and React in addition to pure js

Recent Improvements (v1.0.21 - September 2025):

• ✨ Enhanced typography with proper paragraph and heading spacing
• 🔧 Fixed Smart Linefeeds toggle for visual line break control
• 📝 Dual linefeed handling: source modification or view-only rendering
• 🎨 Professional text presentation with smart margin adjustments

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 - Zero Configuration Quick Start

The easiest way to get started - with fence libraries (math, mermaid, etc) loading automatically from CDN when your content needs them. Note that special care is taken to not load dependancies that may have already been provisioned so there is no double-loading.

<!-- SquibView CSS -->
<link rel="stylesheet" href="https://unpkg.com/squibview/dist/squibview.min.css">

<script type="module">
  import SquibView from 'https://unpkg.com/squibview/dist/squibview.esm.min.js';

  const editor = new SquibView('#editor', {
    initialContent: '# Hello\nStart typing **markdown**...\n\n```mermaid\ngraph TD\n  A --> B\n```',
    autoload_deps: { all: true }  // Enable autoloading of fence libraries (mermaid, math etc)
  });
</script>

<div id="editor"></div>

With the autoload_deps config Mermaid, syntax highlighting, math rendering, and maps load automatically when you use them. If you need more finegrain control our are using other libraries for rendering math/diagrams/etc leave autoload_deps off (default) and load your own libraries. See examples for more.

For those running in air_gapped or offline environments use the standalone builds (see docs) which have all major fences (mermaid, mathjax, threejs, etc) bundled in (note these buidls are 3.6MB).

NPM Install

npm install squibview

import SquibView from 'squibview';

// With autoload (recommended)
const editor = new SquibView('#editor', {
  autoload_deps: { all: true }
});

// Or manually manage dependencies
const editor = new SquibView('#editor', {
  autoload_deps: null  // Load dependencies yourself
});

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 content
const 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

Smart Linefeeds & Text Formatting

// Fix linefeeds in markdown source (adds two spaces for hard breaks)
const fixedMarkdown = editor.fixLinefeedsInMarkdown(text);

// Toggle visual line breaks (view-only, doesn't modify source)
editor.toggleLinefeedView();

// Other formatting utilities
editor.increaseHeadings();    // Increase heading levels (H1→H2, etc.)
editor.decreaseHeadings();    // Decrease heading levels (H2→H1, etc.)
editor.removeHR();             // Remove horizontal rules

Examples

Live Examples (GitHub Pages)

• Basic Usage - Simple editor setup
• Headless Mode - Custom UI with full API
• Diff Viewer - Compare revisions
• Live Diff - Track changes in real-time
• React Integration - Use with React

Local Examples (after cloning repo)

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

Documentation

Complete Documentation

• 📚 Full Documentation - All documentation in organized structure
• API Reference - Comprehensive API documentation
• Programmer's Guide - Detailed usage guide
• Headless Mode Guide - Using SquibView without built-in UI
• CLI Documentation - Command line interface guide
• Examples - Live examples and demos
• Release Notes - Version history and changelog

Local Documentation (after cloning)

• Documentation Home
• API Reference
• Release Notes

Build Options

All builds include integrated autoload capability (v1.0.18+). Each configuration is available in both ESM (for modern bundlers) and UMD (for script tags) formats:

Configuration	What It Does	Best For	Size (minified)	What's Included
Standard 🚀	Recommended - includes autoload	Most projects	254KB	Core editor with autoload capability for all features
Lean	Minimal - you add libraries	Custom bundlers	135KB	Editor only - bring your own libraries
Standalone	Everything pre-bundled	Offline use	3.5MB	Everything included - no external dependencies

Quick Selection Guide

• Want it to just work? → Use Standard with autoload_deps: { all: true } - Features load automatically
• Custom build setup? → Use Lean (squibview.esm-lean.min.js) - You control all dependencies
• Offline/airgapped? → Use Standalone (squibview.standalone.esm.min.js) - Everything included (3.6MB)

Complete File List

File	Module Format	Configuration	Size (minified)
squibview.esm.min.js	ESM	Standard	254KB
squibview.umd.min.js	UMD	Standard	255KB
squibview.esm-lean.min.js	ESM	Lean	135KB
squibview.umd-lean.min.js	UMD	Lean	137KB
squibview.standalone.esm.min.js	ESM	Standalone	3.5MB
squibview.standalone.umd.min.js	UMD	Standalone	3.7MB
squibview.min.css	-	Required for all	23KB

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

Autoload Configuration (v1.0.18+)

All SquibView builds now include autoload capability. Enable it with the autoload_deps option:

// Enable autoloading for all libraries
const editor = new SquibView('#editor', {
  autoload_deps: { all: true }
});

// Fine-grained control
const editor = new SquibView('#editor', {
  autoload_deps: {
    mermaid: 'ondemand',    // Load when mermaid blocks detected
    hljs: 'auto',           // Load immediately on init
    mathjax: false,         // Never load (disable)
    leaflet: 'ondemand',    // Load when map blocks detected
    three: 'ondemand'       // Load when STL blocks detected
  }
});

What Gets Auto-Loaded When Needed:

When you type...	What loads	For
```mermaid	Mermaid (377KB)	Diagrams, flowcharts, graphs
```javascript	Highlight.js (45KB)	Syntax highlighting for code
$$x^2$$ or ```math	MathJax (1.3MB)	Mathematical equations
```geojson	Leaflet (142KB)	Interactive maps
```stl3d	Three.js (1.1MB)	3D model viewing

Advanced Configuration

Control loading behavior per library:

const editor = new SquibView('#editor', {
  autoload_deps: {
    // Loading strategies: 'auto' | 'ondemand' | false | function
    mermaid: 'auto',        // Load immediately on init
    hljs: 'ondemand',       // Load when code blocks are detected (default)
    mathjax: false,         // Never load
    leaflet: 'ondemand',    // Load when map blocks detected
    three: myCustomLoader,  // Use custom loading function

    // Use custom CDN
    cdnUrls: {
      mermaid: {
        script: 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'
      }
    },

    // Enable debug logging (silent by default)
    debug: true  // Shows library loading in console
  }
});

Standalone Build - Best for Offline/Secure Environments

The standalone build (squibview.standalone.*.js) bundles everything:

• Largest size - ~3.7MB includes all libraries
• Works offline - No external dependencies
• Corporate friendly - No CDN calls, perfect for secure environments
• Everything included - All features work immediately

License

BSD-2-Clause. See LICENSE.