campos

Football data in.
Match-ready React charts out.

Adapters for the messy bits, components for the story.

Campos helps you turn feeds from Opta, StatsBomb, Wyscout, WhoScored, and similar providers into chart-ready football events, then render shot maps, timelines, networks, and pitch views in React.

See real examples Start building
Beta Provider adapters, React chart components, and real football fixtures
Data to chart
const shots = fromOpta.shots(events, ctx);

<ShotMap
  shots={shots}
/>
Two Jobs

Prepare football data, then render the chart.

Most football viz work repeats the same two chores: translating provider data into usable events, and turning those events into product UI. Campos gives you adapters for the first part and React components for the second.

Adapters for the messy data

Normalise provider payloads into typed shots, passes, formations, and match events without rebuilding coordinate and clock handling every time.

React charts with football defaults

Render shot maps, timelines, networks, radars, rankings, and pitch views with useful defaults instead of starting from bare plotting primitives.

Pages, not isolated widgets

Compose the pieces into match pages, season summaries, scouting reports, and internal tools that feel like one football product.

Showcases

See it working against real football pages.

Real fixtures, page tests

Can Campos build the thing you actually want to ship?

The showcase starts from real football visualisations and recreates them with Campos components, so the library is judged on full pages rather than tidy little demos.

Open the showcase Build your first page
Workflow

A short path from feed to feature.

1

Start with the feed

Use adapters to turn provider-shaped data into Campos-shaped football events with coordinates, teams, clocks, and source context preserved.

2

Render in React

Drop those events into chart components with defaults that already understand football layouts, pitch orientation, labels, legends, and empty states.

3

Make it yours

Add your product logic with callbacks for colour, stroke, shape, opacity, and emphasis while keeping the chart API in normal TypeScript.

For people who care about the internals

Package layout

@withqwerty/campos-react is the main library package, with @withqwerty/campos-adapters for provider normalisation, @withqwerty/campos-schema for canonical types, @withqwerty/campos-stadia for pitch and goal primitives, and @withqwerty/campos-static for Node-side export.

Data flow

The intended path is provider payloads into adapter products such as ShotEvent[] and PassEvent[], then straight into chart components. Aggregated charts can still take plain metric rows when there is no provider feed involved.

Callback-first styling

Style props accept constants, maps, or callbacks. The callback gets the point model and returns the style, so most editorial logic stays in normal TypeScript rather than a chart-specific DSL.

Why compute still lives in React

Compute helpers are still exported from @withqwerty/campos-react during the pre-1.0 line. That keeps the public surface smaller while the chart and model contracts are still being battle-tested.

Export path

Static export is a deliberate two-step surface: build an ExportFrameSpec in React, then render it to SVG or PNG in Node with @withqwerty/campos-static.

What’s Next

More feeds, fuller examples, stronger export.

The next pass keeps pushing both sides of Campos: better data preparation for real football feeds, and more complete React surfaces built from those events.

See the current examples Track gaps on GitHub 
pnpm add @withqwerty/campos-react@beta

The current docs site tracks the beta release channel, so installs should pin @beta until Campos moves onto the default npm tag.