A canvas, not a cage
Arrange artboards, tune responsive layouts and keep selection handles outside your content.
Build visually.Ship with confidence.
The open-source website builder for React and Next.js. Design visually, reuse layouts and publish responsive pages inside your own application.
The visual layer, rebuilt
Room to design.
Structure to ship.
A focused canvas in the middle. Layers and assets on the left. Style and Luma on the right. Everything you need stays close without getting in the way of the page.
One connected workspace
Move between pages, components and settings with document tabs attached to the canvas.
Control in context
Adjust typography, layout and effects, or review a targeted AI change before applying it.
A system that stays editable
Change once.
Build on it everywhere.
Keep components and linked layouts in Assets. Design shared navigation and footers once, then use a children placeholder for the content that makes each page different.
From first frame to live URLFour moves.
Four moves.
One continuous flow.
No handoff theatre and no rebuilding the same decision in three different tools. Every step happens on the page that will ship.
01
Compose
Start with a blank canvas or a complete responsive system.
02
Connect
Bind APIs, route parameters and forms directly to the page.
03
Refine
Tune breakpoints, variants, typography and motion in context.
04
Publish
Ship the exact experience as semantic, server-rendered output.
Every stage remains editable.Nothing gets flattened on the way to production.
Pagiera AIAsk for direction.
Ask for direction.
Keep the decisions.
Select a layer or mention a target with @. Luma proposes focused text, style and element changes so you can inspect old and new values before applying them. Your existing page stays in place.
Targeted editsBefore & afterYour approval
Design agentWorking in this page
@Hero heading Reduce the font size to 56. Keep the rest of the page unchanged.
Example proposal — nothing changes until you approve.
Target: Hero heading · desktop
Font size: 64 → 56
Review changes before applying
Ask for a change…
Start with momentumA starting point,
A starting point,
never a ceiling.
Each template is a complete responsive system with pages, components and motion—ready to be pulled apart and made yours.
Browse all templatesNocturne StudioPortfolio · 4 pagesOpen preview
A closer look at Pagiera
More than a canvas.
A system for your site.
From reusable page structure to the smallest interaction, create native elements that remain editable after the first design.
01 / Structure
Design once. Reuse across pages.
Build linked layouts with a children placeholder, shared navigation and footers. Combine them with reusable components and variants to keep repeated designs consistent.
- Linked layouts
- Children slots
- Component variants
02 / Interaction
The slide is yours to design.
Compose carousel slides from editable elements, customize navigation and pagination, or drop images and other children into a looping marquee. Your content is not limited to a fixed card template.
- Custom slides
- Carousel controls
- Nested marquees
03 / Expression
Give every detail a little character.
Adjust shader colors, choose icons from Tabler, Lucide and Remix, and combine text hover effects with entrance and scroll-based motion. Style form fields alongside the rest of the page.
- Shader controls
- Text effects
- Form styling
04 / Ownership
Visual editing. Your application.
Install the studio in Next.js, bind Request and Repeat blocks to data, and render published pages on the server. Keep preview, approval and publishing as separate steps.
- SSR runtime
- API-backed content
- Draft & publish
For developers and coding agents
Your next website.
Inside your own stack.
Pagiera is an MIT-licensed React and Next.js website builder, not a separate hosted website account. Install the package, connect your services and keep your design in an editable document.
- 01
Install & connect
Add pagiera to your application. Configure PostgreSQL, Redis and protected editor/API routes. Add an OpenRouter key only if you want to use AI generation.
- 02
Design & refine
Start with native elements or a template. Reuse components and layouts, adjust breakpoints, and review targeted AI proposals before applying them.
- 03
Preview & publish
Save a draft and test its preview. Publish the approved page through Pagiera, then serve it with the runtime. Deploy your application on your own infrastructure.
Before you build
Good questions.
Straight answers.
The setup, the workflow and what you own.
What is Pagiera?
Pagiera is an open-source visual website builder distributed as an npm package for React and Next.js. It combines an editable responsive canvas, reusable components, layouts, page management and a server-rendered publishing runtime inside your application.
Can I host Pagiera in my own Next.js application?
Yes. Install pagiera, connect PostgreSQL and Redis, mount the protected editor and API routes, and render published documents with pagiera/runtime. Your application manages authentication, infrastructure and deployment.
Can an AI coding agent design an editable Pagiera website?
Yes. The package includes an AGENTS.md integration guide for coding agents. Ask your agent to create native Pagiera document elements rather than a separate hardcoded page. The resulting document can be saved, opened in the visual editor, previewed and published.
How do targeted AI edits work?
Select a layer or use @ to choose a target in Luma. Supported requests propose text, style, hover or element additions. Review the old and new values before applying. Breakpoint-targeted requests are limited to supported layout updates. AI generation requires an OpenRouter key; supported operations depend on the installed version.
Can I reuse navigation and footer designs?
Use reusable components and linked layouts for shared structure. Layouts can include a children placeholder for page-specific content, so you do not need to rebuild navigation and footers for every page.
What interactive content can I build?
Pagiera includes editable carousel slides, carousel controls, marquees with child elements, customizable form fields, shader colors, icon libraries, and text hover and scroll effects. Check the installed version for each block's available controls.
Does saving a page make it public?
No. Saving updates the draft. Preview the draft, then publish to update the public page. The home slug maps to /. Publishing content does not deploy your host application or configure a domain.
Is Pagiera free to use?
The Pagiera package is open source under the MIT license. Hosting, PostgreSQL, Redis, AI provider usage and other services can have separate costs. You are responsible for configuring and securing the application.
