-<div><h1>SquibView</h1><p><a href="https://www.npmjs.com/package/squibview"><img src="https://img.shields.io/npm/v/squibview.svg" alt="NPM Version"></a><a href="LICENSE"><img src="https://img.shields.io/badge/License-BSD_2--Clause-orange.svg" alt="License"></a><a href="https://github.com/deftio/squibview/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/deftio/squibview/ci.yml?branch=main&style=flat&logo=github&label=Build&color=blue" alt="Build Status"></a></p><p>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.</p><p>For a lightweight pure js bidirectional parser/editor consider it’s sister project <a href="https://github.com/deftio/quikdown">quikdown</a> which has no dependancies and starts at 9-15KB with some limits on less used commond mark features.</p><p><strong>GitHub:</strong><a href="https://deftio.github.io/squibview/examples/example_ESM.html"><strong>Live Demo</strong></a> | <a href="https://deftio.github.io/squibview/examples/"><strong>Examples</strong></a> | <a href="https://deftio.github.io/squibview/docs/home.html"><strong>Documentation</strong></a> | <a href="https://deftio.github.io/squibview/docs/programmers-guide.html"><strong>API Reference</strong></a><br><strong>Local:</strong><a href="./examples/example_ESM.html"><strong>Live Demo</strong></a> | <a href="./examples/"><strong>Examples</strong></a> | <a href="./docs/"><strong>Documentation</strong></a> | <a href="./src/"><strong>Source</strong></a></p><img src="./squibview-demo.gif" alt="SquibView Live Demo - Progressive markdown rendering showing headings, bullets, tables, diagrams, math, and maps" width="100%"><h2>What It Does</h2><p>SquibView renders Markdown (or HTML) with live preview and allows editing in both source and rendered views. Changes sync automatically between views.</p><p><strong>Key Capabilities:</strong></p><ul><li>Edit markdown and see live HTML preview</li><li>Edit in the rendered view - changes reflect back to markdown</li><li>Full revision history with undo/redo</li><li>Visual diff comparison between any revisions</li><li>Export/copy as HTML with embedded images (including diagrams, pics, maps, 3D, editable tables and source code)</li><li>Works as CLI tool or JavaScript component</li><li>Streaming support for use with LLMs</li><li>Examples with Vue and React in addition to pure js</li></ul><p><strong>Supported Content:</strong></p><ul><li>📊 Mermaid diagrams, flowcharts, sequence diagrams</li><li>🗺️ GeoJSON/TopoJSON interactive maps</li><li>🧮 LaTeX math equations</li><li>📐 STL 3D models</li><li>📈 CSV/TSV tables</li><li>🎨 SVG graphics</li><li>🖼️ Images with base64 conversion</li><li>💻 Syntax-highlighted code</li></ul><h2>Quick Start</h2><h3>Browser - Zero Configuration Quick Start</h3><p>The easiest way to get started - with fence libraries (math, mermaid, etc) loading automatically from CDN when your content needs them. Special care is taken to not load dependancies that may have already been provisioned so there is no double-loading.</p><div data-source-type="html"><pre><code class="hljs language-html" data-source-type="code" data-lang="html"><span class="hljs-comment"><!-- SquibView CSS --></span><span class="hljs-tag"><<span class="hljs-name">link</span><span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span><span class="hljs-attr">href</span>=<span class="hljs-string">"https://unpkg.com/squibview/dist/squibview.min.css"</span>></span><span class="hljs-tag"><<span class="hljs-name">script</span><span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></span><span class="language-javascript"><span class="hljs-keyword">import</span><span class="hljs-title class_">SquibView</span><span class="hljs-keyword">from</span><span class="hljs-string">'https://unpkg.com/squibview/dist/squibview.esm.min.js'</span>;
0 commit comments