Visual Editor
Drag. Drop. Done.
Compose pages visually without losing control over the code. Lyrix's Visual Editor bridges the gap between developers and content creators.
Drag & drop interface
Code-First Blocks
Every visual element maps directly to your React components, keeping your codebase clean and predictable.
True Drag & Drop
Rearrange sections, adjust layouts, and see changes in real-time, exactly as your users will see them.
Nested Composition
Build complex, responsive layouts by nesting blocks within slots, giving you unlimited design flexibility.
Inside /lx-admin
One canvas, three panels.
The editor ships inside your project at /lx-admin. Sign in with your project ID and you're editing the real pages of your site.
Elements
Every widget and saved block, ready to drag onto the canvas.
Settings
Edit the selected element's content and links, and see the canvas update as you type.
Layers
See the page as a tree, reorder sections, and select anything nested inside a container.
The widget library
22 widgets, ready to drop in.
Start from the built-in set, then save any section as a block and reuse it on every page. Edit the block once and every page using it updates.
- Hero
- Heading
- Text
- Image
- Video
- Button
- CTA
- Feature grid
- Image box
- Icon box
- Icon
- Icon list
- Testimonial
- Accordion
- Tabs
- Alert
- Star rating
- Progress bar
- Social icons
- Divider
- Spacer
- Container
- + your own blocks
Responsive preview
Check every screen size.
Switch the canvas between desktop, tablet and mobile while you edit, so nothing ships broken on a phone.
Built for speed
Keyboard first.
Every edit goes into history, so you can experiment freely and step back at any time.
- UndoCtrlZ
- RedoCtrlY
- CopyCtrlC
- CutCtrlX
- PasteCtrlV
- DuplicateCtrlD
- DeleteDel
Use ⌘ instead of Ctrl on macOS.
When you hit publish
Your page becomes plain JSON.
Nothing is locked away. Each page is a JSON file in your repo that you can diff, review in a pull request, and roll back like any other code. The renderer turns it into real React on the server.
{
"version": 1,
"title": "Home",
"path": "/",
"elements": [
{
"id": "hero-1",
"type": "hero",
"props": {
"title": "Build pages visually",
"buttonLabel": "Get started",
"buttonHref": "/register"
}
},
{
"id": "pricing",
"type": "block-ref",
"props": { "title": "Pricing", "blockSlug": "pricing" }
}
]
}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