strapi-experience-builder-react

React SDK for Strapi Experience Builder. Ships two components:

• ExperienceEditor — a Puck-based visual editor designed to be embedded in the Strapi admin (the strapi-plugin-experience-builder plugin loads it in an iframe and drives it over postMessage).
• ExperienceRender — renders a saved experience in your storefront / any React app, using your own components.

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

Install

npm install @zachariaz/strapi-experience-builder-react @measured/puck

Peer dependencies: react and react-dom (18 or 19).

Render a saved experience

In your storefront, map each Strapi component UID to a React component and pass the content + schema returned by Strapi's REST API:

import { ExperienceRender } from '@zachariaz/strapi-experience-builder-react';

const renderers = {
  'blocks.hero': ({ title, subtitle }) => (
    <section>
      <h1>{title}</h1>
      <p>{subtitle}</p>
    </section>
  ),
};

export function Page({ experience }) {
  return (
    <ExperienceRender
      content={experience.content}
      schema={experience.schema}
      renderers={renderers}
    />
  );
}

Embed the editor

The editor is meant to be loaded by the Strapi plugin in an iframe — it auto-initializes from a postMessage handshake, so the consumer just mounts it and passes the same renderers map used on the storefront:

import { ExperienceEditor } from '@zachariaz/strapi-experience-builder-react';

const renderers = {
  'blocks.hero': ({ title, subtitle }) => (
    <section>
      <h1>{title}</h1>
      <p>{subtitle}</p>
    </section>
  ),
};

export default function EditorPage() {
  return <ExperienceEditor renderers={renderers} />;
}

Requirements

• React 18 or 19
• @measured/puck (peer dep, installed alongside)
• The companion Strapi plugin: strapi-plugin-experience-builder on the backend

License

MIT