# Visual Page Builder for Next.js: Build pages from twenty core blocks, styled for each breakpoint.

Add the official Visual Page Builder when your project needs it. Twenty blocks out of the box, and the page renderer takes your own React blocks.

After a developer sets up and deploys Nextly, editors manage content and pages in the admin.

[Start building](https://nextlyhq.com/docs/getting-started/quick-start.md) · [Read the docs](https://nextlyhq.com/docs/page-builder.md)

```bash
npx create-nextly-app@alpha my-app
```

Import the editor’s stylesheet once in your admin page. [Install steps](https://nextlyhq.com/docs/page-builder.md#install)

```ts
import "@nextlyhq/plugin-page-builder/styles/editor.css";
```

## What it does

### A full-screen canvas

The Visual Page Builder opens full-screen, in place of the admin’s sidebars and header.

![The Visual Page Builder with the hero's launch image selected: its block toolbar above it, and the Content tab showing the image's name, source, alt text, loading and caption.](https://nextlyhq.com/captures/builder-image-block-light.png)

[The canvas](https://nextlyhq.com/docs/page-builder.md)

### Style each breakpoint

Style a block separately for each breakpoint: the Style tab edits the breakpoint the canvas is sized to, and the canvas resizes to each breakpoint’s width.

A block’s `supports` decides which style controls the Visual Page Builder offers for it.

Limit: A published page shows the breakpoint styles only when its route passes `siteStyles`.

![The Style tab for the selected heading: spacing and dimensions, then typography with font family, size, weight, line height, letter spacing and alignment.](https://nextlyhq.com/captures/builder-style-panel-light.png)

[Styles and breakpoints](https://nextlyhq.com/docs/page-builder.md)

### Layers, and moves from the keyboard

Move a selected block with Alt+Arrow keys: up and down among its siblings, left and right in and out of containers.

![The Visual Page Builder at 75% with the layers panel open on the feature grid, the grid selected on the canvas, and the keyboard moves listed under the tree: move up, down, in and out.](https://nextlyhq.com/captures/builder-layers-light.png)

[Layers](https://nextlyhq.com/docs/page-builder.md)

### Twenty core blocks

The Visual Page Builder ships with 20 core blocks, from sections and columns to forms, galleries and embeds.

Twenty blocks out of the box, and the page renderer takes your own React blocks.

![The Visual Page Builder with the heading “What shipped in October” selected, and the Style tab showing its typography: Inter Variable, 56px, weight 600.](https://nextlyhq.com/captures/builder-style-tab-light.png)

[Render the pages](https://nextlyhq.com/docs/page-builder.md#render-the-pages)

## In the admin

- After a developer sets up and deploys Nextly, editors manage content and pages in the admin.
- The Visual Page Builder’s canvas draws your page with the same React renderer that serves it. [Docs](https://nextlyhq.com/docs/page-builder.md)

## In your code

- Twenty blocks out of the box, and the page renderer takes your own React blocks. [Docs](https://nextlyhq.com/docs/page-builder.md#render-the-pages)

`app/[...slug]/page.tsx`

```ts
// Hand it to the route beside the core set so the public page can draw it:
blocks: createBlockResolver([...coreBlocks, pricingTable]);
```

`blocks/pricing-table.tsx`

```tsx
import { defineBlock } from "@nextlyhq/plugin-sdk/blocks";

export const pricingTable = defineBlock({
  name: "acme/pricing-table", // must be namespaced
  version: 1,
  description: "A plan comparison table.",
  editor: {
    label: "Pricing Table",
    category: "content",
    keywords: ["plan", "pricing"],
  },
  props: {
    plan: { type: "text" },
  },
  defaultProps: { plan: "Pro" },
  example: { props: { plan: "Pro" } },
  supports: { typography: true, color: true, spacing: true },
  render: ({ props, className }) => (
    <div className={className}>{String(props.plan)}</div>
  ),
});
```

Import the editor’s stylesheet once in your admin page. [Install steps](https://nextlyhq.com/docs/page-builder.md#install)

```ts
import "@nextlyhq/plugin-page-builder/styles/editor.css";
```

[Try the tour](https://nextlyhq.com/page-builder#tour)

A short tour, in your browser, and nothing is saved. Every control it draws is one Nextly 0.0.2-alpha.70 has; a dashed button is a tour shortcut.

## What ships today: in 0.0.2-alpha.70

- **Package:** `@nextlyhq/plugin-page-builder`
- **Release:** `0.0.2-alpha.70` · 25 Oct 2026
- **Licence:** MIT
- **Core blocks:** 20 core blocks
- **Requires:** Node.js 22.12+ or 24+; Next.js 16 with the App Router; React 19
- **Runs on:** Your own PostgreSQL or MySQL database, or SQLite for local work

## Where it stops

- **Breakpoint styles on the live page:** A published page shows the breakpoint styles only when its route passes `siteStyles`. [Docs](https://nextlyhq.com/docs/page-builder.md)
- **A breakpoint, not a device:** The canvas isn’t an iframe, so `vw`, `vh` and hand-written `@media` rules follow the admin window. [Docs](https://nextlyhq.com/docs/page-builder.md)
- **No site preview:** The builder resizes its canvas to breakpoints and has no site preview of its own. [Docs](https://nextlyhq.com/docs/preview.md)
- **Pages in other languages:** The official Pages collection is not translated; a blocks field in a collection you make translatable can be. [Docs](https://nextlyhq.com/docs/localization.md)
- **One stylesheet to import:** Import the editor’s stylesheet once in your admin page. [Docs](https://nextlyhq.com/docs/page-builder.md#install)

Nextly is in alpha. APIs may change before 1.0. Pin exact versions in production.

## Questions

### Is the Visual Page Builder open source?

MIT licensed and included in the open-source packages: `@nextlyhq/plugin-page-builder` 0.0.2-alpha.70. MIT today, and no decision yet about paid offerings.

### Which blocks come with it?

The Visual Page Builder ships with 20 core blocks, from sections and columns to forms, galleries and embeds. Twenty blocks out of the box, and the page renderer takes your own React blocks.

### What reaches the browser?

Pages render on the server, and the core blocks add no JavaScript of their own. The Next.js runtime still loads, and the embed block runs in a sandboxed iframe that may run scripts.

### Who builds the pages?

After a developer sets up and deploys Nextly, editors manage content and pages in the admin.

### Is it a plugin?

The Visual Page Builder is itself a plugin.

## More of Nextly

- [CMS for Next.js](https://nextlyhq.com/nextjs-cms): Runs inside your own Next.js app, on your own PostgreSQL or MySQL database.
- [Publishing](https://nextlyhq.com/publishing): Working drafts, version history and Content Releases.
- [Plugins](https://nextlyhq.com/plugins): The established official plugins: Visual Page Builder, SEO and Form Builder.