Open Source · MIT · App Router Native
A visual editor for Next.js that writes real React code. Your blocks, your data, your repo. Free and open source.
A visual editor for Next.js that writes real React code. Your blocks, your data, your repo. Free and open source.
Explore the modular services powering Lyrix visual editor layout, rendering, collaborative capabilities, and developer extensibility.
Drag-and-drop block composition running inside your local Next.js app at /lx-admin. Arrange, edit, and preview pages in real time — no iframe hacks, no runtime shims. Hot reload included.
A framework-native renderer that maps structured page JSON directly to your React components. No proprietary output, no vendor widgets — just clean components you already own.
AI-assisted layout generation and content composition. Describe a section in plain language and Lyrix generates a block arrangement you can immediately edit and commit.
Extend the editor with your own design system. Register custom blocks, UI controls, and schema types using TypeScript functions — no wrappers, no DSL, just code.
Dashboard with project listing, search, pagination, stats, and activity tracking. Manage multiple Lyrix projects across your team with authenticated ownership and role controls.
The full Lyrix web platform — auth, dashboard, project CRUD APIs, MongoDB-backed data layer, email flows, and OTP verification. Self-host everything, no third-party CMS dependency.
import { defineBlock } from "lyrix/blocks";
import { Button } from "@/components/ui/button";
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>}
<Button>Get Started</Button>
</section>
),
});“Developers should own their content structure as much as they own their code.”