strapi-plugin-experience-builder

A Strapi v5 plugin that adds a Puck-based visual page editor to the Strapi admin. Pages are stored natively in your Strapi content types — there is no separate page store. Opt in per content type via the Content-Type Builder.

Note on package name: this package is temporarily published under @zachariaz/... so it can be installed while the official @solteq/strapi-plugin-experience-builder scope is being set up. The API will not change when it moves.

How it works

The plugin runs inside Strapi: it adds a menu link, a settings page, a side-panel "Edit in Experience Builder" button in the Content Manager, and REST endpoints for schema introspection and content I/O.

The actual editor UI lives in a separate React app that you host yourself. Strapi loads it in an iframe pointed at a configurable URL (default http://localhost:3000/experience). The plugin and the editor communicate over postMessage. The React side is provided by the companion SDK @zachariaz/strapi-experience-builder-react, which exports an ExperienceEditor component you drop into that route.

Install

In your Strapi project:

npm install @zachariaz/strapi-plugin-experience-builder

Enable the plugin in config/plugins.ts (or .js):

export default {
  'experience-builder': { enabled: true },
};

Restart Strapi. "Experience Builder" appears in the admin sidebar.

Set up the editor route

In your storefront (or a dedicated admin-companion app), install the SDK and expose a /experience route that mounts ExperienceEditor. See the SDK README for the snippet.

Iframe headers — important. Strapi loads /experience inside an iframe, so the route's responses must allow it. In a Next.js app this looks like:

// next.config.ts
async headers() {
  const strapiOrigin = process.env.STRAPI_URL ?? 'http://localhost:1337';
  return [
    {
      source: '/(.*)',
      headers: [
        { key: 'Content-Security-Policy', value: `frame-ancestors 'self' ${strapiOrigin}` },
      ],
    },
  ];
}

The equivalent header must be set however your hosting platform serves the route.

Configure the editor URL

In Strapi admin → Settings → Experience Builder, set the editor URL (default http://localhost:3000/experience). When opening the iframe the plugin appends ?_contentType=…&_locale=… so the editor knows what to load.

Enable per content type

In the Content-Type Builder, tick "Enable Experience Builder" on the content types you want to edit visually. An "Edit in Experience Builder" panel will then appear on those entries in the Content Manager.

Optional configuration

• REDIS_URL — set this env var to back the server-side schema-introspection cache with Redis. When unset, the plugin falls back to an in-memory LRU. The ioredis dependency is optional and only required when REDIS_URL is set.

Requirements

• Strapi v5
• React 18 or 19 in your editor-hosting app
• A deployed /experience route using @zachariaz/strapi-experience-builder-react

License

MIT