Getting Started
Introduction
Lyrix is an open-source, code-first CMS and visual block editor built natively for Next.js. No lock-in, no black boxes.
What is Lyrix?
Lyrix lets you define reusable content blocks directly in TypeScript or JavaScript. Pages are composed visually using those blocks while staying fully owned, versioned, and rendered inside your Next.js app.
Why not just use another headless CMS?
Most headless CMS platforms introduce complex schemas, vendor lock-in, and an abstraction layer between your code and your content. Lyrix removes all of that — your blocks are React components, your pages are JSON, and rendering is 100% yours.
Core Philosophy
Developers should own their content structure as much as they own their code. If you can build a React component, you can build a Lyrix block.
tsx
// A Lyrix block is just a component
export const HeroBlock = defineBlock({
name: "Hero",
schema: {
title: { type: "string", required: true },
subtitle: { type: "string" },
},
render: ({ title, subtitle }) => (
<section className="py-24">
<h1>{title}</h1>
{subtitle && <p>{subtitle}</p>}
</section>
),
});