# Reactive

> Reactive turns a single Markdown document into a working, client-side web app — live data, forms, tables, charts and in-browser Python — with no server, no account and no build step. An app *is* a Markdown file.

This file helps third-party AI assistants generate valid Reactive apps. A Reactive app is plain Markdown plus a small set of directives that the browser compiles into an interactive app wired to a reactive data store (persisted in localStorage).

## Output format

Produce a SINGLE Markdown document. Optionally begin with YAML frontmatter:

```
---
appId: my-app            # stable kebab-case id (the data-store key)
title: My app
description: One sentence describing the app.
lang: it                 # or "en"
version: "1.0"
---
```

Then the body: a title, an optional intro line, and one or more data collections.

## Core building blocks

A collection = an input form that appends rows + a view that displays them.

```
:::form{path="spese" id="f1"}
::input{form="f1" field="voce" placeholder="Voce"}
::input{form="f1" field="importo" type="number" placeholder="Importo"}
::add-form{form="f1" path="spese" label="Aggiungi"}
:::

:::table{path="spese" headers="Voce,Importo" deletable="true" editform="f1"}
{voce} | {importo}
:::
```

- Views: `:::list` and `:::cards` use a row template with `{field}` placeholders; `:::table` splits cells with ` | ` and takes `headers="A,B"`.
- Reactive totals: `:sum[s]{path="spese" field="importo"}`, plus `:avg` `:min` `:max`, and `:count[n]{path="spese"}`.
- Inline reactive value: `:value[v]{ref="#id"}`.

## Rules (important — get these right)

1. ONLY `::input` feeds the form draft consumed by `::add-form`. Collection fields MUST be `::input` with `type` = text | number | date. (`::checkbox`/`::textarea` write elsewhere and won't be inserted into rows.)
2. Every stored value is a STRING. In Python, cast explicitly: `int(x)`, `float(x)`.
3. Reactive references use a leading `#`; the store key is the bare id (`ref="#volume"` ↔ key `volume`).
4. Python: use `:::python` blocks and declare packages with `packages` as a BARE comma-separated list, e.g. `packages="numpy,matplotlib"`.
5. Keep ids to a single word (letters/underscore).

## Reference

- Full syntax, inline for LLMs: https://reactivenet.ai/llms-full.txt
- Syntax guide: https://reactivenet.ai/guida/sintassi/
- Tag reference: https://reactivenet.ai/riferimento/tag/
- Ready-made app catalog: https://reactivenet.ai/app/

## Using the generated app

Paste the Markdown into https://app.reactivenet.ai (New app / Import), or share it as an `.md` file. Everything runs locally in the browser; data stays on the device.