Pages stored as data, checked before they ship, and rendered in React or Astro.

Catch a broken page before it ships

You prevent layout failures by checking your data before it reaches the browser.

An editor renames a block type or leaves a required field empty and the CMS saves it. The renderer skips what it cannot draw and renders the rest, printing one warning in development and staying silent in production. This gap is easy to miss.

You call validateItems in a build script or webhook to find unknown types, blank required fields, or duplicate ids, with each problem naming the block. The function never throws. In Astro, you run this in a script before the build so any problem fails the build.

[
  { id: 'brass', type: 'listing', props: { title: 'Brass: Birmingham' } },
  { id: 'tonight', type: 'shelf', props: { heading: 'On the table tonight' },
    children: [
      { id: 'wingspan', type: 'listing', props: { title: 'Wingspan' } },
    ] },
  { id: 'hive', type: 'listing', props: { title: 'Hive' } },
]

Stop typos at compile time

You catch coding errors while you write your components.

A mistyped block type or a wrong prop in the code breaks the page.

The React package checks every block and child block against the component props at compile time.

npm install @evanion/react-widget

const Listing = (props: { title: string; price: number }) => (
  <h3>
    {props.title}, {props.price} kr
  </h3>
);

const Shelf = (props: { heading: string; children?: React.ReactNode }) => (
  <section>
    <h2>{props.heading}</h2>
    {props.children}
  </section>
);

const { Widgets, defineItems } = createWidgets({
  components: { listing: Listing, shelf: Shelf },
});

// Props are checked for every item, nested children included.
const page = defineItems([
  {
    id: 'tonight',
    type: 'shelf',
    props: { heading: 'On the table tonight' },
    children: [
      {
        id: 'brass',
        type: 'listing',
        props: { title: 'Brass: Birmingham', price: 649 },
      },
    ],
  },
]);

// A mistyped type is an error in your editor, before anything runs.
// @ts-expect-error 'listng' is not one of the widget types
defineItems([{ id: 'hive', type: 'listng', props: { title: 'Hive' } }]);

Zero JavaScript for layout in Astro

The server decides the arrangement of the page.

The browser receives plain HTML for the page structure.

The Astro package renders the block list to HTML on the server, and your own interactive components still ship their own code.

Questions

What is this library?

It is a system to validate and render pages stored as a list of blocks. The core handles validation, the React package provides a React renderer, and the Astro package provides an Astro renderer.

Does it include a CMS editor?

No, you use your own CMS or database to save the blocks.

Where does validation run in Astro?

You run the check in a script before the build process; the script exits non-zero on any problem and stops the build.

Do the same blocks render in React and Astro?

Yes, the same block array renders through either package.

What happens when a block is bad at render time?

The renderer skips the bad block and renders the rest of the page. It prints one warning in development and stays silent in production, which is why the check runs before shipping.