01
Client rendered
Vite SPA
Remote set hydration, syntax switching, and animation control in a minimal React 19 application.
npm run dev --workspace @react-7tv/example-vite- src/App.tsx
- src/main.tsx
- src/styles.css
Copy, run, remix
Four environments.
No mystery glue.
Each example is a complete, production-buildable app in the repository. Install once at the root, then run the workspace you want to inspect.
02
React Server Components
Next.js App Router
Fetch with the server-safe /core entry, then pass serializable data into an interactive client boundary.
npm run dev --workspace @react-7tv/example-next- app/page.tsx
- app/EmoteMessage.tsx
- app/styles.css
03
Framework-mode SSR
React Router
Load the emote set in a route loader, server render it, and hydrate the same component tree.
npm run dev --workspace @react-7tv/example-react-router- app/routes/home.tsx
- app/root.tsx
- react-router.config.ts
04
Hydrated island
Astro + React
Keep the marketing shell static while hydrating only the interactive React emote playground.
npm run marketing:dev- src/pages/index.astro
- src/components/Playground.tsx
- astro.config.mjs