Site-owned profiles.
Name your profiles, translate the labels, choose the order. Use your own CSS hooks or pass CSS custom properties. Every profile is configurable.
A modular accessibility toolkit
Accessibility tools. Starting with Display.
Independent accessibility modules for websites, apps and docs. Start with Display: configurable preferences that stay in sync.
Display is available now. More modules will follow.
TypeScript core · Native controls · Optional React · MIT
Display / Live demo
Try your preferred view.
This website uses Display. Choose a profile to change its text, spacing and colors.
Try a larger view. Follow a link to the docs. Your preference comes along.
Module 01 / Display · Available now
Display: preferences
that stay in sync.
The Display module provides a controller, a native widget, optional React bindings and token presets. Define profiles with your CSS; the module handles persistence and synchronization.
01 / DisplayAvailable in
openregardMore modules to come
Persistent selection.
Keep controls, pages and same-origin tabs in sync. Include the app and the docs. If storage is unavailable, the current page still works.
Native controls.
A real select. A clear label. Visible keyboard focus. A framework-independent core, with React there when you want it.
A small addition
Install the widget.
Keep your styles.
Start with the core and the native widget. Keep your typography, layout and palettes in your own CSS.
npm install openregard
Display module / Quick start
import { createDisplay, mountDisplayWidget } from "openregard/display";
import "openregard/display/style.css";
const display = createDisplay({
version: 1,
defaultProfile: "standard",
storageKey: "my-site-view",
controlLabel: "Choose your view",
profiles: [
{ id: "standard", label: "Standard" },
{ id: "vision", label: "Vision", tokens: { "--reading-size": "125%" } },
],
});
mountDisplayWidget(container, display);
import { DisplayWidget } from "openregard/display/react";
import "openregard/display/style.css";
const config = {
version: 1 as const,
defaultProfile: "standard",
storageKey: "my-site-view",
controlLabel: "Choose your view",
profiles: [
{ id: "standard", label: "Standard" },
{ id: "vision", label: "Vision", tokens: { "--reading-size": "125%" } },
],
};
export function Settings() {
return <DisplayWidget config={config} />;
}
Your CSS uses var(--reading-size, 100%). Display
handles the preference.
Take a closer look
Try it in context.
Explore Display in vanilla HTML, static docs and React. Each example includes highlighted source and uses the optional token presets.
Vanilla website
Two controls. One preference. Light and dark surfaces, forms and flexible cards.
Static documentation
A separate page that picks up your saved view before the content is painted.
React binding
React and vanilla widgets sharing the same small controller.
Run them locally
npx --package=openregard openregard-demo
Adoption contract
Style and test each profile.
The widget manages selection and persistence. Your CSS must support reflow, readable color pairs, usable navigation and browser preferences.
Read the adoption contractSame page. Same preference.