Core Concepts
What are Blocks?
Blocks are the fundamental building unit of every Lyrix page.
Blocks are just components
A block is a typed, reusable React component with a declared schema. The schema defines what props the block accepts, which drives the visual editor's UI automatically.
Block anatomy
Every block has three parts: a name, a schema, and a render function.
tsx
export const CardBlock = defineBlock({
name: "Card",
schema: {
title: { type: "string", required: true },
body: { type: "string" },
image: { type: "image" },
},
render: ({ title, body, image }) => (
<div className="rounded-xl border p-6">
{image && <img src={image.url} alt={title} />}
<h2>{title}</h2>
<p>{body}</p>
</div>
),
});