Any application that can be written in
JavaScriptReact, will eventually be written inJavaScriptReact.
React has become the default choice for AI when starting a new project. But its reach extends far beyond building web UIs. This repository collects the most unexpected, non-obvious, and boundary-pushing things you can build with React: from rendering video frames and generating PDFs, to controlling hardware and shipping Smart TV apps. If it can be described as a tree of components, React has probably been there already.
- 🎬 Video & Animation
- 🖥️ Terminal & CLI
- 🎨 Design Tools
- 📄 Documents & Emails
- 🎵 Audio & Music
- 🎮 Games & Interactive Graphics
- 🌐 3D & WebGL
- 📺 TV & Big Screens
- 🔌 Hardware & Physical World
- 🥽 XR, VR & Spatial Computing
- 🗺️ Maps & Geo
- 🤖 AI & LLM Interfaces
- 📊 Data Visualization
- 🧩 Node-Based Editors
- 🌀 Generative Art & Creative Coding
- 🧪 Custom Renderers & Experimental Targets
- 🤝 Contributing
React as a video production engine. Components describe frames, timelines, and motion — then get rendered to actual video files or animated sequences.
| Project | Description |
|---|---|
| Remotion | Programmatic video creation with React. Define animations as components and render them to MP4 using a headless browser. |
| React Spring | Physics-based spring animation library that models real-world motion in UI. |
| Framer Motion | Production-grade declarative animation library with gesture support and layout transitions. |
React's component model, hooks, and Flexbox layout — applied to the terminal. Build rich, interactive CLI tools as declarative component trees instead of imperative string manipulation.
| Project | Description |
|---|---|
| Ink | A React renderer for interactive command-line interfaces. Used in production by Gatsby, Parcel, Yarn 2, and Claude Code. |
| react-blessed | A React renderer targeting the blessed terminal UI library, enabling complex TUI layouts. |
| Pastel | A minimal CLI framework built on top of Ink, inspired by Next.js routing conventions. |
React components as the source of truth for design files. Instead of maintaining design and code separately, these tools render JSX directly into design tools.
| Project | Description |
|---|---|
| React Figma | A React renderer for Figma. Render React components directly into the Figma canvas via the Plugin API. |
| react-sketchapp | Render React components to Sketch documents, originally built by Airbnb to manage their design system. |
| Spectacle | A presentation framework that lets you build slide decks as React component trees. |
PDF generation, Word documents, and transactional HTML emails — authored as JSX and rendered server-side or in the browser.
| Project | Description |
|---|---|
| @react-pdf/renderer | A React renderer that produces PDF files. Supports flexbox-based layout, fonts, images, and SVG. |
| react-print-pdf | PDF generation from React components with support for page breaks, headers, footers, and print-ready output. |
| react-email | Build responsive, cross-client HTML emails using React components. Adopted by Vercel, Resend, and Linear. |
| docx | Generate .docx Word documents programmatically from JavaScript, composable with React for templated document generation. |
Declarative audio graphs, sequencers, and synthesizers. React's state and lifecycle management applied to the Web Audio API.
| Project | Description |
|---|---|
| Reactronica | React components for sequencing and playing music in the browser, built on the Tone.js audio framework. |
| React Music (archived) | Declarative music composition with React — define songs as component trees. |
React's reconciler managing game state, physics simulations, and 2D canvas scenes. Not the conventional path — but a proven one.
| Project | Description |
|---|---|
| react-konva | React bindings for the Konva 2D canvas library. Build interactive canvas scenes with shapes, drag-and-drop, and events — all declarative. |
| react-three-game | A game engine built on react-three-fiber, featuring physics integration, transform gizmos, and a level editor UI. |
Entire Three.js scenes expressed as JSX. Cameras, lights, meshes, and shaders — all managed through the React reconciler.
| Project | Description |
|---|---|
| react-three-fiber | A React renderer for Three.js. Compose 3D scenes declaratively and integrate them with React state and hooks. |
| Drei | A growing collection of useful abstractions for react-three-fiber: cameras, controls, shaders, loaders, and more. |
| react-babylonjs | React bindings for Babylon.js, an alternative full-featured 3D engine with physics, GUI, and asset loading. |
| Leva | A React-first GUI panel for real-time tweaking of values in 3D scenes and creative applications. |
React running on constrained hardware, d-pad navigation, and living room screens. The same component model — a completely different context.
| Project | Description |
|---|---|
| React Native for tvOS / Android TV | Official support for deploying React apps to Apple TV and Android TV, with focus management adapted for remote control navigation. |
| react-tv (archived) | A React renderer optimized for low-memory Smart TV platforms including LG WebOS and Samsung Tizen. |
| React Native Multi-TV App Sample | Amazon's reference implementation for a cross-platform TV app targeting Android TV, Fire TV, tvOS, and web from a single codebase. |
React's reconciler applied to physical hardware interfaces. Describe the desired state of pins and peripherals as components — let React figure out the diff.
| Project | Description |
|---|---|
| react-hardware | A React renderer for hardware devices. Expresses GPIO pin states and interactions as React components, targeting Arduino-compatible boards. |
WebXR rendered through React. Immersive environments and spatial interfaces described as declarative component trees.
| Project | Description |
|---|---|
| @react-three/xr | WebXR support for react-three-fiber. Build VR and AR experiences for Meta Quest and other WebXR-compatible headsets. |
| react-unity-webgl | Bidirectional communication between a React application and an embedded Unity WebGL build. |
High-performance geospatial rendering with React. WebGL-accelerated tiles, layers, and visualizations at scale.
| Project | Description |
|---|---|
| react-map-gl | React wrapper around Mapbox GL JS and MapLibre, with support for layers, controls, and camera transitions. |
| Deck.gl | WebGL-powered geospatial data visualization framework by Uber, designed for large datasets and real-time rendering. |
| react-leaflet | React components for Leaflet.js maps, well-suited for standard interactive mapping use cases. |
| Kepler.gl | Open-source geospatial analysis tool built with React and Deck.gl, supporting large-scale data exploration. |
React as the rendering layer for streaming AI responses, agent UIs, and LLM workflow builders. This space is moving fast — these are the infrastructure-level tools worth knowing.
| Project | Description |
|---|---|
| Flowise | A visual LLM workflow builder whose entire canvas UI is powered by React Flow. |
Animated, interactive, and explorable data — rendered as React components with SVG, Canvas, or WebGL under the hood.
| Project | Description |
|---|---|
| Recharts | Composable, declarative chart library built on D3 and React SVG. |
| Nivo | Comprehensive dataviz library with support for motion, SVG, canvas, and server-side rendering. |
| react-force-graph | Force-directed graph visualization in 2D and 3D using Canvas and WebGL. |
| Deck.gl | WebGL-powered visualization layers for maps and large datasets. Also listed under Maps & Geo. |
| react-chartjs-2 | React components for Chartjs. |
Drag-and-drop graph interfaces where nodes are React components and edges are data flows. The canonical UI pattern for AI pipelines, workflow builders, and visual programming tools.
| Project | Description |
|---|---|
| React Flow / xyflow | The de facto standard for building node-based editors and interactive diagram canvases in React. |
| react-diagrams | A diagramming toolkit for React with support for custom node types and complex graph topologies. |
| Flume | A node editor focused on extracting and managing application logic through visual graphs. |
React as a creative coding environment. Components encapsulate sketches, shaders, and simulations — state management drives procedural outputs.
| Project | Description |
|---|---|
| react-p5 | React wrapper for p5.js, enabling generative sketches to be composed and controlled as React components. |
| Auto-Animate | Drop-in animation utility that adds smooth transitions to any React list or layout change with a single hook. |
React's reconciler is not tied to the DOM. It is a general-purpose tree diffing engine that can target any platform — as long as you implement the host configuration interface.
| Project | Description |
|---|---|
| react-reconciler | The low-level package used to build custom React renderers. The foundation that all non-DOM renderers are built on. |
| react-nil | A React renderer that produces no output. Used to run React's component lifecycle and side effects in headless or server-side contexts. |
| react-test-renderer (deprecated) | Renders React components to plain JavaScript objects without a DOM — the basis for component snapshot testing. |
PRs are welcome. This list is intentionally selective — the goal is quality over quantity.
What belongs here:
- Projects that use React (or React's reconciler) to target a non-standard rendering environment — anything other than a standard web browser rendering HTML.
- Libraries that enable React to produce artifacts other than UI — video files, PDFs, music, hardware signals, etc.
- Tools that demonstrate a genuinely unexpected application of React's component model — where the use of React is surprising, not just convenient.
What does not belong here:
- UI component libraries (shadcn, Radix, MUI, Chakra, etc.)
- General React utilities, hooks libraries, or state management tools
- Boilerplates, starter kits, or project templates
- Anything that uses React simply as a framework for a conventional web application
- Self-promotional submissions without significant adoption or a clearly novel concept
When in doubt, ask yourself: Would a developer familiar with React be genuinely surprised to learn this is possible? If the answer is yes, it probably belongs here.