Semiotic: The React Chart Library That Came Back From the Dead

Semiotic is a React visualisation library that handles the charts most libraries quietly skip — force-directed networks, Sankey diagrams, geographic projections and real-time streams — and treats annotation as a primary concept rather than something you bolt on afterwards.

It is also one of the more unusual stories in open source: a nine-year-old project that went quiet for years and came back.

Key takeaways

• It covers the hard chart types. If your dashboard needs an org chart, a dependency graph or a Sankey, this is where the shortlist gets short.
• Streaming charts render on canvas at 60fps, which is a different architecture from re-rendering SVG on every tick.
• It ships an MCP server exposing machine-readable schemas, so an AI assistant can look up a valid config instead of inventing one.
• Server-side rendering to SVG, PNG or GIF, for emailed reports and PDFs without a headless browser.
• It was effectively dormant for years and revived in April 2026. Version 3 is new, moving fast, and has a small community.
• Apache-2.0 — client-friendly, with a patent grant, unlike the GPL in some other tools in this series.

What problem does Semiotic solve?

The moment a dashboard brief steps outside bar-line-pie.

Everything is fine while the client wants revenue by month. Then someone asks for the customer journey as a funnel with drop-off at each stage, or the service dependency graph, or where the budget flows across departments. Those are Sankeys, networks and hierarchies, and the popular React chart libraries do not have them.

So you drop to raw D3 inside a React component, and now you are hand-managing DOM that React thinks it owns, writing your own enter-update-exit, and reimplementing tooltips. It works. It is also the part of the project that runs over.

There is a newer problem too. Ask an AI assistant to add a Sankey chart and it will confidently produce props that do not exist, because most chart libraries publish no machine-readable schema for a model to check against. You spend the saved time debugging invented APIs.

How does Semiotic approach it?

A layered API. Underneath sit low-level frames that know how to render a coordinate space — continuous, ordinal, network, geographic. On top sit higher-order components for the everyday cases, so a simple chart really is a few lines:

import { LineChart } from "semiotic/xy"

<LineChart data={salesData} xAccessor="month" yAccessor="revenue" />

When the brief gets harder you drop a layer rather than dropping the library. That is the whole design: an escape hatch that stays inside React.

Other notable choices — over thirty entry points so you import semiotic/xy rather than the whole library, canvas rendering for streams, coordinated views that cross-highlight, keyboard navigation and ARIA labels, and a translator that imports existing Vega-Lite specifications.

The MCP server is the sleeper feature

Run npx semiotic-mcp and your coding agent gains tools for discovering chart schemas, rendering charts, diagnosing a broken config and recommending a chart type for a dataset.

That flips chart work from a hallucination-prone task into a grounded one. The model is not recalling an API from training data; it is querying the actual schema of the version you have installed. On a dashboard-heavy project that is a real velocity difference, and almost nobody else in this category ships it.

It is a good illustration of a broader shift covered in our MCP guide: libraries are starting to publish machine-readable surfaces for agents the way they once published TypeScript types for editors.

The comeback story, and why it matters

Semiotic started inside Netflix as an internal visualisation framework before being open-sourced. Its contributor list includes some well-known names in the data-visualisation world.

Then it stalled. The 2.0 line accumulated twenty-six beta tags and never shipped a stable release. Its creator has described that period plainly — the project settled down, because he had the ideas but no team to execute them.

Version 3 arrived in April 2026 and reached 3.9.1 by August, with releases every week or two. He is explicit that AI assistance is what made the difference, and careful about how he frames it: not a replacement for skilled programmers, but a replacement for talent he could not hire.

That is one of the more honest accounts of what AI is currently doing to open source. It did not generate the design — the design had been waiting nine years. It closed the gap between knowing what the library needed and having the hands to build it. The same theme runs through Pretext, built by a different veteran with the same tools.

Alternatives worth knowing

Be honest with yourself about which chart you actually need.

If your whole dashboard is bar charts, use Recharts. Reaching for Semiotic is a decision you make because of one or two hard charts — and it is the right decision when those charts exist.

Limitations to plan around

• Small community, essentially one maintainer. This is the real risk, and it is worth naming to a client rather than discovering later.
• The 3.x API is young. Nine years of history does not mean nine years of this API. Pin versions.
• Bundle sizes are large for a chart library even per entry point. Import the specific entry you need.
• The AI entry point is very heavy — a build-time and development artifact, not something to ship to a browser.
• Hierarchical charts do not stream. Documented and deliberate, but a constraint if you wanted a live treemap.

Conclusion

Semiotic is the answer to a specific question: what do you use when the chart is genuinely hard and you do not want to hand-roll D3 inside React? For nine years the answer was "this, if you can live with it being quiet." Now it is maintained again, and it has an MCP server nobody else has.

Scope it honestly, pin the version, and tell your client that the bus factor is one. Those conditions accepted, it does things nothing else on the shortlist does.

Need a dashboard that shows more than bar charts?

DI Solutions builds React analytics interfaces — networks, funnels, live streams and the data pipelines feeding them — that stay fast when the dataset grows. Hire our React engineers to build it properly the first time.

Reference links

• Semiotic on GitHub
• Semiotic documentation
• Recharts — the sensible default to compare against