TLDR-TV

a react audio player with kokoro tts, word-synced transcripts, and sqlite

Docs · Architecture · Extension

Node 24 or newer.

git clone https://github.com/stevederico/tldr-tv.git
cd tldr-tv
npm install
npm run start

In another terminal:

cd backend && cargo run

Open http://localhost:5173/app/home. Vite is on :5173 and proxies /api, /audio, and /images to the Rust API on :8000.

On first boot the server copies backend/.env.example to backend/.env if that file is missing. Replace JWT_SECRET before you turn sign-in on.

Listen to an essay while the transcript tracks every word.

• Word-level sync highlights each spoken word and seeks when you click one
• Live captions sit over the audio in sentence-sized chunks
• Chapter visuals pair a title, quote, image, and caption with each section
• Progressive audio starts from GET /api/guides/:slug/stream.mp3 while speech is still rendering

• Catalog lists every guide: title, author, duration, thumbnail, chapter count
• Create a video from a URL or pasted text at /app/home
• Play one guide at /app/:slug

• Local Kokoro (ONNX Kokoro-82M) speaks the transcript. Speech does not call a remote model
• Title first — audio, captions, and the reader open on the guide title
• Article analysis uses Grok for summary, chapters, and images. Set XAI_API_KEY for that step only

• TLDR this article extracts visible page text, creates a guide, and plays it in a floating player
• No paywall bypass — only text already in the page, or a selection you highlighted
• Load it from extension/README.md

• TypeScript strict with npm run typecheck before build and test
• Node test runner for scripts and player helpers (npm test)
• cargo test --locked for the Rust API
• Vite proxies /api, /audio, and /images to the backend in dev

Edit src/constants.json. noLogin is true, so the library stays open without an account.

{
  "appName": "TLDR-TV",
  "tagline": "Essays and books with live word-synced transcripts and chapter visuals",
  "cta": "Browse Library",
  "noLogin": true
}

backend/config.json picks the database. SQLite is the default.

{
  "staticDir": "../dist",
  "database": {
    "db": "App",
    "dbType": "sqlite",
    "connectionString": "./databases/App.db"
  }
}

backend/.env (gitignored) holds secrets. Start from backend/.env.example:

JWT_SECRET=change-me-to-a-long-random-string
STRIPE_KEY=
STRIPE_ENDPOINT_SECRET=
XAI_API_KEY=
FREE_USAGE_LIMIT=20

Stripe keys are optional. This app does not sell a subscription (stripeProducts is empty). XAI_API_KEY is only for article analysis and images.

Three parts. skateboard-ui owns routing, auth, and theme. This repo owns the library, the player, and speech. constants.json owns names, nav, and whether login is on.

Guides live in the SQLite Guides table, not in static JSON. MP3s and images sit under backend/public/{audio,images}/. The Rust server sends them with Range support so playback can seek. In production the same process serves the built SPA from dist/.

createSkateboardApp({
  constants,
  appRoutes: [
    { path: 'home', element: <LibraryView /> },
    { path: ':slug', element: <PlayerView /> },
  ],
  overrides: { layout: MinimalLayout },
});

Content shape, endpoints, and the speech pipeline: docs/SCHEMA.md, docs/API.md, docs/ARCHITECTURE.md.

See docs/DEPLOY.md. The Dockerfile in this repo builds a single image that serves the SPA and the API.

git clone https://github.com/stevederico/tldr-tv.git
cd tldr-tv
npm install
npm run start
cd backend && cargo run
npm test
cd backend && cargo test --locked

• X: @stevederico
• Issues: GitHub Issues

• React — UI
• Vite — dev server and build
• Tailwind CSS — styling
• Rust — HTTP API, with SQLite and libcurl as system libraries
• Kokoro — local speech model
• skateboard-ui — app shell and shadcn primitives
• shadcn/ui — component design
• Lucide — icons

• skateboard — React boilerplate with auth and payments
• skateboard-ui — shell, theme, and components

npm run install-all && npm run start

MIT License — see LICENSE.