Installation Guide

SquibView provides multiple build types to fit different development environments and use cases.

Build Types Overview

Build TypeBest ForDependenciesSizeAutoload Support
Standard (ESM/UMD)Most projectsmarkdown-it bundled~245KB✅ Yes
Lean (ESM/UMD)Custom bundlersExternal~126KB✅ Yes
StandaloneOffline/airgappedEverything bundled~3.6MBNot needed

All builds support the autoload_deps option for automatic library loading from CDN.

NPM Installation

npm install squibview

ESM (Recommended for Modern Projects)

Use this with modern bundlers that handle dependencies:

import { SquibView } from'squibview';
import'squibview/dist/squibview.min.css';

const editor = newSquibView({
    element: document.getElementById('editor'),
    content: '# Hello World'
});

When to use: You have a build step with Vite, Webpack, or similar bundlers.

UMD (Legacy Browser Support)

For projects without modern bundling:

<linkrel="stylesheet"href="node_modules/squibview/dist/squibview.min.css"><scriptsrc="node_modules/squibview/dist/squibview.umd.min.js"></script><script>const editor = newSquibView({
        element: document.getElementById('editor'),
        content: '# Hello World'
    });
</script>

When to use: Legacy projects or when you want to include SquibView as a simple script tag.

CDN Usage

Standard Build with Autoload (Recommended)

Zero configuration with automatic library loading:

<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\n\n```mermaid\ngraph TD\n  A --> B\n```',
    autoload_deps: { all: true }  // Enable autoloading
  });
</script>

When to use: Most projects - libraries load from CDN only when content needs them.

Standalone Build (Offline-Ready)

Everything bundled together - perfect for offline environments:

<linkrel="stylesheet"href="https://unpkg.com/squibview/dist/squibview.min.css"><scriptsrc="https://unpkg.com/squibview/dist/squibview.standalone.min.js"></script>

When to use: Offline apps, airgapped environments, or when CDN access is restricted.

ESM Build (Default - v1.0.15+)

As of v1.0.15, markdown-it is bundled by default. No import maps needed!

<!-- SquibView CSS --><linkrel="stylesheet"href="https://unpkg.com/squibview/dist/squibview.min.css"><!-- Optional external dependencies for advanced features --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script><scripttype="module">// Import SquibView - markdown-it is now bundled!importSquibViewfrom'https://unpkg.com/squibview/dist/squibview.esm.min.js';
  
  const editor = newSquibView('#editor');
</script>

ESM-Lean Build (Advanced Users)

If you’re managing your own dependencies:

<!-- Import map for external dependencies --><scripttype="importmap">
{
  "imports": {
    "markdown-it": "https://esm.sh/markdown-it@14.1.0",
    "tiny-emitter": "https://esm.sh/tiny-emitter@2.1.0",
    "diff-match-patch": "https://esm.sh/diff-match-patch@1.0.5"
  }
}
</script><!-- SquibView ESM-lean build --><scripttype="module">importSquibViewfrom'https://unpkg.com/squibview/dist/squibview.esm-lean.min.js';
  const editor = newSquibView('#editor');
</script>

CLI Installation

Global Installation

npm install -g squibview
squibv document.md

Local Usage (Recommended)

npx squibv document.md

Project Installation

npm install --save-dev squibview
npx squibv document.md

Dependency Requirements

SquibView uses these external libraries for enhanced functionality:

Choosing the Right Build

Autoload builds (v1.0.18+) - Recommended for most users:

Standard builds (ESM/UMD) include core dependencies:

Lean builds (ESM-lean/UMD-lean) for advanced users:

Standalone builds include everything:

Next Steps