Installation Guide

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

Build Types Overview

Build TypeBest ForDependenciesSize
ESMModern bundlers (Vite, Webpack)markdown-it bundled~240KB
ESM-leanAdvanced users managing depsExternal~140KB
UMDLegacy browsers, global scriptsmarkdown-it bundled~250KB
UMD-leanAdvanced users managing depsExternal~140KB
StandaloneQuick prototypes, CDN usageEverything bundled~3.7MB

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

Standalone Build (Easiest)

Everything bundled together - perfect for prototypes:

<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: CodePen, quick prototypes, or when you want zero configuration.

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

Default builds (ESM/UMD) include markdown-it bundled (v1.0.15+):

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

Standalone builds include all dependencies:

Next Steps