https://github.com/user-attachments/assets/a2a87543-8e15-4739-aa47-8b4f75fa4c3c

rhp: reactive html plots

rhp builds charts out of HTML elements placed by CSS, with SolidJS, instead of drawing them into an SVG or a canvas. You describe one slat, the template for one row of data, from a few blocks (Bar, Dot, Tick, Label, Cell, Place, Area and Line), and rhp draws a slat for every row and keeps each one in its place. When a value changes, only what reads it runs again, and a block writes only the CSS variables that changed.

Guides, reference and a gallery of live charts: https://rhp.vercel.app

Install

npm install @bezda/rhp

Solid is its only peer dependency, and there is no stylesheet to import: rhp adds its CSS when the first chart appears. A Solid app's build (Vite, SolidStart, Astro) compiles rhp's source with the app. Anywhere else the package picks a ready build: one for browsers, and one for Node, Deno and workers that draws charts on a server.

• No build step: import @bezda/rhp/standalone from a CDN, one module with Solid included (36 kB gzipped); Install shows a whole page.
• React: @bezda/rhp-react, in react/, turns an rhp chart into a React component.

Example

A bar chart, as a Solid app's App.jsx (Install starts a new app):

import { Chart, Plot, Bar, Label, slat } from "@bezda/rhp";

const Fruit = slat({ thickness: 32, room: { start: 80, end: 40 } }, (d) => (
  <div>
    <Label edge="start">{d.name}</Label>
    <Bar to={d.sold} />
    <Label at={d.sold}>{d.sold}</Label>
  </div>
));

export default function App() {
  return (
    <Chart scale={[0, 30]}>
      <Plot name={["Apples", "Bananas", "Cherries"]} sold={[12, 18, 7]}>{Fruit}</Plot>
    </Chart>
  );
}

Each prop of the Plot is a column of data, and each slat reads its row's values as d.name and d.sold. Your first chart builds this up step by step.

For a large scatter plot, the experimental ManyDots collection renders plain HTML points without a slat or Solid computation for each point. It supports shared styling, category classes, and per-point colors, sizes, and shapes. Choose it explicitly, or keep Dot for individual blocks and custom slat content at any point count.

Good to know

• Charts are plain DOM with no shadow root: querySelector, Testing Library and your page's event listeners all work.
• A slat's CSS reaches only its own slats, and the page's CSS can't change a chart's layout. A Chart that says noCssGuard leaves that protection out and draws faster, for a page whose CSS leaves its elements alone; noCssGuard() does it for every chart on the page.
• slat(settings, fn) returns a new function, the slat type, and leaves fn as it was, so one function can make several slat types with different settings. Give the Plot what slat() returns: fn itself carries no settings.

Make charts with an AI agent

rhp comes with an Agent Skill and a checker, so an AI coding agent that has never seen rhp can make an rhp chart in one go.

• The skill (skills/rhp/) teaches the agent how a chart is built, gives it tested chart pages to take technique from, and makes it check its work. npx skills add bezda-team/rhp installs it into Claude Code, Codex, Cursor, Copilot, Gemini CLI and other agents.
• The checker (mcp/) renders a chart in a browser at desktop and phone widths and reports what a reader would hit, with a fix for each: npx -y @bezda/rhp-mcp check chart.html. With no arguments it is an MCP server with the same check.
• Claude Code installs both with /plugin marketplace add bezda-team/rhp, then /plugin install rhp@rhp.

Build with AI on the website has the setup for each tool and a prompt for chat apps.

What's in the package

Development

You need Node 22 or later.

npm install
npx playwright install    # the browsers the tests run in
npm run build             # dist/
npm test                  # builds the test pages and checks them in Chromium

The code:

The AI kit has its own checks: npm install and npm test in mcp/ run the checker against a set of broken charts, the gallery's examples and every recipe in skills/rhp/recipes/.

Contributing

Bug reports, questions and pull requests are welcome on GitHub.

• A bug: open an issue with the smallest chart that shows it (one HTML file is best), the browser it happens in, and what you expected to see.
• A change: open a pull request against master. Run npm test before you open it, and npm test in mcp/ as well when you change the skill, a recipe or the checker. CI runs the same tests in Chromium, WebKit and Firefox on every pull request.
• A fix is easiest to accept with a check that fails without it: a test page in test/, or a broken chart in mcp/test/broken/ for the checker.
• A recipe or a change to the skill keeps the checker clean: node mcp/bin/rhp-mcp.js check <file> reports no errors and no warnings at the widths the skill checks.
• Write code the way the code around it is written.

History

Version 2 is a rewrite of v1 ("react html plots"), a React library in three packages; v1's code is on the v1 branch.

License

MIT, see LICENSE. Some files came from elsewhere and keep their own licenses: see CREDITS.md.