@pitchkit/core

The zero-dependency, framework-agnostic engine behind PitchKit: pitch dimensions, coordinate transforms, the scene/layer model, geometry algorithms, and heatmap binning.

Docs: pitchkitjs.com

Most people want @pitchkit/react instead. That's the supported rendering surface. This package is the maths underneath it — useful directly if you're computing pitch geometry outside React, or building bindings for another framework.

Early days. 0.1.x is the first public release; the API isn't stable yet.

Install

npm install @pitchkit/core

Zero runtime dependencies. ESM, tree-shakeable, ships its own types.

What's inside

Pitch dimensions — statsbomb, opta, uefa, each in the provider's real coordinate space, sourced from mplsoccer's published constants so real event data aligns exactly.

import { getPitchDimensions, cropForHalf } from "@pitchkit/core";

const dimensions = getPitchDimensions("statsbomb"); // 120 × 80, markings included
const half = cropForHalf(dimensions); // crop window for the attacking half

Coordinate transforms — map provider coordinates to pixels, with orientation, padding and cropping handled for you.

import { createPixelTransform } from "@pitchkit/core";

const transform = createPixelTransform({ dimensions, viewport, orientation: "vertical" });

createStandardizeTransform() converts between providers' coordinate spaces.

Geometry — computeConvexHull, computeVoronoiCells, computeGoalAngle, computeFlowBins, computePolygonCentroid, plus arc/arrow/comet path maths.

Heatmaps — computeHeatmapBins for binning (count or weighted), createColorScale for a dependency-free colour ramp, and renderHeatmapLayersToCanvas for painting to a devicePixelRatio-aware canvas.

Theming — pitchTokens (CSS variable names, for autocomplete) and partStyle.

Note on the SVG renderer

svgRenderer / renderSceneToSVGElement are exported but internal — they exist to support this repo's own dev harness, not as a supported vanilla-JS consumption path, and new mark types are not added to them. Use @pitchkit/react to render. (Canvas heatmap rendering is unaffected — @pitchkit/react's <Heatmap> calls straight into it.)

Install

What's inside

Note on the SVG renderer

Links

Licence

Interfaces

Type Aliases

Variables

Functions

On this page