1. Install the plugin in Strapi

npm install @wizestudio/plugin-strapi

Restart Strapi. The plugin registers itself, adds a WizeStudio entry to the admin sidebar, and creates the routes the editor talks to.

2. Install the renderer in your front end

npm install @wizestudio/renderer-react @wizestudio/schema

These are the packages that render your pages in production. They are MIT-licensed and contain no licensing code.

3. Register your widgets

A widget is an ordinary React component plus a manifest describing its props and slots. The manifest is data — the builder reads it, and never imports your component.

4. Publish your widget manifests

The builder only ever reads manifests, so it cannot show a widget it has not been told about. Push them from your front-end project whenever the widget pack changes:

npx wize push

Use npx, not a bare wize. The CLI installs into your project, not onto your system PATH, so typing wize on its own gives “command not found” on macOS and Linux and “not recognized as an internal or external command” on Windows. If you would rather type it directly, install it globally with npm install -g @wizestudio/cli.

Until you do this the widget panel is empty. That is the most common “it isn’t working” — the editor is fine, it simply has nothing to offer. npx wize doctor checks the setup, and npx wize push --dry-run validates without publishing.

5. Render a layout

Fetch the layout document for a page and hand it to the renderer along with your component pack. That is the whole integration: the renderer walks the document and calls your components.

6. Point the editor at your site

Set your front-end URL in the plugin settings. The editor loads your real site in a canvas and drives it over a versioned message protocol, so what you arrange in the builder is exactly what your visitors get.

Licensing

All of the above is MIT licensed and free, with no account, no key and no limits. There is no licence check anywhere in it — you can confirm that before installing.

The separately-sold Agency Pack adds a block library shared across projects and component change impact analysis. Those are additional packages for teams running many sites; nothing here is switched off without them. See what is in it.