preview-artifact

Pretifact

Pretifact opens the artifacts your coding agents produce (plans, design docs, audit reports, papers) in the browser — read them beautifully, edit them in place, save back to disk, and live-reload when an agent rewrites the file.

Handles Markdown (.md), LaTeX (.tex), and PDF (.pdf), with a light and dark theme.

Fully local. No cloud, no telemetry, no account.

Quick start

Step 1 — add the skill so your agent (Claude Code, Cursor, …) opens artifacts for you:

npx skills add anup-a/preview-artifact

Step 2 — install the CLI (the engine the skill runs):

npm install -g pretifact

That's it — the next time your agent writes a plan, it opens it in your browser. (Prefer to run it yourself? pretifact open file.md.)

Screenshots

In the wild — an agent finishes a design doc and opens it in Pretifact:

Editorial read view — serif display type, warm paper, orange frame:

Side panel — open several artifacts at once and switch between them, plus recently-opened history (collapsible, closed by default):

Rich markdown — images, headings, and a live mermaid diagram, GFM tables, task lists and KaTeX math:

LaTeX (.tex) — equations typeset by KaTeX over highlighted source:

WYSIWYG edit mode (Milkdown) with the YAML frontmatter split into its own panel:

Why

Terminal markdown is hard to read and IDE preview is read-only & bland. AI artifacts are code-heavy — fenced code, mermaid diagrams, GFM tables, YAML frontmatter, task lists — and deserve a real reading surface you can also edit.

Features

• Read mode — rich typography (GitHub markdown CSS), syntax-highlighted code (highlight.js), rendered mermaid diagrams, GFM tables and task lists, KaTeX math ($…$ / $$…$$), and images (remote URLs plus local files resolved relative to the document, in both read and edit modes).
• LaTeX (.tex) — display equations typeset by KaTeX with the rest shown as highlighted LaTeX source; editable and saveable as plain source.
• PDF (.pdf) — embedded read-only viewer.
• Edit mode — Milkdown (ProseMirror) WYSIWYG that round-trips markdown faithfully. YAML frontmatter is split into its own panel so the editor can never corrupt it.
• Side panel — open several artifacts at once (pretifact open a.md b.tex c.pdf), switch between them, and pick from recently-opened history. Updates live as the agent opens more. Collapsible.
• Save — writes back to the same file. Cmd/Ctrl+S.
• Live-reload — a file watcher pushes external changes over a websocket; if you have unsaved edits it asks before discarding them.
• Toggle — Cmd/Ctrl+E flips Read ⇄ Edit.

Install

Requires Node ≥ 18.

npm install -g pretifact

# latest from GitHub
npm install -g github:anup-a/preview-artifact

# local clone (for development) — npm install runs the build automatically
git clone https://github.com/anup-a/preview-artifact.git
cd preview-artifact && npm install && npm link

Usage

pretifact open path/to/file.md   # open in the browser
pretifact open a.md b.tex c.pdf  # open several into the side panel
pretifact path/to/file.md        # shorthand
pretifact open file.md --no-open # start server without launching a browser
pretifact stop                   # stop the daemon
pretifact --help

Use it from any project — it's not tied to any particular repo.

Use it from your coding agent

This tool is meant to be launched by your agent when it finishes writing an artifact. The CLI self-daemonizes and returns immediately, so agents just run it — no backgrounding needed. It ships as a skill that the model auto-invokes when you ask to preview something or after it writes a plan (no slash command to remember). See AGENTS.md for details.

CLI vs skill. The pretifact npm package is the actual program (it runs the viewer). The skill is just instructions telling the agent when to run it — installing the skill alone is enough: on first use it runs npm install -g pretifact for you if the CLI is missing. Prefer the CLI directly? Just npm install -g pretifact and skip the skill.

Claude Code (plugin — recommended)

Install the plugin from this repo's marketplace; it ships the skill, which then auto-invokes:

/plugin marketplace add anup-a/preview-artifact
/plugin install preview-artifact@preview-artifact