Skip to main content
Craft Agent goes beyond plain text. Your conversations can include interactive data tables, diagrams, styled HTML, PDFs, and code diffs — all rendered natively with no setup required.

​
Data Tables

When the agent presents structured data, it uses interactive datatable blocks instead of static markdown tables. You get:
  • Click column headers to sort ascending/descending
  • Type to filter across all columns
  • Smart formatting — currencies, percentages, dates, and status badges are rendered with appropriate styling
"Show me our top 10 customers by revenue"
The agent returns a sortable table with columns like Revenue ($4,200,000), Growth (+15.2% in green), and Status (colored badges) — not just raw numbers.

​
Column Types

TypeWhat it doesExample
textPlain textJohn Doe
numberFormatted with commas1,500,000
currencyDollar formatting$4,200,000
percentColored percentage+15.2% (green) or -3.0% (red)
booleanYes/No displayYes / No
dateFormatted dateJan 15, 2025
badgeColored status pillActive, Pending

​
Spreadsheets

For financial reports or data you might want to export, the agent uses spreadsheet blocks — Excel-style grids with row numbers and column letters. 
"Create a Q4 revenue report by region"
The result looks like a real spreadsheet and can be exported as .xlsx or .csv directly from the conversation.

​
Diagrams

Craft Agent renders Mermaid diagrams as beautiful themed SVGs. The agent uses these proactively when explaining architecture, data flows, or relationships. 
"Show me how the authentication flow works in our app"

​
Supported Diagram Types

Flowcharts

Process flows, decision trees, system architecture

Sequence Diagrams

API interactions, request/response flows, protocol sequences

Entity Relationship

Database schemas, data models, table relationships

State Diagrams

State machines, workflow transitions, lifecycle states

Class Diagrams

Object models, inheritance hierarchies, interfaces

Charts

Bar charts, line charts for metrics and trends

​
HTML Preview

When the agent works with rich HTML content — emails, newsletters, styled reports — it renders them inline as live previews rather than converting to plain text. 
"Show me the latest marketing email from Gmail"
The HTML renders in a sandboxed iframe, preserving all CSS styling, table layouts, and formatting. This is particularly useful for:
  • Email bodies from Gmail or Outlook
  • HTML reports from analytics tools
  • Newsletter previews with complex layouts
  • Styled documents where markdown would lose formatting

​
Tabbed Views

When you have multiple related items (like an email thread), the agent shows them as tabs — click to switch between the original, replies, and forwards.

​
PDF Preview

PDF documents are displayed inline with the first page visible and an expand button for full multi-page navigation. 
"Show me the Q4 financial report PDF"
The agent can also display multiple PDFs as tabs — useful for comparing quarterly reports or contract versions side by side.

​
Code Diffs

When the agent modifies files, it shows changes as unified code diffs — a familiar format with red (removed) and green (added) lines, making it easy to review exactly what changed. 
"Refactor the authentication module to use async/await"
The diff view shows precisely which lines were changed, added, or removed — no guessing about what the agent did.
The agent picks the best format automatically based on the data:
  • Structured data (rows and columns) → datatable or spreadsheet
  • Relationships or flows → Mermaid diagram
  • Rich HTML content (emails, reports) → HTML preview
  • PDF files → PDF preview
  • Code changes → unified diff
  • Simple text → regular markdown
You can also ask for a specific format: “show this as a spreadsheet” or “draw a diagram of this”.
Spreadsheet blocks include export functionality — you can download the data as .xlsx or .csv. Datatable blocks are optimised for viewing and filtering rather than export.
For datasets with 20+ rows, the agent writes the data to a file and references it instead of including all rows inline. This keeps conversations fast and responsive even with thousands of rows.