Skip to main content

Visual Editor Setup

This guide installs the Visual Editor script (bildit-cms-script.min.js) so your team can click into slots and edit scheduled content inside the Visual Editor.

This does not render scheduled content on your production website

The Visual Editor script powers editing inside the Visual Editor only — it does not display scheduled content to your site's visitors. Production-site rendering is done by the @bildit-platform/nextjs SDK. You set up both: this script (to edit) and the SDK (to render). For Next.js, both are covered end to end in the Next.js Integration Guide.

Framework support

This is documented for Next.js today. React and Hydrogen guides are on the way and follow the same model.

Prerequisites​

  • A Next.js (App Router) project already rendering content via the @bildit-platform/nextjs SDK — see the Next.js Integration Guide.
  • A web instance in the VEE with at least one published scheduled content item that has a Location assigned.
  • Access to your project's public/ directory.

Step 1 — Download your script​

Download bildit-cms-script.min.js from the Visual Experience Engine — open your website and click Download script.

The script self-configures — download your own

Each website has its own script, with that site's web ID and settings baked in. Download your site's script; don't reuse another site's.

Step 2 — Host it in your project​

Save the file as public/scripts/bildit-cms-script.min.js. The editor bridge (next step) loads it from that exact path.

Step 3 — Wire the editor bridge​

The site becomes editable through a small editor bridge in your root layout — not a direct <script> tag. On load it posts IFRAME_READY; when the VEE Live Editor posts INJECT_SCRIPT, it injects /scripts/bildit-cms-script.min.js and posts SCRIPT_INJECTED. On your public site nothing posts INJECT_SCRIPT, so visitors never download the editor.

The exact app/layout.tsx snippet lives in the Next.js Integration Guide → Fetch content and wire the editor bridge.

Nothing to configure by hand

You do not set window.WEB_ID, add a pageData object, or add a toolbar_container div. The downloaded script carries its own web ID and creates its own toolbar. (Older installs that hand-set window.WEB_ID and a toolbar div are no longer needed.)

Step 4 — Mark your slots​

Place a <SlotPlaceholder> wherever scheduled content should appear. slotId must match the web slot assigned to that scheduled content in the VEE — see Integration Guide → Place your slots.

import { SlotPlaceholder } from '@bildit-platform/nextjs'

<SlotPlaceholder slotId="slot1" />

Step 5 — Verify the editor loads​

In the VEE, open your website's settings and click Verify. It drives the editor handshake against your live site and confirms the script loads and matches your web ID. A green result means the VEE can open the Visual Editor on your page.

Then open your site from the VEE to start editing your slots.

Checklist​

  • bildit-cms-script.min.js downloaded (your own site's) and saved to public/scripts/
  • Editor bridge wired in your root layout (see Integration Guide → Step 6)
  • Slots marked with <SlotPlaceholder>
  • Web instance configured, scheduled content created and assigned a Location
  • Editor load confirmed with the VEE Verify button

Next Steps​

Common Setup Issues​

Editor doesn't open / slots aren't editable​

The editor bridge must be in your root layout, and public/scripts/bildit-cms-script.min.js must exist at that exact path. Confirm with the Verify button.

Scheduled content not showing on the production site​

This script does not render on your production site — that's the SDK's job. Follow the Next.js Integration Guide; if scheduled content renders in the Visual Editor but not on production, see If your production site is blank.

Support​

If you hit issues, see the Troubleshooting Guide or contact support with your installation details.