Necmttn

Real-time Effect span streaming to frontend UIs. Stream traces from any backend to React with zero overhead.

10
0
100% credibility
Found May 30, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

livetrace is an open-source library that streams real-time progress updates from backend workflows directly into React-based user interfaces. Developers wrap their existing Effect-based code with a simple function, and users immediately see every step—parsing documents, running AI agents, indexing data—as it happens in the browser. The library supports multiple transport options (SSE, WebSocket, durable streams) and requires zero Effect knowledge on the frontend, making it easy to add live progress UIs to any application.

How It Works

1
📚 You discover a library that shows your app's thinking

You hear about livetrace—a tool that lets your users watch what your backend is doing in real time, like peeking inside a black box.

2
🔧 You wrap your workflow in a simple wrapper

You add a single wrapper function around your existing code, and suddenly every step—parsing, embedding, searching—becomes visible to the outside world.

3
📡 You pick how events reach the browser

You choose a transport: simple one-way streaming, a two-way connection, or a durable log that survives page reloads. The library handles the wiring for you.

4
You add a few React hooks to your frontend
📄
Document processing

Show users a progress bar as a PDF gets parsed, chunked, embedded, and indexed—step by step as it happens.

🤖
AI agent pipelines

Let users watch an AI agent plan, search, rerank, and generate—streaming tokens and results in real time.

5
Your users watch everything happen live

As your backend works, cards appear on screen showing each step starting, running, and finishing—with logs and progress bars updating in real time.

🎉 Your users feel informed and confident

Instead of a spinning loader, users see exactly what's happening—every parse, every search, every token. They trust the system because they can see it working.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is livetrace?

Livetrace streams Effect span events from your backend to React in real-time. Wrap a workflow in `withTrace`, mount the React hooks, and your users see every span, log event, and progress update as it happens. Built in TypeScript on top of the Effect framework's tracer API, it wires through SSE, WebSocket, or Durable Streams transports so you pick the right protocol for your deployment without touching workflow code.

Why is it gaining traction?

The hook is showing users what the backend actually does. For AI applications -- RAG pipelines, agent tool calls, streaming answers -- this fills the gap between "submitted" and "done." You get the same observability data your monitoring stack collects, surfaced directly in the UI as live progress bars, step timelines, and a real-time log console. The transport interface is pluggable: SSE for simplicity, WebSocket for bidirectional needs, Durable Streams for multi-pod safety and resumable connections.

Who should use this?

Backend developers building on Effect who want to expose workflow progress to end users without a separate polling endpoint. Frontend devs integrating AI features (chunk streaming, token-by-token answers, tool call traces) who need a state bridge for real-time data. Teams already using Effect who want a readymade trace panel without wiring up OpenTelemetry collectors.

Verdict

At 10 stars and v0.1.0, livetrace is early but the API surface is coherent and the docs are solid. The transport abstraction and React hooks handle the hard parts cleanly. If you're on Effect and want live traces in the UI, it's worth a look -- just treat it as an early-stage dependency and watch the release cadence. The 1.0% credibility score reflects the project's infancy, not a fundamental flaw in the approach.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.