## Read first

Publish editable `.jsx`: YAML metadata fence, self-contained HTML and kit JSX, Tailwind `className`. Datasets/media. Local/offline editing needs no remote API.

https://dashverse.artifactbin.dev: use an already installed runnable CLI (`afbin`); otherwise use [HTTP](https://dashverse.artifactbin.dev/llms/http-api). npx downloads the CLI; not installed. CLI: `--server https://dashverse.artifactbin.dev`. HTTP: ask email, request auth, ask emailed OTP and wait for the user’s reply before verification; [auth](https://dashverse.artifactbin.dev/llms/http-auth).

Setup: https://dashverse.artifactbin.dev/getting-started.md. Load skill or https://dashverse.artifactbin.dev/skills/artifactbin.zip; restart. No files: https://dashverse.artifactbin.dev/llms.txt. Download ≠ load.

- Install CLI only when requested or needed for local preview/serve: [setup](https://dashverse.artifactbin.dev/llms/npm-local).
- `afbin status`: saved state (last observed, no login); `afbin auth status` is not a status command.
- CLI chat: ask email, `afbin auth --email <email>`, ask code, `afbin auth --email <email> --otp <code>`. Automatic browser approval only on shared desktop/request. Reuse origin-scoped credentials ([auth](https://dashverse.artifactbin.dev/llms/publishing-auth)); never mint or print tokens.
- [Groups](https://dashverse.artifactbin.dev/llms/groups).
- For a supplied artifact: `afbin pull <url-or-id> --output report.jsx`, edit, `afbin push report.jsx`. For a new artifact: CLI or HTTP [authoring](https://dashverse.artifactbin.dev/llms/http-authoring). Share its returned URL. URL-only requests get the URL alone.
- Shared/friends/team/signup/vote/RSVP flows: read [apps](https://dashverse.artifactbin.dev/llms/apps) BEFORE data shape: accounts, never typed names.
- Read your [page type](https://dashverse.artifactbin.dev/llms/templates); choose ONE design system. Within six calls of reading the artifact, publish a first version with metadata, title, real opening copy and one substantive section; extend it in later edits. Push confirms source acceptance; do not pull, diff or grep just to reconfirm it.
- Existing artifacts: prefer named [queries](https://dashverse.artifactbin.dev/llms/publishing-query); preserve source. CLI: `afbin query ID --name tasks`; `afbin query ID --write --name change_status`. Inspect params.
- Sessions are browser/UI QA for newly authored or changed `<Mutation>`, local state and row/cell context actions: [live sessions](https://dashverse.artifactbin.dev/llms/live-sessions). Test each identity’s authorized isolated copy, then original `--as guest` (writes off). One session at a time. Stop once each works once per identity.
- CLI: `afbin add <files> --json` assigns IDs; `afbin preview report.jsx` runs until Ctrl+C, never `preview && push`. Push validates/publishes.
- Every body element keeps its persistent `id` for its lifetime. Move with the same id; never reuse an id.
- Only allowlisted tags; no `<form>`.
- Use `<Markdown>` for long prose on any page type: headings, paragraphs and lists together; HTML for individually designed text.
- Use Helmet `<script>` (Solid, npm) for behaviour; exported components mount by name. No CDN scripts; `<Helmet>` holds CSS.
- Preserve exactly the identity fields returned; never add `version` when absent. `version` is an optional historical selection, distinct from `head_version`. Fork: remove `id`, `edit_id`, `head_version`, `state`, `version`.
- Short [copy](https://dashverse.artifactbin.dev/llms/copy); preserve facts/caveats.
- Check numerical claims against query results: values/ratios/ranges. Charts encode every named series. Label assumptions about process/causes; never dataset facts.
- Publishing does not verify appearance: one whole-document/all-slide export. CLI `afbin export <artifact-url> --output out.png`; URL/`--refresh` uses server, files/IDs local. [Export](https://dashverse.artifactbin.dev/llms/publishing-versions).
- At 390px, fix overflow, clipping and unreachable controls. Use numeric roles for figures, text roles for prose; stack crowded stats. (`afbin help live-sessions`).
- On refusal, follow instructions. Conflicts preserve files; after an uncertain write repeat the same command and arguments.

HTTP [graph](https://dashverse.artifactbin.dev/llms/http-document-graph); same rules.

Reference: afbin help. `afbin -h` / `afbin help <topic>`: offline. `afbin help`: this file’s location.

## Example

Keep content away from viewport edges.

```jsx
---
# CLI maintains id, edit_id, head_version, state and version.
title: Q3 sales review
template: dashboard
theme: volta
visibility: unlisted
---
<Helmet>
<title>Q3 sales review</title>
<style>{`.kpi { letter-spacing: -0.02em } /* custom CSS lives here */`}</style>
{/* afbin add sales.csv --json gives its ref:<id> (abc123 here); SQL reads sales.rows. */}
<Import name="sales" src="ref:abc123" />
{/* $region is reader state; data="$monthly" binds query rows to the view. */}
<Value name="region" type="string" />
<Query name="regions">{`select distinct region from sales.rows order by 1`}</Query>
<Query name="monthly">{`
select month, sum(revenue) as revenue from sales.rows
where $region is null or region = $region group by 1 order by 1
`}</Query>
<Query name="by_region">{`select region, sum(revenue) as revenue from sales.rows group by 1 order by 2 desc`}</Query>
{/* Tasks: afbin help users; columns id:number, title:string, status:string,
assignee:user. Replace ntf123 with that published dataset's ID. */}
<Import name="tasks" src="ref:ntf123" />
<Value name="task_id" type="number" default={1} />
<Value name="status" type="string" default="Done" />
<Mutation name="change_status" expectedAffected={1}>{`
update tasks.rows set status = $status where id = $task_id
`}</Mutation>
<Notify name="status_notice" on="change_status">{`
select assignee as "to", 'Task ' || title || ' is now ' || status as message
from tasks.rows where id = $task_id
`}</Notify>
</Helmet>
{/* static JSX, className; no CDN scripts; persistent id. */}
<div data-design="tw" className="@container px-4 py-8 @2xl:px-8">
<header className="max-w-prose">
<h1 className="text-3xl @2xl:text-5xl font-bold">Revenue grew in every region but one</h1>
<p>Container prefixes like @2xl: start at phone width.</p>
</header>
<Select label="Region" value="$region" options="$regions" placeholder="All regions" />
<Grid mode="flow" className="mt-6">
<GridItem w={4}>
<Card><CardHeader><CardTitle>Total revenue</CardTitle></CardHeader>
<CardContent className="kpi text-4xl font-semibold">
<Number data="$monthly" col="revenue" agg="sum" prefix="$" format=",.0f" />
</CardContent></Card>
</GridItem>
<GridItem w={8}>
{/* Vega-Lite or shipped recipes, never hand-rolled <svg>. */}
<Question title="Revenue by month" data="$monthly" height="320px"
viz={{"kind":"vega-lite","spec":{"mark":"line","encoding":{"x":{"field":"month","type":"temporal"},"y":{"field":"revenue","type":"quantitative"}}}}} />
</GridItem>
</Grid>
<h2 className="mt-8 text-2xl font-semibold">By region</h2>
<DataTable data="$by_region" height="240px" />
<Button run="$change_status">Complete selected task</Button>
</div>
```

## Read next

- [design](https://dashverse.artifactbin.dev/llms/design).
- [markup](https://dashverse.artifactbin.dev/llms/markup); [data](https://dashverse.artifactbin.dev/llms/markup-data).
- [page types](https://dashverse.artifactbin.dev/llms/templates): read `references/templates-<name>.md` BEFORE writing. [design systems](https://dashverse.artifactbin.dev/llms/design-systems).
- [sync and recovery](https://dashverse.artifactbin.dev/llms/publishing).
- [errors](https://dashverse.artifactbin.dev/llms/errors).
- [comments](https://dashverse.artifactbin.dev/llms/publishing-annotations); posts/replies use `--agent <name>`; [monitoring](https://dashverse.artifactbin.dev/llms/monitoring).
- [datasets/media](https://dashverse.artifactbin.dev/llms/publishing-datasets), [catalogs](https://dashverse.artifactbin.dev/llms/databases), [lambdas](https://dashverse.artifactbin.dev/llms/lambdas).
- [commands](https://dashverse.artifactbin.dev/llms/commands); [saved-view wireframes](https://dashverse.artifactbin.dev/llms/review-state); [Markdown import](https://dashverse.artifactbin.dev/llms/markdown).