● schema-driven · no code export needed

Design. Assemble.
Launch.

Set a theme once, drop in structured sections — hero, FAQ, testimonials, CTA and more — drag them into order, and preview exactly what ships across desktop, tablet, and mobile.

Next.js TypeScript Material UI
Desktop Tablet Mobile
Manrope · 14px radius
// what it does

Everything is a schema.

Structured fields per section type, so nothing is a raw config you have to guess at.

Schema-driven sections

Hero, FAQ, About, Testimonials, Social Proof, CTA, Header, Footer — each with its own fixed, editable fields.

Live theme editor

Primary color, background, font family, heading and paragraph sizes, button styles — applied instantly everywhere.

Drag-and-drop pages

Reorder sections within a page with dnd-kit. Multiple pages by slug, switch between them freely.

Controlled animation

Fade-up, fade-in, slide-left, slide-right, zoom-in — picked from a menu, run through Framer Motion under the hood.

Version history

Theme, sections, and page layout are each their own stage — save a version, reload any earlier one.

Real device preview

A dedicated preview route renders the live page with desktop, tablet, and mobile toggles — no guessing at breakpoints.

// workflow

From blank project to shipped page.

Four stages, each versioned on its own.

01

Set the theme

Pick a primary color, background, font, and type scale. It applies across every section.

02

Add sections

Choose from schema-defined types and fill in the fields — no raw JSON to hand-edit.

03

Arrange the page

Drag sections into order, across as many pages as you need, each with its own slug.

04

Preview & version

Check desktop, tablet, and mobile, then save a version you can always come back to.

// built with

Stack

Local-first today, with a Supabase-backed persistence layer planned for the next stage.

Next.js (App Router) TypeScript Material UI Zustand Framer Motion dnd-kit Supabase (planned)

Ready to assemble?

Clone it, run npm install, and start building your first themed page.