Getting startedHow it worksWhat worksConfigurationExamplesTroubleshooting

Examples

Run real apps locally and share them with DemoTape. Each example is a working project you can clone, run, and share in under a minute.

Start the app, run npx @demotape.dev/cli, and open the link on another device — phone, laptop, anything with a browser. DemoTape records the session so you can replay exactly what they did.

Start here (30 seconds)

React + Vite + Node API

The simplest multi-port example. A React frontend talks to an Express API — both detected and shared automatically.

The fastest way to see DemoTape in action. Run the app, share it with npx @demotape.dev/cli, and open the link on your phone.

Demonstrates: Multi-port auto-detection, frontend-to-API communication, session replay of real interactions
Stack: React, Vite, Express
Ports: Web :5173, API :3000
demotape-example-react-vite-node
npm run setup && npm run dev

# In another terminal:
npx @demotape.dev/cli

Core features

Each example answers a specific objection developers have before trying DemoTape.

Cookie + Header Rewrite

Sets httpOnly cookies and sends Authorization headers. Verifies that both survive proxying through DemoTape.

Your app uses cookies or auth headers? This proves they work through the proxy without any configuration.

Demonstrates: Cookies survive proxying, credentials: include works, auth headers forwarded
Stack: React, Vite, Express
Ports: Web :5173, API :3000
demotape-example-cookie-session

Location / URL Rewrite

Server-side 302 redirects, client-side React Router navigation, and deep links. All work correctly through the proxy.

Demonstrates: Redirects (302, Location headers) work, client-side routing preserved, deep links work
Stack: React, Vite, React Router, Express
Ports: Web :5173, API :3000
demotape-example-location-rewrite

Auth Flow

Full login/logout flow with JWT tokens and httpOnly cookies. Protected routes redirect unauthenticated users. Demo credentials: demo/demo.

Share your app with a tester and let them go through the real auth flow. Replay shows exactly how login, session persistence, and protected routes behave.

Demonstrates: Login works behind proxy, JWT + cookies persist, protected routes behave correctly
Stack: React, Vite, Express, JWT
Ports: Web :5173, API :3000
demotape-example-auth-flow

Docker Compose Multi-Service

A full-stack app with React, Express, PostgreSQL, and a background worker. Four containers, zero DemoTape configuration.

Your app runs four containers locally. Instead of asking someone to clone, install Docker, and set up the database — share it through one link.

Demonstrates: Works with realistic Docker environments, multiple containers, database-backed workflows
Stack: React, Vite, Express, PostgreSQL, Worker
Ports: Web :5173, API :3000
Services: web, api, db (PostgreSQL), worker
demotape-example-docker-compose

Realtime / WebSocket

A live chat room using Socket.io. Messages, typing indicators, and user presence — all through the proxy.

Your app uses WebSockets for live updates? This proves the connection survives the proxy. Replay captures the full sequence of realtime events.

Demonstrates: WebSocket connections survive proxying, live updates visible, bidirectional communication works
Stack: React, Vite, Express, Socket.io
Ports: Web :5173, API :3000
demotape-example-realtime

Real scenarios

These examples demonstrate why DemoTape exists — real problems that session replay solves.

Debugging Failures

An intentionally buggy app: random 500s, slow responses, race conditions, missing fields. Replay the exact failure sequence instead of guessing.

A tester says "it broke when I submitted the form." Instead of guessing, open the session replay and see the form values, the 500 error, the retry that caused a duplicate.

Demonstrates: Session replay captures exact failure sequences, flaky bugs become reproducible
Stack: React, Vite, Express
Ports: Web :5173, API :3000
Failure scenarios: Random 500 errors, Timeout / slow responses, Double-submit race condition, Missing field bug, UI state mismatch
demotape-example-debugging-failures

Client Demo Dashboard

A polished SaaS dashboard with analytics, settings, and data management. The real use case: send a client a link, see exactly what they clicked.

You are building a dashboard for a client. They want to see progress. Share the link — they browse on their own time. You see a session replay of what they did.

Demonstrates: Real use case: send to client, viewer shows what they clicked, no deployment needed
Stack: React, Vite
Ports: Web :5173
demotape-example-client-demo

Hot Reload

A themed hero page backed by an Express API. Edit code while someone is using the shared link — they see your changes instantly via Vite HMR.

Update your app locally while someone is using it. Changes appear instantly — no redeployment, no new link.

Demonstrates: Vite HMR works through proxy, live dev changes visible to viewer
Stack: React, Vite, Express
Ports: Web :5173, API :3000
demotape-example-hot-reload

Frameworks

DemoTape works with any framework that runs on localhost. These examples prove it.

Next.js

Next.js 15 with App Router. Server components fetch data at request time, client components handle forms. API routes serve JSON.

Demonstrates: SSR works through proxy, API routes function, cookies + headers in SSR context
Stack: Next.js 15, React 19
Ports: App :3000
demotape-example-nextjs

Next.js with Auth

Next.js middleware protects /dashboard routes. JWT in httpOnly cookies, verified in middleware and server components. Demo credentials: demo/demo.

Demonstrates: Next.js middleware works through proxy, server-side redirects, SSR session handling
Stack: Next.js 15, React 19, jose (JWT)
Ports: App :3000
demotape-example-nextjs-auth

SvelteKit

SvelteKit with server load functions and form actions. Proves DemoTape works beyond the React ecosystem.

Demonstrates: Non-React frameworks work, server + client routing, form actions
Stack: SvelteKit, Svelte 5
Ports: App :5173
demotape-example-sveltekit

Nuxt (Vue)

Nuxt 3 with server routes and Vue Composition API. SSR rendering and client-side navigation both work.

Demonstrates: Vue SSR apps work, broader framework compatibility
Stack: Nuxt 3, Vue 3
Ports: App :3000
demotape-example-nuxt

API Only (Swagger UI)

An Express API with Swagger UI — no frontend. Proves DemoTape is useful for backend developers sharing API documentation and endpoints.

Demonstrates: API-only apps work, Swagger UI accessible, REST endpoints function
Stack: Express, Swagger UI
Ports: API :3000
demotape-example-api-only

Quick reference

QuestionExample
“Will cookies/auth break?”cookie-session, auth-flow
“Will redirects work?”location-rewrite
“Will multi-service setups work?”docker-compose
“Is this actually useful?”debugging-failures, client-demo
“Does it support my stack?”nextjs, sveltekit, nuxt, api-only
“Will WebSockets work?”realtime
“Can I keep developing while sharing?”hot-reload