Artifacts

Subcategory

Formats

Interactive data visualizations and editors

12 patternsArtifacts
CSV Editor Artifact preview

CSV Editor Artifact

Spreadsheet editor with AI chat for data analysis and manipulation. Edit tables through conversation.

aitable+7
View pattern →
Chart Artifact preview

Chart Artifact

Generate burn rate charts and financial analysis through AI chat. Creates interactive visualizations from conversation.

aiartifacts+5
View pattern →
Agent Sheet Artifact preview

Agent Sheet Artifact

Template-style sheet artifact with data-sheetDelta streaming, CSV grid editor, in-memory versions, and quick prompts — no database persistence.

aispreadsheet+5
View pattern →
Agent XLSX Artifact preview

Agent XLSX Artifact

Download-first Excel artifact pattern. The agent streams CSV through a tool call, renders a spreadsheet preview, and exports a real .xlsx file with SheetJS.

aiexcel+6
View pattern →
Agent DOCX Artifact preview

Agent DOCX Artifact

Download-first Word artifact pattern. The agent streams Markdown through a tool call, renders a document preview, and exports a real .docx file.

aiword+6
View pattern →
Agent PDF Artifact preview

Agent PDF Artifact

Download-first PDF artifact pattern. The agent streams Markdown through a tool call, renders a live PDF preview, and exports a real .pdf file.

aipdf+5
View pattern →
Agent Slides Artifact preview

Agent Slides Artifact

Template-style slide deck artifact with data-slidesDelta streaming, sortable slide list and preview, Markdown export, in-memory versions, and quick prompts — no database persistence.

aislides+5
View pattern →
Agent Text Artifact preview

Agent Text Artifact

Template-style text artifact with data-textDelta streaming, ProseMirror Markdown editor, in-memory versions, and quick prompts — no database persistence.

aimarkdown+4
View pattern →
Agent Code Artifact preview

Agent Code Artifact

Template-style code artifact with data-codeDelta streaming, CodeMirror Python editor, Pyodide run, in-memory versions, and quick prompts — no database persistence.

aipython+5
View pattern →
Agent Mermaid Artifact preview

Agent Mermaid Artifact

Template-style Mermaid artifact with data-mermaidDelta streaming, diagram preview and source editor, SVG/PNG export, in-memory versions, and quick prompts — no database persistence.

aimermaid+5
View pattern →
Agent Map Artifact preview

Agent Map Artifact

Template-style GeoJSON map artifact with data-mapDelta streaming, MapLibre preview and JSON source editor, GeoJSON export, in-memory versions, and quick prompts — no database persistence.

aimap+6
View pattern →
Canvas Draw Artifact preview

Canvas Draw Artifact

Excalidraw whiteboard artifact with data-whiteboardDelta streaming, uncontrolled canvas, SVG/PNG/.excalidraw export, scene templates (architecture, user flow, org chart), and in-memory versions — no database persistence.

aiexcalidraw+6
View pattern →

Explore more

Related patterns

JSON Render Email preview

JSON Render Email

Generate production-ready React Email templates with live preview plus copyable HTML and plain-text output.

json-renderreact-email+3
View pattern →
JSON Render Shadcn preview

JSON Render Shadcn

AI-generated UI using @json-render/shadcn. Describe a UI in natural language and watch it render with shadcn components.

json-rendershadcn+3
View pattern →
JSON Render Three.js preview

JSON Render Three.js

AI-generated 3D scenes using @json-render/react-three-fiber. Describe environments, meshes, and lighting to stream live Three.js renders you can orbit immediately.

json-renderthreejs+3
View pattern →
JSON Render Data Table preview

JSON Render Data Table

AI-generated data tables using json-render. Describe columns, rows, sorting, and filters — stream specs into an interactive DataTable with toolbar satellites.

json-renderdata-table+3
View pattern →
JSON Render React preview

JSON Render React

AI-generated UI from natural language using @json-render. Describe a UI and watch it stream in progressively with shadcn components.

json-renderai+3
View pattern →
JSON Render PDF preview

JSON Render PDF

Generate PDF documents from natural language using @json-render/react-pdf. Describe a document or refine examples to create professional PDFs with streaming spec and live preview.

json-renderpdf+3
View pattern →

More in Artifacts

JSON Render

AI-generated UI from natural language with json-render

8 patternsView →

You’ve reached the end of Formats.