Open-source · FHIR R5 · React

Render HL7® FHIR® Questionnaires across any UI system

Formbox Renderer is a typed React renderer for FHIR R5 Questionnaires. Build clinical forms once, then ship them with pluggable themes, predictable state, and Storybook-ready previews.

Explore Storybook

View on GitHub Read docs Get started

4 official themesFHIR R5 readyMIT licenseHeadless core

Quick installFHIR R5

Render your first Questionnaire

pnpm add @formbox/renderer @formbox/hs-theme

import "@formbox/hs-theme/style.css";
import { Renderer } from "@formbox/renderer";
import { theme } from "@formbox/hs-theme";

<Renderer questionnaire={questionnaire} theme={theme} />

Swap themes without rewriting questionnaires.

Wire data pipelines with controlled value props.

Validate clinical UX with Storybook previews.

Everything you need to render at scale

Purpose-built for FHIR R5 Questionnaires with a fully typed renderer, tested helpers, and predictable state management.

Typed renderer core

Strict Questionnaire typing, composable renderers, and validation utilities that scale from single forms to full workflows.

FHIR R5 Questionnaire ready

Predictable stores and helpers

Built for clinical UX teams

Customize themes

The renderer never touches DOM APIs directly. Your theme defines markup, layout, and styling while data flows through strict props.

Pre-built themes

Start with NHS Design, Health Samurai, Ant Design, or Mantine and keep your clinical workflows on-brand.

SDC spec coverage

Structured Data Capture behavior is covered and actively expanding toward full parity.

Headless engine

Core rendering logic works in React Native, CLI tooling, or server-side environments.

Formbox Builder ready

Integrated with Formbox Builder for end-to-end questionnaire authoring and renderer delivery.

Accessibility-first rendering

ARIA ids, helper text, and error messaging flow through the theme contract to support WCAG-ready experiences.

Customize

Own the markup, keep the data flow clean

A Theme is a full object with React components for every slot. The renderer never touches DOM APIs directly, so your theme controls layout and styling while data stays purely in props.

Extend a base theme with object spread or build from scratch.
Controlled-value props keep inputs predictable.
Accessibility contract passes aria ids to your components.

Extend a base theme

import type { Theme } from "@formbox/theme";
import { theme as baseTheme } from "@formbox/hs-theme";

const theme: Theme = {
  ...baseTheme,
  Label: MyLabel,
};

Install the theme contract

pnpm add @formbox/theme

The Theme type requires every component, so you always know what to render.

Theme kits ready to ship

Start with the official themes or bring your own design system to stay on-brand.

Health Samurai

Clinical-ready layout density, contrast, and spacing tuned for Formbox workflows, built on Health Samurai Design System.

Docs

NHS Design

NHS.UK-aligned typography, spacing, and component behavior for public health services, built on NHS.UK Design System.

Docs

Ant Design

Enterprise-grade components and layout patterns for complex clinical apps, powered by Ant Design.

Docs

Mantine

Mantine components with first-class Provider setup and theme tokens, built on Mantine.

Docs

React Native

Coming soon

Gluestack-powered native layouts with accessible, touch-friendly components, built on Gluestack UI.

Build Your Own

Map renderer slots to your design system while keeping data flow predictable with the Theme guide.

Docs

Storybook as a living demo

Browse every renderer, theme, and sample questionnaire. Use the Storybook page as a living design system and QA checklist.

Open Storybook Browse themes

Quickstart

From install to first render in four moves

Install the renderer, choose a theme, and wire it to your Questionnaire data in minutes.

Install

Install renderer + theme

pnpm add @formbox/renderer @formbox/hs-theme

Style

Include the theme CSS

import "@formbox/hs-theme/style.css";

Import

Import theme

import { theme } from "@formbox/hs-theme";

Render

Render Questionnaire

<Renderer questionnaire={questionnaire} theme={theme} />

Full sample~5 min

Ready-to-run snippet

import "@formbox/hs-theme/style.css";
import { Renderer } from "@formbox/renderer";
import { theme } from "@formbox/hs-theme";

<Renderer questionnaire={questionnaire} theme={theme} />

Read docs Open Storybook

Pair Storybook with your questionnaires to audit UI, accessibility, and validation rules before shipping.

Open-source ready

Built by the Formbox team and open to the community. File issues, propose improvements, or ship a new theme.

Contribute

Review the codebase, open pull requests, and help shape the roadmap.

Integrate

Embed the renderer in patient portals, provider dashboards, or EHR extensions.

Extend

Build custom themes or renderer overrides for unique clinical workflows.