How Airbnb’s visx Turns React into a Powerful Visualization Engine

Background and Motivation

After four years of research and three years of production use at Airbnb, the team rewrote visx in TypeScript and released version 1.6.1. The goal was to create a unified front‑end visualization stack that combines D3’s power with React’s ergonomics.

Key Design Goals

Lightweight packages : visx is split into more than 30 independent packages, allowing developers to install only the parts they need.

No opinionated defaults : It does not enforce a particular state‑management, animation, or CSS‑in‑JS solution, so it can be integrated into existing React codebases without duplication.

Not a chart library : visx provides low‑level primitives rather than ready‑made charts, giving full control over visual expression.

Why React?

React’s declarative API reduces learning cost, improves performance, and offers strong expressive power. Using D3 only for mathematical and layout calculations while letting React handle DOM updates avoids the conflicts of dual DOM manipulation.

Visx Architecture

Visx (also called vx) consists of over 30 packages grouped by purpose (axes, geometry, hierarchy, shape, tooltip, text, responsive, gradient, pattern, etc.). Packages that need heavy calculations delegate to D3, while others replace D3’s DOM‑centric features with React‑friendly APIs.

Notable Packages

@visx/tooltip : Provides useTooltip hook and withTooltip higher‑order component to manage content, position and visibility, handling auto‑placement and portal rendering.

@visx/text : Solves SVG text‑wrapping by measuring fonts off‑screen and performing line breaks automatically.

@visx/responsive : Supplies utilities to read container dimensions and make SVG/Canvas charts responsive.

@visx/gradient & @visx/pattern : Simplify SVG gradient and pattern definitions.

Real‑World Usage

Airbnb uses visx in internal tools and on the public site for Gantt charts, organization‑structure donuts, radial timelines, business‑report charts, and service‑communication visualizations.

The library also enables higher‑order reusable chart components, reducing duplicated code across projects.

Evolution and Community

Visx started as a JavaScript project and later migrated to TypeScript for type safety. Documentation has been expanded with live CodeSandbox examples, and the website was redesigned. Test coverage, unit tests, and visual regression testing (Happo) have been added to improve quality.

Getting Started

Developers can clone the repository at https://github.com/airbnb/visx, install the individual packages they need, explore the examples, and contribute to the project.