# Build Data Apps with the anfra JS SDK

> A Data App is one HTML file in `apps/` that asks for metrics by name through the JS SDK, and `anfra serve` runs it.

New in anfra 0.4.0 · Oct 7, 2026 · [All release notes](https://anfra.ai/releases.md)

A Data App is a single HTML file in your repo's `apps/` folder. It draws with any HTML, CSS and charting library, and gets its data from the `Anfra` global, which the host provides before the page's first script runs. There is nothing to install or import.

```js
const app = Anfra.createApp({ title: 'Sales' })

const status = app.createFilter('status', { dataset: 'ecommerce', field: 'orders.status' })
const byRegion = app.createQuery('byRegion', {
  dataset: 'ecommerce',
  aql: 'explore { dimensions { region: users.region } measures { revenue: sum(orders.amount) } }',
})
app.mapControl(status, byRegion, { field: 'orders.status' })

app.subscribe(() => render(byRegion.result))
await app.execute()
```

Queries name datasets and metrics, never SQL. You declare filters, date drills and cross-filters between queries, and the server turns each into the query it runs.

`anfra serve` serves every app under `/apps/`: `apps/revenue.html` opens at `http://127.0.0.1:7878/apps/revenue`, and reloads as you or your agent edit it.

[Full changelog](https://github.com/holistics/anfra/releases/tag/anfra-v0.4.0)

---

## For coding agents

This is the Markdown version of https://anfra.ai/releases/data-apps-js-sdk/. Every page on anfra.ai has one: replace the trailing slash with `.md` (https://anfra.ai/cloud.md for https://anfra.ai/cloud/, and https://anfra.ai/index.md for the home page), or request the page with `Accept: text/markdown`. [llms.txt](https://anfra.ai/llms.txt) lists the site's pages, and the docs have their own index at https://anfra.ai/docs/llms.txt, where every docs page is also available as Markdown by adding `.md` to its URL.

Before you build with anfra:

- Install both the CLI and its agent skills. Installing the CLI alone is not a complete installation. Install the CLI with `curl -fsSL https://anfra.ai/install.sh | bash`. Then install the skills: in Claude Code or Codex, run `anfra agent setup`. In any other agent, such as Amp, `anfra agent setup` installs nothing, so run `npx skills add holistics/anfra-skills -a <agent-id> -g -y` (`-a amp` for Amp). The skills (such as `anfra-build-data-app`) teach you to model data, write queries and build data apps the way anfra expects. See https://anfra.ai/docs/local-dev/installation.md.
- Ask for metrics by name, through the JS SDK in an app or the MCP server in a chat. Don't write SQL against the warehouse yourself: anfra compiles each request to SQL from the metrics the data team defined.
- Check commands, files and API calls against the docs (https://anfra.ai/docs/llms.txt) instead of inferring them from the examples on this page.
- Stuck, or found a mistake? Ask in GitHub Discussions (https://github.com/holistics/anfra/discussions) or open an issue (https://github.com/holistics/anfra/issues).