{"id":24979589,"url":"https://github.com/deftio/squibview","last_synced_at":"2025-07-28T16:09:12.089Z","repository":{"id":274389855,"uuid":"922733074","full_name":"deftio/squibview","owner":"deftio","description":"SquibView is a JavaScript control for live-rendering Markdown, HTML, and other formats It supports source-only, rendered-only, and split-view modes, with real-time updates across all views. Rendered output supports code syntax highlighting, Mermaid.js diagrams, SVG and more. SquibView renders source changes on the fly.","archived":false,"fork":false,"pushed_at":"2025-07-22T22:31:10.000Z","size":116654,"stargazers_count":2,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-22T22:39:27.445Z","etag":null,"topics":["geojson","github-flavored-markdown","html","javascript","live-preview","markdown","markdown-editor","mathjax","mermaid-diagrams","mermaidjs","npm-package","open-source","renderer","rich-text-editor","split-view","svg","syntax-highlighting","topojson"],"latest_commit_sha":null,"homepage":"https://deftio.github.io/squibview/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deftio.png","metadata":{"files":{"readme":"README-old.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-27T00:09:37.000Z","updated_at":"2025-07-22T22:31:15.000Z","dependencies_parsed_at":"2025-01-27T02:29:48.651Z","dependency_job_id":"306188f6-7fb6-44c8-a5b6-bcf36eddd6cd","html_url":"https://github.com/deftio/squibview","commit_stats":null,"previous_names":["deftio/squibview"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/deftio/squibview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fsquibview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fsquibview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fsquibview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fsquibview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deftio","download_url":"https://codeload.github.com/deftio/squibview/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deftio%2Fsquibview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267544020,"owners_count":24104679,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["geojson","github-flavored-markdown","html","javascript","live-preview","markdown","markdown-editor","mathjax","mermaid-diagrams","mermaidjs","npm-package","open-source","renderer","rich-text-editor","split-view","svg","syntax-highlighting","topojson"],"created_at":"2025-02-04T01:19:50.177Z","updated_at":"2025-07-28T16:09:12.077Z","avatar_url":"https://github.com/deftio.png","language":"JavaScript","readme":"# SquibView\n\n[![NPM Version](https://img.shields.io/npm/v/squibview.svg)](https://www.npmjs.com/package/squibview)\n[![License](https://img.shields.io/badge/License-BSD_2--Clause-orange.svg)](LICENSE)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/deftio/squibview/ci.yml?branch=main\u0026style=flat\u0026logo=github\u0026label=Build\u0026color=blue)](https://github.com/deftio/squibview/actions/workflows/ci.yml)\n\n[Live Demo (github)](https://deftio.github.io/squibview/examples/example_ESM.html)\n\n[Live Demo (local)](./examples/example_ESM.html)\n\n\nSquibView is a headless JavaScript embeddable editor/viewer that renders GitHub-Flavored Markdown (or full HTML pages) on the fly.\n\nFor Markdown inputs, it supports rendering Mermaid diagrams, GeoJSON/TopoJSON maps, STL 3D models, math equations, syntax-highlighted code blocks, tables, CSV data, and inline SVG graphics. This provides a powerful and interactive way to view and export Markdown content as HTML.\n\nFor HTML inputs, it embeds the content within an iframe for viewing.\n\nSquibView supports full cut-and-paste functionality and allows edits made in the rendered view to be reflected back in the source.\n\n\u003cimg src=\"./squibview-example.png\" alt=\"SquibView Example\" width=\"100%\"\u003e\n\n## Quick Start\n\n### CLI Usage (Fastest Way)\n```bash\nnpx squibv document.md\n```\n\n### Component Usage (Easiest for Web)\n```html\n\u003cscript src=\"https://unpkg.com/squibview/dist/squibview.standalone.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/squibview/dist/squibview.min.css\"\u003e\n\n\u003cdiv id=\"editor\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    const editor = new SquibView({\n        element: document.getElementById('editor'),\n        content: '# Hello World\\n\\nThis is **SquibView** in action!'\n    });\n\u003c/script\u003e\n```\n\n## Where to Go Next\n\n- **[➡️ Get Started Using SquibView](./docs/guides/01-quick-start.md)** - Fast track to getting SquibView running\n- **[➡️ Want to Contribute?](./CONTRIBUTING.md)** - Help improve SquibView\n\n## Key Features\n\n- **Live Preview**: See the rendered HTML output in real-time as you edit your Markdown.\n- **Multiple Views**: Switch between Markdown editor, HTML preview, or split view using simple buttons.\n- **Graphical Content**: Render visual content including:\n  - **Mermaid Diagrams**: Flowcharts, sequence diagrams, and more\n  - **GeoJSON/TopoJSON Maps**: Interactive maps with Leaflet.js\n  - **STL 3D Models**: Three.js-powered 3D model viewer\n  - **ASCII-SVG Graphics**: Convert ASCII art to SVG diagrams\n  - **Inline SVG**: Direct SVG graphics rendering\n- **Data Visualization**: Render CSV/TSV/PSV tables directly with clean formatting\n- **Mathematical Content**: Render Math equations from LaTeX and MathJax directly\n- **Syntax Highlighting**: Code blocks are automatically highlighted using Highlight.js.\n- **Table Styling**: Tables are rendered cleanly with improved readability.\n- **Easy Export**: Export or copy the generated HTML for use in other projects or documentation.\n- **Text Selection API**: Detect and manipulate selected text in both source and rendered panels.\n- **Bidirectional Editing**: Make changes in either the source or rendered view and see them reflected in both panels.\n- **Revision History**: Track changes with undo/redo functionality.\n- **Plugin System**: Extend functionality with custom plugins and renderers.\n- **Image Handling**: Control how images are displayed in source view and when copying content.\n- **Standard Markdown Line Breaks**: SquibView follows standard Markdown behavior for line breaks.\n    - A single newline in your source Markdown is treated as a soft break and will typically render as a space, not a new line, if it's within the same paragraph.\n    - To force a hard line break (inserting a `\u003cbr\u003e` tag), end a line with two or more spaces.\n    - To start a new paragraph (wrapping content in `\u003cp\u003e` tags), leave a blank line between blocks of text.\n    - Example:\n      ```markdown\n      # Title\n      This is line one.··\n      This is line two (after two spaces, so it's a hard break).\n\n      This is a new paragraph.\n      This line is part of the new paragraph.\n      ```\n      (In the example, `··` represents two spaces.)\n\n## Web Viewer\n\nSquibView can be used as a standalone tool for processing complex Markdown output (e.g., from LLMs like OpenAI, Claude, Mistral, or Deepseek) or as a simple live preview Markdown editor.\n\n## As a Component\n\nAs an embeddable component, SquibView allows your application to render complex Markdown or other content on the fly. It can dynamically switch between a split-screen view (source and output) or an output-only view, serving effectively as a renderer.\n\n## Command Line Interface\n\nSquibView includes a powerful CLI tool for converting Markdown files to high-quality HTML documents with all the advanced features (math, diagrams, code highlighting, tables).\n\n```bash\n# Quick start with npx\nnpx squibv document.md\n\n# Advanced usage\nnpx squibv document.md --bundle-offline -o report.html\n```\n\n**Key Features:**\n- 🚀 **Rich Content**: Math equations, Mermaid diagrams, GeoJSON maps, STL 3D models, CSV tables, ASCII-SVG graphics\n- 📦 **Offline Ready**: Bundle all dependencies for air-gapped environments  \n- 🎨 **Professional**: Clean default styling with custom CSS support\n- ⚡ **Fast**: Quick conversion with watch mode for development\n\n➡️ **[Complete CLI Documentation](./docs/squibv.md)**\n\n## Installation and Usage\n\n### Using Build Files\n\nSquibView offers multiple build formats for different use cases:\n\n#### ESM (ES Modules)\n\n```html\n\u003c!-- Required dependencies --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/mermaid/dist/mermaid.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- SquibView CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"../dist/squibview.css\"\u003e\n\n\u003c!-- ESM Import --\u003e\n\u003cscript type=\"module\"\u003e\n  import SquibView from '../dist/squibview.esm.min.js';\n  \n  const editor = new SquibView('#editorContainer', {\n    titleShow: true,\n    titleContent: \"SquibView Editor\"\n  });\n  \n  // Set content\n  editor.setContent('# Hello SquibView\\n\\nThis is a test.', 'md');\n\u003c/script\u003e\n```\n\n#### UMD (Universal Module Definition)\n\n```html\n\u003c!-- Required dependencies --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.3.2/markdown-it.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/mermaid/dist/mermaid.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/tiny-emitter@2.1.0/dist/tinyemitter.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/diff-match-patch@1.0.5/index.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/turndown@7.1.2/dist/turndown.js\"\u003e\u003c/script\u003e\n\n\u003c!-- SquibView CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"../dist/squibview.css\"\u003e\n\n\u003c!-- UMD Import --\u003e\n\u003cscript src=\"../dist/squibview.umd.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const editor = new SquibView('#editorContainer', {\n    titleShow: true,\n    titleContent: \"SquibView Editor\"\n  });\n  \n  // Set content\n  editor.setContent('# Hello SquibView\\n\\nThis is a test.', 'md');\n\u003c/script\u003e\n```\n\n#### Standalone (All Dependencies Bundled)\n\n```html\n\u003c!-- SquibView CSS --\u003e\n\u003clink rel=\"stylesheet\" href=\"../dist/squibview.css\"\u003e\n\n\u003c!-- Standalone Import (includes all dependencies) --\u003e\n\u003cscript src=\"../dist/squibview.standalone.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const editor = new SquibView('#editorContainer', {\n    titleShow: true,\n    titleContent: \"SquibView Editor\"\n  });\n  \n  // Set content\n  editor.setContent('# Hello SquibView\\n\\nThis is a test.', 'md');\n\u003c/script\u003e\n```\n\n### Build Formats Comparison\n\n| Format | File Size | Dependencies | Use Case |\n|--------|-----------|--------------|----------|\n| ESM | Smaller | Required externally | Modern applications with bundlers |\n| UMD | Medium | Required externally | Traditional script tags, CommonJS |\n| Standalone | Larger | Included | Quick prototypes, no external dependencies |\n\n### Using via CDN\n\nSquibView is available via CDN (unpkg) and as an npm package.\n\n## Examples\n\nSee the [examples folder](./examples)\n\n#\n## Configuration Options\n\nSquibView can be configured with various options when initializing:\n\n```javascript\nconst editor = new SquibView('#editorContainer', {\n  // Basic options\n  initialContent: '',           // Initial content to load\n  inputContentType: 'md',       // Type of content ('md', 'html', 'reveal', 'csv', 'tsv')\n  showControls: true,          // Whether to show control buttons\n  titleShow: false,            // Whether to show the title section\n  titleContent: '',            // Content for the title section\n  initialView: 'split',        // Initial view mode ('src', 'html', 'split')\n  baseClass: 'squibview',      // Base CSS class for styling\n  \n  // Image handling\n  preserveImageTags: true,     // Default: true. Whether to keep original image URLs in source view.\n                               // When true: images remain as \u003cimg\u003e tags with original URLs in the source view.\n                               // When false: images are converted to data URLs in the source view.\n                               // Note: For clipboard operations (copy), images are always converted to data URLs\n                               // to ensure portability, regardless of this setting.\n  \n  // Text replacement\n  onReplaceSelectedText: null  // Callback for text replacement on selection\n});\n```\n\n**Detailed Example: Image Handling with `preserveImageTags`**\n\nThe `preserveImageTags` option provides fine-grained control over how image `src` attributes are handled within the source view and during copy-to-clipboard actions. By default (`true`), SquibView keeps external image links as they are in your source Markdown, which is often preferred for readability and maintainability of the source. When set to `false`, images are converted to inline data URLs directly in the source view upon rendering. Regardless of this setting, when content is copied to the clipboard, images are always converted to data URLs to ensure maximum portability and that the images are embedded within the copied content.\n\n```javascript\n// Create editor with default image handling (preserves original URLs in source view)\nconst editor1 = new SquibView('#editor1'); // preserveImageTags defaults to true\n\n// Create editor that converts images to data URLs in source view\nconst editor2 = new SquibView('#editor2', {\n  preserveImageTags: false\n});\n\n// Set content with images\nconst markdown = `\n# Image Example\n\n![Local Image](./images/example.png)\n![Remote Image](https://example.com/image.jpg)\n`;\n\neditor1.setContent(markdown, 'md');\n// In editor1's source view, images will keep their original URLs (e.g., './images/example.png').\n// If content from editor1 is copied, the images in the clipboard HTML will use data URLs.\n\neditor2.setContent(markdown, 'md');\n// In editor2's source view, images will be converted to data URLs (e.g., 'data:image/png;base64,...').\n// If content from editor2 is copied, the images will also use data URLs.\n```\n\n## Getting Started\n\n**Clone the Repository:**\n```bash\ngit clone https://github.com/deftio/squibview.git\ncd squibview\n```\n\n**Running the Examples:**\nThe `examples/` directory contains various HTML files demonstrating different SquibView features and build types.\nTo run them:\n1. Navigate to the `examples/` directory.\n2. Open any of the `*.html` files (e.g., `example_ESM.html`) in your web browser.\n\nYou can typically do this by double-clicking the file or using \"Open with\" from your file explorer.\nOnce an example is open:\n- You can switch view modes (source, rendered, split) using the control buttons.\n- For Markdown examples, enter your GitHub-Flavored Markdown into the editor on the left (in split or source view).\n- The right side (in split or rendered view) will update live, showcasing diagrams, code highlighting, and other features.\n\n## Testing\n\nSquibView uses Jest for unit/integration tests and Puppeteer for End-to-End (E2E) tests.\n\n*   **Unit/Integration Tests:**\n    *   These tests check individual modules and their interactions. They provide code coverage reports.\n    *   Run with: `npm run test`\n    *   Coverage reports are generated in the `coverage/` directory. Open `coverage/lcov-report/index.html` to view detailed coverage.\n\n*   **End-to-End (E2E) Tests:**\n    *   These tests run against a live instance of the application, simulating user interaction in a browser (using Puppeteer).\n    *   They verify that the built application works as expected.\n    *   Run with: `npm run test:e2e`\n    *   **Note:** This script starts its own `http-server` on port 8000. Ensure this port is free before running.\n\n*   **Run All Tests (Recommended before releases):**\n    *   To ensure all checks pass, run both test suites sequentially.\n    *   Command: `npm run test:all` \n\n## Contributing\n\nContributions are welcome! Whether you're adding new features, fixing bugs, or improving documentation, please follow these guidelines:\n\nFork the Repository: Click the \"Fork\" button on GitHub to create your own copy.\n\n**Create a Branch:**\n```bash\ngit checkout -b feature/your-feature-name\n```\n\n**Commit Your Changes:** Make your changes and commit them with a clear message.\n\n```bash\ngit commit -m \"Add description of changes\"\n```\n\n**Push to Your Fork:**\n\n```bash\ngit push origin feature/your-feature-name\n```\n\n**Open a Pull Request:** Go to the original repository on GitHub and open a pull request from your fork's branch. Provide a clear description of your changes and why they're useful.\n\nPlease make sure your contributions follow the project's coding style and that tests pass, if applicable.\n\n## License\n\nThis project is licensed under the BSD-2 License. See the LICENSE file for details.\n\nTo use it, you can include the standalone UMD build from the `dist` folder:\n\n```html\n\u003cscript src=\"../dist/squibview.standalone.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nOr from a CDN like unpkg:\n\n```html\n\u003cscript src=\"https://unpkg.com/squibview@latest/dist/squibview.standalone.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeftio%2Fsquibview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeftio%2Fsquibview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeftio%2Fsquibview/lists"}