HSU Calculator

A calculator card that estimates monthly Harness Service Unit consumption by module and tier, live on the pricing page.

What it does

Harness prices most modules in Harness Service Units (HSUs), and the number a customer needs depends on which modules they use and how heavily. Rather than send a reader to a spreadsheet or a sales call to work that out, the calculator sits directly on the pricing page: select modules and usage, and it estimates monthly HSU consumption on the spot.

Why it is built this way

This integration predates the GitBook migration. It began as a React component on the Docusaurus site. Moving it required a full rebuild, not a port: GitBook integrations render server-side inside GitBook's own runtime, with no client-side React tree and no DOM access from the integration's own code. The rebuild kept full parity with the original calculations and tiers while fitting that model — a state change is dispatched as an action, the integration returns new layout, and GitBook re-renders. The block itself takes no data as a prop; the tier and category set (defaultTier, defaultCategory, startOpen) are the only author-facing options, and the rate data is compiled into the webframe directly so it never travels through GitBook's ContentKit payload on every render.

It is a useful worked example of the harder end of the migration: not every custom component moved cleanly, and this one is proof that a full rebuild is sometimes the right call rather than forcing an old architecture into a new runtime.

This is what it looks like in action

That is the real block, installed on this space and rendering live, not a screenshot or a description of one. It starts expanded here (startOpen="true") so the interaction is visible immediately; on the pricing page it starts collapsed, since a reader arrives there already looking for it.

Where it is also live

Embedded on the Flex pricing page, under Platform, collapsed by default.