Visual Builder setup for any stack: Flexible ways to activate the full editing experience

Visual Builder brings your content to life—literally.

Contentstack’s Visual Builder is an intuitive, on-page editing experience that allows teams to create, update, and preview digital content directly on the page. With drag-and-drop layouts, real-time editing, and marketer-led previews, it bridges the gap between the flexibility of a headless CMS and the usability of a visual editing tool.

But not every team has the same frontend setup—and that’s okay.

Whether you’re using the Live Preview SDK, working with middleware or proxy layers, or just want to get started in staging—we have flexible, supported paths to help you activate Visual Builder in a way that fits your stack.

Why setup flexibility matters

Every frontend is different. Some teams work directly with frameworks like Next.js or Astro, while others use staging environments behind a custom proxy or middleware service. We’ve heard from customers who were unsure whether Visual Builder would “work” with their setup—or whether activating it would require major changes.

The answer? Visual Builder is more flexible than you might think.

There are now multiple supported ways to enable real-time preview and unlock the full Visual Builder experience—so you can move faster, without compromising your architecture.

Your setup, your way: Three supported approaches

Here’s a quick overview of the most common implementation paths:

• Live Preview SDK (recommended): The easiest and most robust way to enable Visual Builder. Works seamlessly with modern frameworks like Next.js, Astro, and Remix, and supports preview routing out of the box.
• Raw API + middleware compatibility: If your frontend doesn’t use the Delivery SDK or sits behind a proxy layer, you can still enable Visual Builder using raw API calls.
• Staging or non-production routes: Many customers choose to enable Visual Builder in their staging environments only. This lets content teams preview and edit in-context, while preserving existing workflows in production.

What does Visual Builder unlock?

Once activated, Visual Builder gives your content team superpowers:

• Build new page layouts using reusable, drag-and-drop components
• Edit content directly on the page with a real-time preview of how it will appear
• Preview future content states with Timeline or view content variations by audience using Audience Preview
• Accelerate your workflows by reducing dependency on developers for every update or layout change

See it in action: Join our small group demo workshop

Want to understand how to move forward based on your current setup?

In this session, we’ll walk through the different ways teams are activating Visual Builder today—and how to evaluate what’s right for you.

You’ll learn how to:

• Evaluate your architecture and choose the right setup path
• Equip your dev team with clear setup guidance
• Unlock real-time preview, Timeline, and audience targeting
• Get your content team working faster—without compromising your tech stack

Register for the workshop here.

Final thoughts: Flexible, fast, and ready when you are

Visual Builder is designed to work with your stack—not against it.

If you’ve been unsure how to move forward, this is your chance to get the answers, resources, and guidance you need to unlock a more powerful content workflow—your way.