Renderer
Server-side, not iframes.
Skip the bloated iframes. Lyrix renders your visual compositions directly inside your Next.js application for maximum performance and SEO.
High-performance delivery
Lightning Fast
App Router friendly and fully compatible with React Server Components, delivering tiny payloads.
No Runtime Hacks
Your pages are serialized as clean JSON and rendered using standard React rendering pipelines. No magic, just code.
Real Next.js Routes
Every page is a route file in your app folder, with its own metadata, so it deploys anywhere your Next.js app does.
Real routes, not a catch-all
Every page is a Next.js route.
Create a page in the editor and Lyrix writes an actual route file into your app folder, with the page's content saved as JSON right next to it. Your site is still just a Next.js app.
app/
page.tsxHome route
lyrix-page.jsonHome content
about-us/
page.tsxGenerated by the editor
lyrix-page.jsonWritten on publish
lyrix-theme.cssYour site's look
import { LyrixRenderer } from "@/components/lyrix/lyrix-renderer";
import { LyrixPageService } from "@/lib/lyrix-page-service";
export const metadata = { title: "About Us" };
export default async function AboutUsPage() {
const pageService = new LyrixPageService();
const document = await pageService.getPageDocument("/about-us");
return <LyrixRenderer document={document} />;
}The pipeline
From JSON to HTML, on the server.
The route is an async Server Component. It reads the page document, and the renderer maps each element type to a real React component.
- 01
Read
getPageDocument() loads lyrix-page.json for the route.
- 02
Render
LyrixRenderer walks the elements and picks the component for each type.
- 03
Ship
Next.js sends finished HTML. No editor, no iframe, no client-side page builder.
Light on JavaScript
HTML first, JavaScript only where needed.
Most widgets render to plain server HTML and send no component code to the browser. Only the two that need interaction hydrate on the client.
- Hero
- Heading
- Text
- Image
- Video
- Button
- CTA
- Feature grid
- Image box
- Icon box
- Icon
- Icon list
- Testimonial
- Alert
- Star rating
- Progress bar
- Social icons
- Divider
- Spacer
- Container
- Accordionclient
- Tabsclient
Server HTMLHydrated on the client
Responsive by design
Only the CSS that changed.
Tablet and mobile tweaks from the editor are compiled into scoped media queries. The renderer emits only the properties that differ from desktop, so pages stay lean.
@media (max-width:1024px){
.lx-r-hero-1{padding:48px 32px !important}
}
@media (max-width:767px){
.lx-r-hero-1{padding:32px 20px !important;font-size:36px !important}
.lx-rl-features{grid-template-columns:1fr !important}
}Your brand, one file
Restyle the site in one place.
Rendered pages read their colors and radius from lyrix-theme.css. Change a variable and every page follows. The admin and editor keep their own styling.
/* app/lyrix-theme.css — restyles the pages you build */
:root {
--radius: 0.625rem;
--background: #ffffff;
--foreground: #18181b;
--primary: #2563eb;
--primary-foreground: #ffffff;
--muted: #f4f4f5;
}More of the toolkit
Ready to build your next site?
Start on Cloud in minutes, or scaffold your own project with one command.
$npx create-lyrix-app