Klarhimmel UI
Klarhimmel ↗

Blocks and Canvas

Every block is data in, section out. That contract is what lets an editor drive it, and it is yours to use too.

Steps

  1. Read a block's contract

    Each block exports its spec: a props schema (zod), realistic default content and a short description. Text fields are strings with a maximum length, lists are arrays with a maximum.

    import Hero, { spec } from '@/components/klarhimmel/blocks/hero-split';

spec.defaults;   // realistic copy, valid against the schema
spec.schema;     // zod: what the block accepts

  2. Validate content before you render it

    The block also validates and falls back per field, so a bad value never breaks the page. Use the schema when you want to know first, for example in a form or a content pipeline.

    const result = spec.schema.safeParse(content);
if (!result.success) console.log(result.error.issues);

  3. Render it with your content

    One props object, on a surface, inside a Theme.

    <BlockSurface tone="muted"><Hero props={content} /></BlockSurface>

How Canvas fits

Canvas is Klarhimmel's wireframe and design editor. It is not public yet; the contract it relies on is in every block you install.

Editable slots

Every editable string renders through the Text slot and every image through Media. Outside an editor they draw a plain element, so a block in your app has no editing cost. Canvas provides the context that makes them editable in place.

This site is a Canvas project

The pages of this directory are designed in Canvas from these same blocks and rendered here from the real library, with real counts and real props. A page you read here is a page the blocks can build.

The props panel

The panel on each block page is generated from the schema: text with its limit, lists you can add to and reorder, switches, selects and images. If you add a block of your own with a spec, an editor can drive it the same way.