Blotch Library

The Blotch Library is the set of hooks and components every Widget can use. The hooks give your Widget its Inputs, data from APIs, the Frame's time zone and language, and more. The components draw text, charts, calendars, maps and other common pieces in a style made for e-ink: black and white, sharp, and readable from across a room.

Import from the library with the ~lib/ prefix. Each page in this reference shows its import:

import { useFetch } from "~lib/use-fetch";
import { Heading } from "~lib/typography";
import { LineChart } from "~lib/charts/line-chart";

There's nothing to install. The library is always available in the Widget Builder, with auto-complete for every hook, component and prop.

What's in it

• Hooks read everything your Widget knows about where it runs: useInputs for its settings, useFetch for data, useLayoutShape for the size of its box, and useTimeZone and usePreferredLanguage for the Frame's settings.
• Typography, such as Heading, Paragraph and Display, sets text on a scale that suits the panel.
• Layout components, such as Card and Brim, arrange the parts of a Widget.
• Data display components, such as Stat, Table and Timeline, show figures and lists, and the maps show places and routes.
• Charts draw numbers as lines, bars, rings and more. See Chart your data to get started.
• Calendars show events by day, week or month. See Show a shared calendar.
• Icon draws any of thousands of icons, and QRCode links a Widget to more on a phone.

Live examples

Every example on these pages is live: it is drawn by the library's Storybook, in the site's light or dark mode, so what you see is what the component draws. Open an example in Storybook to change its props and see the result straight away.