# Your data

> Which components take your records through a data input, and which only show demo data and are templates.

Source: https://elements.lumesec.ai/docs/data



Every component runs on its own, so the ones that display records (series, rows, certificates, rules) come with demo data. The demo data is invented. It is there so a preview works, never to be shown to your users.

Each component page says, right under the preview, which kind it is:

* **Your data**: the component takes your records or values, through `data` or the attributes its note names. It shows demo data only until you pass them, and with your data nothing invented is mixed in: no generated values, no simulated live updates.
* **Demo data**: the component cannot show your own data yet. Some of them take a label or a single value, but the records they show are invented. Use them as templates: the source is yours, so replace the invented data before it shows anything real.

Components without a note display no data of their own, such as buttons, sliders and inputs.

## Passing data

Components with records to show take them as `data`, a property and an attribute. As a property it takes the records directly; as an attribute it takes the same records as JSON. The React wrappers accept arrays and objects and write the JSON for you.

```tsx title="React"
import { HfArea } from "@/components/lumesec/hf-area";

export function TokenUsage({ days }: { days: { date: string; value: number }[] }) {
  return <HfArea label="Tokens per day" data={days} />;
}
```

```html title="HTML"
<hf-area id="usage" label="Tokens per day"></hf-area>

<script type="module">
  const res = await fetch("/api/usage");
  document.getElementById("usage").data = await res.json();
</script>
```

`data` is observed: set it again and the component updates, animating where it can. Invalid entries are skipped, invalid JSON logs a warning, and an empty array shows an empty state rather than demo data. Each component page lists the exact record type under Attributes and Properties, and some add methods such as `push()` for live feeds.

Actions that would change your systems only fire an event once you pass your data. Your code performs the action and updates `data`; the component shows a pending state until then.

## Components that take your data

- [Rate-limit hourglass](https://elements.lumesec.ai/components/pixel-lab/hourglass.md) `<px-hourglass>`: Set `duration` to the seconds left until your limit resets; nothing else is shown.
- [Split-flap board](https://elements.lumesec.ai/components/pixel-lab/splitflap.md) `<px-splitflap>`: Pass your messages in `messages` or call `show()`. Without them the board cycles demo messages.
- [Materializing stream](https://elements.lumesec.ai/components/pixel-lab/materialize.md) `<px-materialize>`: Pass your sentence as `text`. Without it a sample sentence streams.
- [Secret field](https://elements.lumesec.ai/components/pixel-lab/secret.md) `<px-secret>`: Pass your key as `value`. Without it the field shows a fake demo key.
- [Status orb](https://elements.lumesec.ai/components/pixel-lab/orb.md) `<px-orb>`: Set the agent's state with `state`. Without it the orb starts at `thinking`.
- [Pixel reactions](https://elements.lumesec.ai/components/pixel-lab/react.md) `<px-react>`: Pass the starting reaction count as `count`. Without it the count starts at 128.
- [Pixel checklist](https://elements.lumesec.ai/components/pixel-lab/tasks.md) `<px-tasks>`: Pass your tasks in `items`. Without it the list shows demo tasks.
- [Notification bell](https://elements.lumesec.ai/components/pixel-lab/bell.md) `<px-bell>`: Pass the unread count as `count` and call `notify()` or `clearAll()`. Without it the bell starts at 2 unread.
- [Uptime history](https://elements.lumesec.ai/components/pixel-lab/uptime.md) `<px-uptime>`: Pass your daily uptime records per service as `data`. Without it the element shows demo services and statuses.
- [Progress](https://elements.lumesec.ai/components/pixel-hd/progress.md) `<hf-progress>`: Set `value` from 0 to 100, or omit it for an indeterminate bar. The bubbles are decoration, not data.
- [Gauge](https://elements.lumesec.ai/components/pixel-hd/gauge.md) `<hf-gauge>`: Set `value` (with `min`, `max` and `zones`). Without it the gauge shows a demo value.
- [Goal rings](https://elements.lumesec.ai/components/pixel-hd/rings.md) `<hf-rings>`: Pass up to three `Name:current/goal` rings as `rings`. Without it the rings show invented usage figures.
- [Countdown](https://elements.lumesec.ai/components/pixel-hd/countdown.md) `<hf-countdown>`: Set the duration in `seconds` or call `restart(seconds)`. Without it a demo countdown of 2 h 14 min 9 s runs.
- [Area chart](https://elements.lumesec.ai/components/pixel-hd/area.md) `<hf-area>`: Pass your daily values as `data`. Without it the chart shows demo data seeded from `label`.
- [Donut](https://elements.lumesec.ai/components/pixel-hd/donut.md) `<hf-donut>`: Pass your `Label:value` segments as `data` (and `total` for the centre). Without it the chart shows invented usage shares.
- [Stat tile](https://elements.lumesec.ai/components/pixel-hd/stat.md) `<hf-stat>`: Set `value`, `delta` and the sparkline `data`. Without them the tile shows a demo number, a demo delta and a generated sparkline.
- [Funnel](https://elements.lumesec.ai/components/pixel-hd/funnel.md) `<hf-funnel>`: Pass your `Label:count` stages as `data`. Without it the funnel shows invented visitor counts.
- [Bar list](https://elements.lumesec.ai/components/pixel-hd/barlist.md) `<hf-barlist>`: Pass your `label:value` rows as `data` (or the `items` property). Without it the list shows demo file names with invented edit counts.
- [Secret field](https://elements.lumesec.ai/components/pixel-hd/reveal.md) `<hf-reveal>`: Pass the value to hide as `secret`. Without it a demo API key is shown.
- [Range filter](https://elements.lumesec.ai/components/pixel-hd/range.md) `<hf-range>`: Pass your histogram as `data` and the count factor as `scale`. Without `data` the histogram is a generated demo distribution.
- [Filter chips](https://elements.lumesec.ai/components/pixel-hd/chips.md) `<hf-chips>`: Pass your chips and counts as `options` (`Label:count`). Without it the chips show demo languages with invented counts.
- [Diff review](https://elements.lumesec.ai/components/pixel-hd/diff.md) `<hf-diff>`: Pass your unified diff as the element's text content. Without it a built-in sample diff is shown.
- [Changed files](https://elements.lumesec.ai/components/pixel-hd/tree.md) `<hf-tree>`: Pass your changed files as `paths` (`path:M`, `:A` or `:D`). Without it a demo path list is shown.
- [PII redaction](https://elements.lumesec.ai/components/pixel-hd/redact.md) `<hf-redact>`: Pass your text as the element's text content and the names to redact as `names`. Without them a built-in sample is redacted.
- [Candlesticks](https://elements.lumesec.ai/components/pixel-hd/candles.md) `<hf-candles>`: Pass your OHLC candles as `data` and stream new ones with `push()`. Without it the chart shows a demo random walk that ticks live.
- [Live leaderboard](https://elements.lumesec.ai/components/pixel-hd/leaderboard.md) `<hf-leaderboard>`: Pass your rows as `data` (`{ name, value }`); they are ranked and re-ranked as you update them. Without it six demo teams receive random score increases.

## Components with demo data only

- [Agent workflow](https://elements.lumesec.ai/components/pixel-lab/agents.md) `<px-agents>`: The planner, the four agents and their run times are invented; nothing can be set.
- [Throughput gauge](https://elements.lumesec.ai/components/pixel-lab/gauge.md) `<px-gauge>`: The tokens-per-second reading is simulated; only `max` can be set.
- [Voice input](https://elements.lumesec.ai/components/pixel-lab/voice.md) `<px-voice>`: No microphone is used and the audio levels are generated; only the transcript can be set with `text`.
- [Model morph](https://elements.lumesec.ai/components/pixel-lab/model.md) `<px-model>`: The three models and their speed, depth and cost scores are invented; nothing can be set.
- [Fader & meter](https://elements.lumesec.ai/components/pixel-lab/fader.md) `<px-fader>`: The meter signal is simulated; only the fader position is a real control.
- [Histogram range](https://elements.lumesec.ai/components/pixel-lab/range.md) `<px-range>`: The response-time histogram and its run counts are invented; only the selected range is a real control.
- [Slide to deploy](https://elements.lumesec.ai/components/pixel-lab/deploy.md) `<px-deploy>`: The deploy run and the Live state are simulated on a timer, not on your deploy; only `version` can be set.
- [Activity heatmap](https://elements.lumesec.ai/components/pixel-lab/activity.md) `<px-activity>`: The daily activity counts are generated from each date; nothing can be set.
- [Storage ring](https://elements.lumesec.ai/components/pixel-lab/storage.md) `<px-storage>`: The storage categories and their sizes are invented; nothing can be set.
- [Latency scope](https://elements.lumesec.ai/components/pixel-lab/signal.md) `<px-signal>`: The latency samples, spikes and p50/p95 readout are simulated; nothing can be set.
- [Pixel upload](https://elements.lumesec.ai/components/pixel-lab/upload.md) `<px-upload>`: Nothing is uploaded and the progress is simulated; the file name and size come from the chosen file and `limit-mb` can be set.
- [Level up](https://elements.lumesec.ai/components/pixel-lab/xp.md) `<px-xp>`: The starting XP of 196 is invented; only `level` can be set and `gain()` adds to it.
- [Dissolve to delete](https://elements.lumesec.ai/components/pixel-lab/dissolve.md) `<px-dissolve>`: The five chats are invented; nothing can be set.
- [Release rocket](https://elements.lumesec.ai/components/pixel-lab/launch.md) `<px-launch>`: The countdown and the live state run on a timer, not on your release; only `version` can be set.
- [Radio tuner](https://elements.lumesec.ai/components/pixel-lab/tuner.md) `<px-tuner>`: The four radio stations are invented; nothing can be set.
- [Equalizer](https://elements.lumesec.ai/components/pixel-lab/eq.md) `<px-eq>`: The spectrum behind the bands is simulated; only the bands are a real control.
- [Jog wheel](https://elements.lumesec.ai/components/pixel-lab/jog.md) `<px-jog>`: The filmstrip footage and its length are generated; nothing can be set.
- [Context waffle](https://elements.lumesec.ai/components/pixel-lab/waffle.md) `<px-waffle>`: The starting context usage per source is invented; `add()` and `compact()` change it but it cannot be set.
- [LED ticker](https://elements.lumesec.ai/components/pixel-lab/ticker.md) `<px-ticker>`: The ticker items (model, latency, errors, agents, uptime) are invented; nothing can be set.
- [Service radar](https://elements.lumesec.ai/components/pixel-lab/radar.md) `<px-radar>`: The six service nodes and their latencies are invented; nothing can be set.
- [Waveform player](https://elements.lumesec.ai/components/pixel-lab/player.md) `<px-player>`: The track, its length and its waveform are invented and no audio plays; nothing can be set.
- [Request globe](https://elements.lumesec.ai/components/pixel-lab/globe.md) `<px-globe>`: The regions, the traffic between them, the latencies and the request counter are simulated; nothing can be set.
- [Code minimap](https://elements.lumesec.ai/components/pixel-lab/minimap.md) `<px-minimap>`: The code is generated sample JavaScript; only the search query can be set with `find()`.
- [Diffusion preview](https://elements.lumesec.ai/components/pixel-lab/diffusion.md) `<px-diffusion>`: The prompts and images are painted procedurally and no model is involved; nothing can be set.
- [Snake stepper](https://elements.lumesec.ai/components/pixel-lab/stepper.md) `<px-stepper>`: The five onboarding steps and their subtitles are fixed demo content; nothing can be set.
- [Usage battery](https://elements.lumesec.ai/components/pixel-lab/battery.md) `<px-battery>`: The usage level starting at 64% and the Monday 09:00 reset time are invented; nothing can be set.
- [Drop zone](https://elements.lumesec.ai/components/pixel-hd/dropzone.md) `<hf-dropzone>`: Upload progress is simulated on a timer; only the file names and sizes come from the files the user drops.
- [Pricing](https://elements.lumesec.ai/components/pixel-hd/pricing.md) `<hf-pricing>`: The `−20%` badge on Yearly is fixed text, not computed; plan, prices, currency and features can be set.
- [Context window](https://elements.lumesec.ai/components/pixel-hd/context.md) `<hf-context>`: The 200k window and its four segment sizes are invented; only `addTo()` and `compact()` change them.
- [Uptime](https://elements.lumesec.ai/components/pixel-hd/status.md) `<hf-status>`: Daily status and uptime are generated from a hash of `name`; only `incidents` and `state` override them.
- [Terminal](https://elements.lumesec.ai/components/pixel-hd/terminal.md) `<hf-terminal>`: Commands and their output are built-in demo content; `print()` adds your own lines.
- [Agent run](https://elements.lumesec.ai/components/pixel-hd/run.md) `<hf-run>`: Step durations are random and the token count is generated; only the step labels, `label` and the failing step can be set.
- [Streaming reply](https://elements.lumesec.ai/components/pixel-hd/stream.md) `<hf-stream>`: The streaming, its timing and the tokens-per-second figures are simulated; only the `text` can be set.
- [@mention field](https://elements.lumesec.ai/components/pixel-hd/mention.md) `<hf-mention>`: The six suggestions (files, people and an agent) are invented; only `label`, `placeholder` and `value` can be set.
- [Permission prompt](https://elements.lumesec.ai/components/pixel-hd/approve.md) `<hf-approve>`: It starts on, and its Next request button cycles through, four built-in demo requests; `request()` shows your own.
- [Agent graph](https://elements.lumesec.ai/components/pixel-hd/graph.md) `<hf-graph>`: The agent graph, its labels and the run timings (partly random) are invented; only `label` and `autoplay` can be set.
- [Checkpoints](https://elements.lumesec.ai/components/pixel-hd/rewind.md) `<hf-rewind>`: The five checkpoints and their code are invented; only `label` can be set.
- [Sources and citations](https://elements.lumesec.ai/components/pixel-hd/sources.md) `<hf-sources>`: The paragraph, citations and sources are invented; nothing can be set.
- [Usage heatmap](https://elements.lumesec.ai/components/pixel-hd/matrix.md) `<hf-matrix>`: The weekday-by-hour message and token counts are synthetic; only `label` can be set.
- [Scatter with brush](https://elements.lumesec.ai/components/pixel-hd/scatter.md) `<hf-scatter>`: The 270 runs in three model groups are seeded random points; only `label` can be set.
- [Flow](https://elements.lumesec.ai/components/pixel-hd/flow.md) `<hf-flow>`: The sources, models and 100k request split are invented; only `label` can be set.
- [Roadmap](https://elements.lumesec.ai/components/pixel-hd/gantt.md) `<hf-gantt>`: The six tasks, their dates and progress and the today line are invented; only `label` can be set.
- [Radial bars](https://elements.lumesec.ai/components/pixel-hd/radial.md) `<hf-radial>`: The monthly values for 2025 and 2026 and the highlighted current month are invented; only `label` can be set.
- [Logo marquee](https://elements.lumesec.ai/components/pixel-hd/marquee.md) `<hf-marquee>`: The ten wordmarks are fictional placeholder logos; only `label` can be set.
- [Kanban board](https://elements.lumesec.ai/components/pixel-hd/kanban.md) `<hf-kanban>`: The three columns and six cards are invented; nothing can be set.
- [Carousel](https://elements.lumesec.ai/components/pixel-hd/carousel.md) `<hf-carousel>`: The four slides, generated scenes with built-in captions, cannot be replaced; nothing can be set.
- [Product tour](https://elements.lumesec.ai/components/pixel-hd/spotlight.md) `<hf-spotlight>`: The mock app and its four tour steps are built in; nothing can be set.
- [Before and after](https://elements.lumesec.ai/components/pixel-hd/compare.md) `<hf-compare>`: The document and its personal data are invented; nothing can be set.