git404hub

what is sterling fr?

lamatemaga/sterling — explained in plain English

Analysis updated 2026-05-18

3TypeScriptAudience · developerComplexity · 2/5Setup · moderate

tl;dr

A React and MDX component library that gives blog and documentation charts a consistent visual style, from titles to color palettes to exports.

vibe map

mindmap
  root((repo))
    What it does
      Chart figure shell
      Editorial styling
      Data exports
    Tech stack
      React
      D3
      MDX
    Use cases
      Data journalism
      Blog charts
      Documentation
    Audience
      Developers
      Data writers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add a consistent chart figure system with titles, captions, and exports to a Markdown or MDX blog.

VIBE 2

Build interactive editorial charts like scatterplots, heatmaps, and Sankey diagrams for a data story.

VIBE 3

Export the exact processed rows behind a chart as CSV alongside PNG or shared images.

VIBE 4

Apply a shared color palette across every chart on a documentation or publishing site.

what's the stack?

TypeScriptReactD3MDXSVG

how it stacks up fr

lamatemaga/sterling000madz000/payload-test-api-route-handlerakash-sr/memobsidian
Stars333
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity2/52/53/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · moderate time til it works · 30min

Not yet published to npm, must be installed locally from a repository checkout.

in plain english

Sterling is a React and MDX component library for building charts and figures inside data driven articles, blog posts, and documentation. It was built by La Matemaga as an editorial system so that every chart on a site can share the same visual language instead of each post reinventing titles, captions, colors, and export behavior from scratch. A single wrapper component called SterlingFigure holds that shared shell, title styling, captions, source labels, export buttons, and accessible chart labels, while separate chart primitives draw the actual data. The library ships a large set of chart types built on D3 and SVG, including bar charts, scatterplots, lines, histograms, boxplots, violin plots, heatmaps, correlation matrices, pie and donut charts, chord diagrams, Sankey diagrams, candlestick charts, radar charts, treemaps, network diagrams, dendrograms, and geographic maps, among others. It also includes a full color system with categorical, sequential, and diverging palettes, plus a helper for building Tailwind style color scales, though Tailwind itself is optional. Figures support English and Spanish interface text, image copying, PNG export, sharing where the browser supports it, and CSV export of the exact processed data behind a chart. The package requires React and React DOM version 18.2 or later, and depends on D3 modules and a few small helper libraries that install automatically. It is not yet published to npm, for now it can only be installed locally from a checkout of the repository. Once imported, you register the base styles once at your app's entry point, then either use ready made chart components directly in React or register them for use inside MDX files alongside your own data loading components. Sterling deliberately leaves out La Matemaga's own datasets, site pages, and specific visual examples. It positions itself purely as the reusable library layer that other data storytelling sites and blogs can build on top of, with editorial defaults like credit lines and title marks that any consuming project can override or remove.

prompts (copy fr)

prompt 1
Show me how to install Sterling locally from a checkout and import its base styles into my React app.
prompt 2
Help me build a SterlingFigure with a SterlingBarChart showing my own data array.
prompt 3
Register Sterling's components for MDX so I can use SterlingScatterPlot inside a blog post.
prompt 4
Explain how to switch a Sterling figure into dark mode using data-sterling-theme.

Frequently asked questions

what is sterling fr?

A React and MDX component library that gives blog and documentation charts a consistent visual style, from titles to color palettes to exports.

What language is sterling written in?

Mainly TypeScript. The stack also includes TypeScript, React, D3.

How hard is sterling to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is sterling for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.