A Strapi 5 plugin to preview dynamic zone components in real-time while editing pages
npm install strapi5-component-previewA Strapi 5 plugin that adds real-time component preview functionality to the Content Manager. Preview your dynamic zone components while editing pages with automatic demo data generation.
- šØ Live Preview - See your components rendered in real-time
- š Dark Mode Support - Automatically adapts to Strapi's theme
- š Demo Data Generation - Automatically fills empty fields with placeholder content
- š¼ļø Placeholder Images - Generates placeholder images for media fields
- š Schema-Aware - Reads component schemas to understand field types
- šŖ Inline & External Preview - Preview inline or open in new window
- ā” No Server API Required - Runs entirely client-side
``bash`
npm install @pathi/strapi-plugin-component-preview
`bash`
yarn add @pathi/strapi-plugin-component-preview
Copy the plugin folder to your Strapi project:
`bash`
cp -r strapi-plugin-component-preview ./src/plugins/component-preview
Add to your config/plugins.ts:
`typescript`
export default {
'component-preview': {
enabled: true,
},
};
Create a preview page in your frontend application (Next.js example):
`tsx
// app/preview/component/page.tsx
'use client';
import { useSearchParams } from 'next/navigation';
import { Suspense, useMemo } from 'react';
import { ComponentRenderer } from '@/components/ComponentRenderer';
function PreviewContent() {
const searchParams = useSearchParams();
const componentData = useMemo(() => {
const data = searchParams.get('data');
if (!data) return null;
try {
return JSON.parse(decodeURIComponent(atob(data)));
} catch {
return null;
}
}, [searchParams]);
if (!componentData) {
return
return
}
export default function PreviewPage() {
return (
š Usage
1. Open any Page (or content type with dynamic zones) in Strapi admin
2. Look for the "Component Preview" panel in the right sidebar
3. Toggle "Fill Empty Fields" to generate demo data
4. Click on a component to preview inline
5. Use the ā button to open in a new window
šÆ Demo Data Generation
The plugin intelligently generates demo data based on:
| Field Type | Generated Value |
|------------|-----------------|
| String fields | Field name (e.g.,
title ā "title") |
| Media fields | Placeholder image with field name |
| Component fields | Recursively generated from schema |
| Repeatable components | 1 demo item |
| Empty arrays | 1 demo item |$3
Media fields get placeholder images from placehold.co:
`
https://placehold.co/800x600/4945FF/FFFFFF?text=fieldName
`šØ Theme Support
The plugin automatically adapts to Strapi's theme:
- Uses Strapi Design System tokens
- Works with both light and dark mode
- Consistent with Strapi's UI
š Project Structure
`
strapi-plugin-component-preview/
āāā admin/
ā āāā src/
ā āāā components/
ā ā āāā PreviewButton.tsx # Main preview component
ā ā āāā PreviewPanel.tsx # Preview panel wrapper
ā ā āāā Initializer.tsx # Plugin initializer
ā āāā pages/
ā ā āāā App.tsx
ā ā āāā HomePage.tsx
ā āāā translations/
ā ā āāā en.json
ā ā āāā tr.json
ā āāā index.ts # Admin entry point
āāā server/
ā āāā src/
ā āāā index.ts # Server entry point
āāā frontend-examples/
ā āāā nextjs-app-router/
ā ā āāā page.tsx
ā āāā ComponentRenderer.tsx
āāā package.json
āāā README.md
``- Strapi v5.0.0 or higher
- Node.js 18+
- A frontend application with a preview route
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License - see LICENSE for details.
Created by Pathi
---
Note: This plugin requires a frontend application to render the components. The plugin sends component data via URL parameters to your frontend preview page.