squibview

v1.0.21

Published

6 months ago

SquibView is a light weight editor which live-renders mardown (including code, diagrams, etc) or HTML to a browser

0High
0Medium
0Low

deftio

markdown editor live-render diagrams html split-view

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.

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)

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)

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.