SquibView

NPM VersionLicenseBuild Status

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

SquibView Live Demo - Progressive markdown rendering showing headings, bullets, tables, diagrams, math, and maps

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:

Recent Improvements (v1.0.21 - September 2025):

Supported Content:

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 --><linkrel="stylesheet"href="https://unpkg.com/squibview/dist/squibview.min.css"><scripttype="module">importSquibViewfrom'https://unpkg.com/squibview/dist/squibview.esm.min.js';

  const editor = newSquibView('#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><divid="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

importSquibViewfrom'squibview';

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

// Or manually manage dependenciesconst editor = newSquibView('#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 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

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)

Local Examples (after cloning repo)

Documentation

Complete Documentation

Local Documentation (after cloning)

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:

ConfigurationWhat It DoesBest ForSize (minified)What’s Included
Standard 🚀Recommended - includes autoloadMost projects254KBCore editor with autoload capability for all features
LeanMinimal - you add librariesCustom bundlers135KBEditor only - bring your own libraries
StandaloneEverything pre-bundledOffline use3.5MBEverything included - no external dependencies

Quick Selection Guide

Complete File List

FileModule FormatConfigurationSize (minified)
squibview.esm.min.jsESMStandard254KB
squibview.umd.min.jsUMDStandard255KB
squibview.esm-lean.min.jsESMLean135KB
squibview.umd-lean.min.jsUMDLean137KB
squibview.standalone.esm.min.jsESMStandalone3.5MB
squibview.standalone.umd.min.jsUMDStandalone3.7MB
squibview.min.css-Required for all23KB

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 librariesconst editor = newSquibView('#editor', {
  autoload_deps: { all: true }
});

// Fine-grained controlconst editor = newSquibView('#editor', {
  autoload_deps: {
    mermaid: 'ondemand',    // Load when mermaid blocks detectedhljs: 'auto',           // Load immediately on initmathjax: false,         // Never load (disable)leaflet: 'ondemand',    // Load when map blocks detectedthree: 'ondemand'// Load when STL blocks detected
  }
});

What Gets Auto-Loaded When Needed:

When you type…What loadsFor
```mermaidMermaid (377KB)Diagrams, flowcharts, graphs
```javascriptHighlight.js (45KB)Syntax highlighting for code
$$x^2$$ or ```mathMathJax (1.3MB)Mathematical equations
```geojsonLeaflet (142KB)Interactive maps
```stl3dThree.js (1.1MB)3D model viewing

Advanced Configuration

Control loading behavior per library:

const editor = newSquibView('#editor', {
  autoload_deps: {
    // Loading strategies: 'auto' | 'ondemand' | false | functionmermaid: 'auto',        // Load immediately on inithljs: 'ondemand',       // Load when code blocks are detected (default)mathjax: false,         // Never loadleaflet: 'ondemand',    // Load when map blocks detectedthree: myCustomLoader,  // Use custom loading function// Use custom CDNcdnUrls: {
      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:

License

BSD-2-Clause. See LICENSE.