Getting Started
Quick Start
Build and render your first Lyrix block in minutes.
Define your first block
Create a new file in your blocks directory and define a block using defineBlock().
tsx
// blocks/hero.tsx
import { defineBlock } from "@lyrix/core";
export const HeroBlock = defineBlock({
name: "Hero",
schema: {
title: { type: "string", required: true },
},
render: ({ title }) => (
<section className="py-24 text-center">
<h1 className="text-6xl font-bold">{title}</h1>
</section>
),
});Render a page
Use LyrixRenderer to render a page from JSON data in any Next.js route.
tsx
// app/page.tsx
import { LyrixRenderer } from "@lyrix/renderer";
import { HeroBlock } from "@/blocks/hero";
const page = {
blocks: [
{ type: "Hero", props: { title: "Hello, Lyrix!" } },
],
};
export default function Home() {
return <LyrixRenderer page={page} blocks={[HeroBlock]} />;
}