StreamOtter — Live Browser State Toolkit

Installable package on npm · Website and live demo · Documentation · Source code

I built StreamOtter, an open-source toolkit connecting Kafka-backed application state to the browser, with a Node.js gateway, TypeScript browser SDK, command-line tools and a local workbench. The product is published on npm; the website and demo make its behavior easier to explore.

A real-time interface needs more than a moving number: it needs to tell the user whether the information is current. StreamOtter gives application developers a defined path from server-side state to a browser view, including what happens when a connection drops or the data source becomes unavailable.

The gateway consumes Kafka and runs application-owned authentication, authorization, mapping and snapshot handlers. The browser SDK subscribes to named state channels, receives an initial snapshot and then full-state updates in revision order, and exposes explicit live and stale states. Browser applications connect to the gateway rather than consuming Kafka topics directly.

I also developed the surrounding developer workflow: a CLI for scaffolding, validation, type generation and gateway startup; a local workbench for inspecting channels and delivery; and shared contracts that keep configuration and types consistent. The all-in-one streamotter package brings those components together, while individual packages support separate frontend and gateway installations.

I treated recovery, access boundaries and developer usability as part of the product. Snapshot synchronization, reconnection and bounded delivery have explicit behavior rather than leaving each application to improvise it. Fixture-based development, a reference application, automated checks and integration guides help another developer understand, test and adopt the toolkit.

The screenshots connect the public explanation to the live demonstration and integration material. This is independently developed open-source product work, with published release-candidate packages. The portfolio demonstrates the software and its developer experience; it does not claim customer deployments or measured commercial outcomes.