Turn Data Into a Mac Dashboard With Claude Code

Short answer: install the FavTray Skill, then ask Claude Code or Codex to “make this an artifact in FavTray”. The skill turns your data into one JSON file, checks it, and drops it into FavTray’s Import inbox. Click Import and FavTray draws it as a native Mac dashboard: stat cards, tables, charts, timelines and checklists on a 12-column grid that you can drag, filter and export as HTML.

TL;DR

• What it is: FavTray Artifacts renders one favtray-artifact/1 JSON file as a dashboard. There’s no code to run and no server.
• Who writes it: Claude Code or Codex, through the FavTray Skill. You can also start a blank one and add blocks by hand.
• What you can do with it: edit mode (drag, resize, hide columns, change chart kind), chip filters, hover read-outs, HTML export, and in-place updates with sourceKey.
• Price: Free makes 2 artifacts, and Pro is unlimited. The skill and Import need a paid license and aren’t in the trial.

What is a FavTray artifact?

It’s a JSON file that describes a page as a list of blocks. Each block has a type and a span from 1 to 12 columns, and blocks flow left to right like a CSS grid. Two blocks with span: 6 sit side by side. FavTray reads the file and draws each block with native Mac views. You get one file per artifact in ~/.config/FavTray/Artifacts.

Here’s a small but complete one:

{
  "schema": "favtray-artifact/1",
  "id": "art_7f3k2q9x1b0c",
  "title": "Weekly AI spend",
  "icon": "📈",
  "createdAt": "2026-09-28T09:00:00+05:30",
  "updatedAt": "2026-09-28T09:00:00+05:30",
  "sourceKey": "ai-spend:weekly",
  "layout": { "columns": 12 },
  "blocks": [
    { "id": "b_kpi", "type": "stats", "items": [
      { "label": "Spend", "value": 78.04, "format": "currency", "currency": "USD", "deltaPercent": 21.5, "tone": "negative" },
      { "label": "Tokens", "value": 48300000, "format": "compact" } ] },
    { "id": "spend", "type": "table", "span": 7, "totals": "auto", "columns": [
      { "key": "provider", "label": "Provider", "format": "text" },
      { "key": "usd", "label": "Spend", "format": "currency", "currency": "USD", "emphasis": true } ],
      "rows": [ { "provider": "Claude", "usd": 51.12 }, { "provider": "OpenAI", "usd": 19.11 }, { "provider": "Gemini", "usd": 7.81 } ] },
    { "id": "b_donut", "type": "chart", "span": 5, "kind": "donut", "title": "Share", "from": { "block": "spend", "label": "provider", "value": "usd" } }
  ]
}

The donut reads its data from the table, so if you filter or edit the table, the chart follows. (The numbers are sample data.)

You don’t have to write this by hand. The FavTray Skill knows the schema, picks the blocks and runs a validator before FavTray sees the file.

How do I make one with Claude Code or Codex?

1. Install the FavTray Skill. In FavTray, open Settings › Skills and click Install. FavTray copies the skill into Claude Code’s and Codex’s skills folders and nothing runs. After that it checks for skill updates once a day, and it never touches skills you installed yourself.
2. Ask for an artifact. In Claude Code or Codex, paste the data or point at a file, and say “make this an artifact in FavTray”. A broker’s CSV export, a JSON API response, meeting notes and a sprint plan all work. Name the thing you want to see if it matters to you: “a donut by model”, “a funnel from visit to purchase”.
3. The skill writes and validates the file. It chooses blocks (stat cards for headline numbers, a table for records, a date-axis line for a trend), writes the JSON, and runs validate.py until the file passes with no errors. Then it places the file in FavTray’s Import inbox.
4. Click Import. The Artifacts screen shows a banner with what arrived. Nothing is added until you click Import.
5. Open it. The artifact opens as a canvas. Hover a chart for exact values, pick a chip to filter, or click Edit to rearrange it.

The same skill builds Projects boards, Notes pages and reminders when the request is a plan rather than a dataset.

What can I change once it’s in FavTray?

Click Edit on the canvas:

• Move a block by dragging its grip onto another block.
• Resize by dragging the right edge, or with − and +, from 1/12 to 12/12.
• Rename the artifact and block titles inline; edit heading, text and callout text in place.
• Columns shows or hides table columns. Hidden columns still sort, filter and feed charts.
• Chart kind switches a chart among the kinds that read the same rows, say bar to donut to treemap.
• Duplicate or delete a block, or Add block from Text (heading, text, callout, quote, list, checklist, code, divider) or Data (stats, progress, table, chart, timeline, key–value).

Edits save to the JSON file after a short pause. FavTray keeps any keys it doesn’t recognise, so a file written by a newer skill isn’t damaged by an older app. Ticking a checklist item writes done back to the file too.

How do chip filters and hover work?

A heading chip can be a dropdown bound to a table column: All equity / Stocks / ETFs, or All / Claude / OpenAI. Picking an option filters the table’s rows, recomputes an "auto" totals row, redraws every chart that reads that table, and updates any {count} in the heading. The pick is view state, so nothing is written to the file.

Every chart has a read-out on hover:

• Line and area charts show a crosshair with each series’ value.
• Bars show the value and its share of the stack.
• A donut puts the slice’s value in the centre.
• A treemap outlines the tile.

Focus a chart and the arrow keys step through the same read-out. Past eight categories, a pie or treemap folds the tail into one grey Other · N slice, and its tooltip lists what’s inside.

Which blocks and charts are there?

Block	Use it for
stats	3–5 headline numbers, with delta, % badge and sparkline
table	Records: currency, percent, compact, bytes, duration, date; status pills, badges, links, sparklines, progress bars, check marks; sort, search, totals, thresholds
chart	Bar, line, area, stacked bar, pie, donut, treemap, funnel, scatter, heatmap
progress	Goals as bars or rings, with a target marker
timeline	Milestones, or phases drawn Gantt-style
checklist	Action items with owner and due date
heading, text, callout, quote, list, kv, code, image, divider	The words around the numbers

Green and red are kept for gains and losses. Status pills, callouts and progress use status colours, never a series colour, and there are no dual axes.

How do I share or update an artifact?

• Export HTML: Share › Export HTML… writes one self-contained file with no network calls. It renders with the same formats, palette, folding, filters, sorting and hover as the app. You can see a sample export.
• Copy JSON or Reveal JSON in Finder from the same menu.
• Update in place: add a sourceKey like holdings:broker and ask for the artifact again next week. Import replaces the artifact with that key (same id, same file) instead of adding a second copy.
• Edit the file directly: the Artifacts folder is watched, so a file rewritten in place re-renders.

What do people build?

• Portfolio holdings: profit and loss coloured by sign, a totals row, a treemap of weights, a stocks/ETFs chip (with en-IN for lakh and crore).
• Launch dashboard: KPIs with sparklines, a traffic line, a visit-to-purchase funnel, a launch checklist.
• AI cost report: spend by provider with weekly-limit bars, spend by day as a stacked bar, a donut by model. For live limits, the AI Usage Tracker already does this without an artifact.
• Sprint status: status pills, progress rings, a burndown line, a timeline.
• Disk report, meeting summary, comparison matrix, runbook, habit tracker: a nested treemap in bytes; decisions and a checklist with owners; a table with check marks and a scatter; numbered steps with Copy-able code; a calendar heatmap.

How does it work with Claude Code and Codex?

Claude Code or Codex builds the artifact, and FavTray keeps it on your Mac: personal, and there whenever you want it, one click from the menu bar. When your agent runs again with fresh data, click Import and the same artifact updates in place. If you built something in Claude first, see keep your Claude dashboards on your Mac. More options are in the best personal dashboard apps for Mac.

What does it cost?

Free creates or imports up to 2 artifacts, and anything you already have stays editable. Pro, a one-time Lifetime license for one Mac, is unlimited. The FavTray Skill and the Import inbox need a paid license and aren’t part of the 7-day trial; the trial covers everything else, including artifacts you start with New artifact.