# Streaming

@pretable/stream-adapter wires any async data source to a grid — one reducer, one render path.


`@pretable/stream-adapter` wires any async data source to a Pretable grid. It treats a 1,000-patch/sec stream and a static array of rows as the same input shape — one reducer, one render path, one selection model. There's no "streaming mode" toggle.

## Pick the shape that matches your source

<Tabs>
  <Tab label="Element streams">
    Use `connectElementStream` when the source emits **one full row per chunk** — LLM Responses elements, SSE messages where each event is a complete row, paginated REST results streamed in.

    ```ts
    import { connectElementStream } from "@pretable/stream-adapter";

    connectElementStream(stream, {
      onElement: (row) => grid.applyTransaction({ add: [row] }),
    });
    ```

  </Tab>
  <Tab label="Partial streams">
    Use `connectPartialStream` when **a single row grows over time** — a token-streamed assistant message, an incrementally-parsed JSON object, a row whose `latencyMs` ticks up as the request is in-flight.

    ```ts
    import { connectPartialStream } from "@pretable/stream-adapter";

    connectPartialStream(stream, {
      getRowId: (chunk) => chunk.id,
      onPatch: (patch) => grid.applyTransaction({ update: [patch] }),
    });
    ```

  </Tab>
</Tabs>

<Callout type="tip">
  Both helpers share the same back-pressure model: the engine batches
  transactions to one render per animation frame. Selection survives every
  patch.
</Callout>

## Next

<CardGroup cols={3}>
  <Card title="Element streams" href="/docs/streaming/element-streams">
    The full `connectElementStream` API and reconnect semantics.
  </Card>
  <Card title="Partial streams" href="/docs/streaming/partial-streams">
    `connectPartialStream`, patching a row as it grows.
  </Card>
  <Card title="Parsers" href="/docs/streaming/parsers">
    Lower-level `parseElement` / `parsePartial` if you're feeding the engine
    yourself.
  </Card>
</CardGroup>