Football visualised for the web.

PitchKit is one. It renders football (soccer) pitches and the data plotted on them as ordinary React components — <Pitch> with layers like <Scatter>, <Arrows>, <Comet>, <Heatmap> and <Voronoi> declared as its children. There is no imperative drawing API and no canvas to manage: you compose marks in JSX the way you compose anything else in a React tree, and the pitch re-renders when your data changes.

PitchKit is a charting library built specifically for football data. Shot maps, pass networks, pass maps, heatmaps, hexbins, KDE surfaces, convex hulls, Voronoi control zones and goal-angle wedges all ship as layers, with pitch markings, aspect ratio and coordinate handling already correct — so you plot events in their own coordinates rather than mapping them onto a generic set of axes first. For non-spatial charts it composes happily alongside whichever general-purpose charting library you already use.

PitchKit is written in TypeScript and ships its own types — no @types package and no any at the boundary. Accessors are generic over your row type, so <Scatter data={shots} x={(s) => s.x} /> infers the element type from the array you pass and your editor autocompletes the fields. The data loaders are typed to each provider's real schema, so a mistyped event field is a compile error rather than an empty pitch.

Yes — it is built for the browser. It works in any React application, including Next.js with server-side rendering, and pitches are responsive by default: each one fills its container via ResizeObserver with a correct-aspect-ratio first paint, so it behaves inside a dashboard, a match report or a scouting tool without fixed sizing. Theming is CSS variables, so it inherits your application's design tokens and dark mode instead of bringing its own.

mplsoccer is the reference football visualisation library for Python and matplotlib, and PitchKit covers the same ground for the web. The concepts map one-to-one — pitches, marks, accessors — so a shot map you know how to build in mplsoccer has a direct PitchKit equivalent. The difference is the target: mplsoccer renders figures for Python analysis and publication, PitchKit renders interactive DOM for shipping inside a web application. Pick whichever matches where the chart needs to end up. The migration guide translates each mplsoccer call to its PitchKit equivalent.

StatsBomb, SkillCorner, Wyscout, Opta and UEFA coordinate systems are handled natively — feed data in its own units and one transform pipeline keeps everything aligned. @pitchkit/data-providers goes further and fetches it for you: fetchMatchEvents(id) returns typed StatsBomb open-data events ready to plot, including 360 freeze frames; the SkillCorner module streams broadcast tracking, dynamic events and phases of play; and the Wyscout module reads the Pappalardo et al. open dataset's 1,941 matches.