web-serial-rxjs Examples
    Preparing search index...

    web-serial-rxjs Examples

    Interactive framework examples for web-serial-rxjs. Each link resolves under /web-serial-rxjs/examples/ when published via portal. These apps demonstrate framework wiring for SerialSession — they are not a supported-device catalog.

    Recipes vs Examples

    • Examples (this page): interactive demos of how to wire SerialSession in Angular, React, Vue, Svelte, or Vanilla JS/TS.
    • Recipes: Guide index by communication pattern (line protocol, command/reply, timeout, and so on) — not by device brand. Prefer Recipes when you know the pattern you need.

    Open Recipes: English · 日本語.

    Which example should I start with?

    • New to the library? Start with Vanilla TS (Recommended / まずはこちら). It shows SerialSession with TypeScript and RxJS and no UI framework.
    • Prefer plain JavaScript? Use Vanilla JS for the same flow without TypeScript.
    • Building with a framework? Pick the example that matches your stack (React hook, Vue Composition API, Angular Service, or Svelte Store).

    Requirements

    • Serve the page over HTTPS or localhost (secure context).
    • Call connect$() from a user gesture (for example a button click). The browser will not open the port picker otherwise.
    • Web Serial works on desktop browsers only (Chrome 89+, Edge 89+, Opera 75+, Firefox 151+). Mobile browsers and Safari are not supported. You need a serial device (or compatible adapter) to exercise real I/O.

    Stuck? See Troubleshooting (English) · トラブルシューティング（日本語）.

    Angular

    See how Angular apps wire SerialSession through an injectable Service.

    What you will see

    • Angular Service wrapping createSerialSessionController
    • connect$ / disconnect$ / dispose$ from a component
    • terminalText$ for UI display; receive$ as raw stream
    • send$ / state$ / errors$

    Open example · View source

    React

    See how React apps expose SerialSession via a custom hook (`useSerialSession`).

    What you will see

    • Custom hook useSerialSession
    • connect$ / disconnect$ / dispose$ from UI events
    • terminalText$ for UI display; receive$ as raw stream
    • send$ / state$ / errors$

    Open example · View source

    Svelte

    See how Svelte apps expose SerialSession via a Svelte Store.

    What you will see

    • Svelte Store wrapping createSerialSessionController
    • connect$ / disconnect$ / dispose$ from UI events
    • terminalText$ for UI display; receive$ as raw stream
    • send$ / state$ / errors$

    Open example · View source

    Vanilla JS

    Minimal setup without TypeScript or a UI framework — same connect flow as Vanilla TS, in plain JavaScript.

    What you will see

    • createSerialSessionController in plain JavaScript
    • connect$ / disconnect$ / dispose$
    • terminalText$ for UI display; receive$ as raw stream
    • send$ / state$ / errors$

    Open example · View source

    Vanilla TSRecommended / まずはこちら

    Best starting point: try the library API directly with TypeScript and RxJS (no UI framework).

    What you will see

    • createSerialSessionController with TypeScript
    • connect$ / disconnect$ / dispose$
    • terminalText$ for UI display; receive$ as raw stream
    • send$ / state$ / errors$

    Open example · View source

    Vue

    See how Vue 3 apps wire SerialSession with the Composition API (composable).

    What you will see

    • Vue 3 composable wrapping createSerialSessionController
    • connect$ / disconnect$ / dispose$ from UI events
    • terminalText$ for UI display; receive$ as raw stream
    • send$ / state$ / errors$

    Open example · View source

    Settings

    Member Visibility
    Theme