For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/streaming-text.md.
A3S UI
  • English
  • next

      • Streaming Text

      Maintains a stable reading region while content arrives incrementally and distinguishes streaming, paused, complete, and failure states.

      Live preview
      Checking package contracts and visual statesReceiving verified output…

      Usage

      <output class="streaming-text" data-state="streaming" aria-live="polite">
  <span data-streaming-content>Checking package contracts and visual states</span><span data-streaming-status>Receiving verified output…</span>
</output>

      Standalone controller

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/streaming-text";

const component = document.querySelector(".streaming-text");
component.getState();

      The controller is idempotent; the complete package can instead import @a3s-lab/ui/all once. The host performs permission and business validation through cancelable before-* events.

      Contract

      SurfaceValue
      Root selector.streaming-text
      Native root<output>
      Statesstreaming, complete, paused, error
      Eventsa3s:streaming-text-complete, a3s:streaming-text-update
      Methodsappend, complete, getState, setText

      Product boundary

      It opens no network connection, parses no rich text, and never scrolls a parent automatically. Transport, abort, retry, and trusted rendering belong to the host.

      The component publishes a reusable interaction boundary only. Data fetching, persistence, permission, trusted content, and business entities remain host-owned.

      Accessibility

      Updates use a polite live region and reduced motion retains a static status cue. Completion and failure have readable text rather than relying on a blinking caret.