The visual builder: component palette on the left, a live React canvas in the middle, and the selected heading's settings on the right.
Data panel: a Statistic's value and trend bound to keys from a product catalog data source, with transform and fallback options.
Interactions panel: the Watch the tour button opens a video modal on click, with a form to add more actions.
Checks tab listing accessibility and SEO warnings, such as a skipped heading level and a missing main landmark, with WCAG references.
Mobile preview in the builder: the page reflows to a 375px-wide phone layout.
The example home page rendered by Next.js: navigation, hero heading, call-to-action buttons and statistics bound to live data.
A dashboard page rendered by Next.js with statistics, a bar chart of visits and sign-ups, and a donut chart of traffic by channel.
A pricing page rendered by Next.js with monthly and annual tabs, plan cards, an FAQ accordion and a comparison table.
Layouts admin page listing pages and content templates with their paths, component counts, data sources and an Open builder button.
Data sources admin page listing static JSON, current-node and JSON:API sources, whether each is fetched on the server or in the browser, and the layouts using it.
Style guide page showing design tokens: colour swatches with hex values and the spacing scale.

This project is not covered by Drupal’s security advisory policy.

Visual Next Builder is a drag-and-drop page builder for headless Drupal sites with a Next.js frontend. Editors build pages visually in Drupal, and your Next.js site displays them. No code needed to create or change a page.

It brings the Layout Builder or Site Studio experience to decoupled sites, while your frontend stays a fast, normal Next.js application.

Who is it for?

  • Site builders and editors who want to create landing pages, campaigns and dashboards without waiting for a developer.
  • Frontend developers who want editors to use their own React components.
  • Teams who deploy with Drupal configuration management.

Key features

  • What you see is what you get. The editor shows the real components your Next.js site uses.
  • Drag and drop with desktop, tablet and mobile previews, layers and undo/redo.
  • 32 ready-made components: sections, grids, headings, images, buttons, cards, tables, charts, carousels, tabs, accordions, forms and more.
  • Live data from Drupal or any JSON API, shown in cards, lists and tables.
  • Reusable patterns and design tokens so pages stay on brand.
  • Safe editing: autosaved drafts, preview before publishing, version history with restore, and edit locking.
  • Built for quality: clean, accessible (WCAG 2.1 AA), SEO-friendly and responsive output.
  • Add your own components and use them in the editor alongside the built-in ones.

Requirements

  • Drupal 11.2 or later, PHP 8.3 or later
  • A Next.js 15 or 16 site with React 19

Getting started

  1. Install the module with Composer and enable Visual Next Builder and Visual Next Builder Components.
  2. Add the @visual-next-builder/next package to your Next.js site.
  3. Enter your Next.js site URL under Structure → Next.js layouts → Settings.
  4. Create a layout, drag in components and publish.

Want to try it quickly? Enable the example module for five ready-made demo pages. A complete example Next.js app and a step-by-step guide are included with the module.

Similar projects

Layout Builder and Site Studio work well for Drupal-rendered themes. Visual Next Builder is made for headless sites, where pages are rendered by Next.js instead of Drupal.

Support

Please report bugs and feature requests in the issue queue.

Project information

Releases

1.0.0-alpha2 released 13 November 2026
Works with Drupal: ^11.2
Install:

Development version: 1.0.x-dev updated 13 Nov 2026 at 08:41 UTC

Using Composer to manage Drupal site dependencies