@devxcommerce/strapi-plugin-preview

Preview each dynamic-zone block in the Strapi 5 Content Manager edit view, as a side panel.

For each block in a dynamic zone, the panel shows a preview image you pick per component (from the Media Library); if a component has no image configured it shows a simple empty box labeled with the component's name. Configuration is centralized on a Settings page — no fields are added to your component schemas.

This complements Strapi's native full-page Preview; it solves in-editor block identification.

Install

bun add @devxcommerce/strapi-plugin-preview
# or: npm install @devxcommerce/strapi-plugin-preview

Rebuild the admin:

bun run build

The plugin is auto-discovered (via its strapi.kind: 'plugin' marker) — no config/plugins.ts entry required. Its internal id is component-preview; disable it with 'component-preview': { enabled: false }.

Usage

1. Settings → Global Settings → Preview lists every component used in a dynamic zone. For each, click the pencil to open the Media Library and pick (or upload) a preview image. Save.
2. Open any entry with a dynamic zone — the Preview side panel lists each block in order, showing the picked image for its component (or an empty box with the component's name). The list updates live as you add/reorder blocks.

Permissions

• Read (so the panel renders) — any authenticated admin.
• Edit (the Settings page + the config write API) — gated by plugin::component-preview.configure (Super Admin by default; grant per role in Settings → Roles).

How it works

| Part | Mechanism | |------|-----------| | Side panel | Registered via the official addEditViewSidePanel content-manager API (no admin patching) | | Live block list | The panel reads the edit-view form state via useForm and discovers dynamic-zone blocks from the live values, so it reflects unsaved adds/reorders | | Image picker | The native Media Library modal, pulled from the admin component registry (useStrapiApp(...).components['media-library']) the upload plugin populates | | Config | Server core-store (strapi.store) via GET / PUT /component-preview/config; shape { components: { [uid]: { image: { url, alt } } } } |

Troubleshooting

• The image-picker button is disabled / the Settings page errors when dev-linked: if you install this plugin via a local file:/symlink for development, the bundler can resolve a second copy of @strapi/admin, which breaks the shared admin React context (the media-library registry comes up empty). Install it as a normal dependency (npm/tarball) — a published install copies the package and dedupes @strapi/admin, so the picker works in both strapi develop and a production build.

License

MIT