Strapi Plugin: Component Preview

A 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.

!Component Preview

✨ Features

- 🎨 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

📦 Installation

$3

``bash
npm install @pathi/strapi-plugin-component-preview
`

$3

`bash
yarn add @pathi/strapi-plugin-component-preview
`

$3

Copy the plugin folder to your Strapi project:

`bash
cp -r strapi-plugin-component-preview ./src/plugins/component-preview
`

⚙️ Configuration

$3

Add to your config/plugins.ts:

`typescript
export default {
'component-preview': {
enabled: true,
},
};
`

$3

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