Implementing Vercel Visual Editing on a Non-Headless Next.js 16 CMS

Visual editing setups usually push you toward a few select headless vendors. But because Nextblock CMS is a full-stack system built natively with Next.js 16 Server Components , we wanted to prove that you can have real-time visual editing without sacrificing architecture or performance.

The Mechanism: Strict JSONB & HTML Tracking
Vercel’s visual editing overlay is actually completely CMS-agnostic. It relies on specific data attributes embedded directly into your rendered DOM nodes to tell the Vercel Toolbar exactly where that content lives inside your administrative backend.

Because Nextblock stores all document structures as strict Tiptap JSONB payloads , we updated our recursive React block rendering component. Now, when draft or preview mode is active, the system injects a dynamic data-vercel-edit-info attribute into the wrapper element of every block. This attribute feeds the exact targeting URL back to the Vercel overlay.

const renderedBlocks = await Promise.all(
blocks.map(async (block, blockIndex) => ({
id: block.id,
node: await renderBlock({
block,
blockIndex,
languageId,
visualEditing,
// Build top-level metadata block attributes
visualEditAttributes: buildVisualEditAttributes(visualEditing, {
kind: "top-level",
blockId: block.id,
blockIndex,
blockType: block.block_type,
}),
}),
}))
);

Zero Bundle Bloat
By conditionally rendering the @vercel/visual-editing package layout component only during draft sessions, production users never download a single extra byte of editing overhead. Your 100/100 Lighthouse score remains completely untouched.

Read the updated /docs to see how to activate Live Draft Mode on your local sandbox environment today!