Artifact Types

CRHQ supports several artifact types, each with its own rendering and interaction capabilities. Every type — regardless of how it renders — supports Refresh, automatic versioning, and (for shareable types) public links.

HTML Artifacts

The most versatile type. Agents create HTML artifacts for:

• Dashboards — Data visualizations with charts and metrics
• Reports — Formatted documents with tables and styling
• Interactive tools — Forms, calculators, configuration interfaces
• Landing pages — Marketing pages, previews, prototypes

HTML artifacts render in a sandboxed live preview with full CSS and JavaScript support. The toolbar offers a Preview / Code toggle so you can switch between the rendered output and the raw source. Always built to be mobile-responsive.

Shareable.

Markdown Documents

Markdown content (.md files, language: markdown, or document artifacts) renders as styled text by default. The toolbar offers a Preview / Code / Edit toggle:

• Preview — The rendered markdown with formatted headings, lists, tables, code blocks, links
• Code — The raw # Heading source for direct inspection
• Edit — A live editor (when the artifact is editable). Save writes back to disk for file-backed artifacts and creates a new version automatically

Defaults to Preview when first opened.

Code / File Content

Code files render as syntax-highlighted artifacts:

• Full syntax highlighting for all major languages
• Language auto-detected from file extension
• Refresh button to reload from the file system
• Editable when the file extension is in the editable list (.md, .txt, .json, .yaml, .html, .css, .js, .ts, .jsx, .tsx, …) — saves write to disk and bump the version

Diff Artifacts

Before committing code changes, agents can show a diff artifact:

• Side-by-side or unified view of changes
• Color-coded additions (green) and deletions (red)
• File-by-file breakdown
• Useful for reviewing changes before approving commits

React Applications

Agents can build interactive React components that render live in the artifact panel as self-contained apps with full React 19 support. The toolbar offers a Preview / Code toggle the same way HTML artifacts do.

Shareable.

Images

Screenshots, diagrams, and generated images display in the artifact panel with:

• Zoom and pan
• Full-resolution viewing
• Download capability

Shareable.

What every type has in common