Build Pages.Own Your Code.Ship Faster.

Define blocks as React components

No PHP. No proprietary templating. A block is just a typed React component — lives in your codebase, versioned with git, works with your design system.

// functions.php
register_post_type('hero_block', [...]);
add_meta_box(
  'hero_fields', 'Hero Fields',
  'render_hero_meta', 'hero_block'
);
// + 200 more lines...

import { defineBlock } from 'lyrix/blocks'

export const HeroBlock = defineBlock({
  name: 'Hero',
  schema: {
    title: { type: 'string' },
    subtitle: { type: 'string' },
  },
  render: ({ title, subtitle }) => (
    <section>...</section>
  )
})

Visual composition outputs typed JSON

Editors build pages visually in Lyrix Studio. Under the hood it's a JSON array of blocks — typed, yours, stored wherever you want.

// what your app receives
{
  blocks: [
    { type: "Hero",     data: { title: "Welcome", subtitle: "..." } },
    { type: "Features", data: { items: [...] } },
    { type: "CTA",      data: { label: "Get Started" } },
  ]
}

You own the entire render lifecycle

No hidden magic. Fetch the JSON, map over the blocks, render your components. That's the entire system.

// page.tsx — the entire rendering pattern
const { blocks } = await getPage(slug)
const registry = { HeroBlock, FeaturesBlock, CTABlock }

return blocks.map(({ type, data }) => {
  const Block = registry[type]
  return <Block key={type} {...data} />
})

You control SSR vs SSG, caching, styling, error boundaries — everything. Lyrix never touches your render output.