Core Concepts
Rendering Pipeline
Lyrix renders pages natively inside Next.js — no iframes, no proxies.
How rendering works
LyrixRenderer takes your page JSON and your block registry, maps each block type to its React component, and renders the tree. It's fully compatible with React Server Components and App Router.
Server vs Client blocks
By default, blocks are server components. If a block needs interactivity, add 'use client' at the top of the file just like any Next.js component.
tsx
"use client";
import { defineBlock } from "@lyrix/core";
import { useState } from "react";
export const CounterBlock = defineBlock({
name: "Counter",
schema: {},
render: () => {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
},
});