Install:
npm install streamfieldRepo: github.com/midimurphdesigns/streamfield
Live playground: streamfield.kevinmurphywebdev.com
Read the full story: Building streamfield
A small React library for rendering Vercel AI SDK partial-object streams without the flicker. One component, one hook, three variants. Render-prop API. Published to npm; extracted from tablesalt, and used in production by tablesalt itself.
The problem it solves
If you use streamObject from the Vercel AI SDK, your fields snap into place jarringly as React re-renders. CSS transitions don't help: the DOM was always there; only the text changed. CSS animates property changes, not innerText swaps.
streamfield diffs successive snapshots, derives per-field pending, streaming, complete state, hands the state to children via render prop. You style transitions however you want, or import the bundled streamfield/styles.css for three opinionated variants: cascade, shimmer, underline-fill.
Usage
import { StreamingReveal } from 'streamfield';
import 'streamfield/styles.css';
<StreamingReveal stream={partial} variant="cascade" done={done}>
{(f) => (
<article>
<h2 data-streamfield-state={f.title?.state}>{f.title?.value}</h2>
<p data-streamfield-state={f.summary?.state}>{f.summary?.value}</p>
</article>
)}
</StreamingReveal>
How it's built
TypeScript strict, tsup build (ESM and CJS bundles with type definitions), React 18+ peer dep, ~6 KB CSS file if you opt into the bundled defaults. The useFieldStates hook is exported separately for consumers who want the state without the render-prop wrapper.
The docs site at streamfield.kevinmurphywebdev.com ships an interactive playground. A slider scrubs through synthetic partial-object frames so you can preview the three variants side-by-side without writing a single line of code.
Used in production
tablesalt depends on streamfield@^0.1.0 from npm. Its final streaming reasoning summary is rendered through <StreamingReveal variant="cascade">. Watch the agent answer a question on tablesalt.kevinmurphywebdev.com. The words landing one-by-one are streamfield in the wild.
Open source
MIT-licensed. npm install streamfield.