Strapi Plugin: Smart Preview

A production-ready plugin for Strapi v4 / v5 that injects a "Smart Preview" button directly into the Content Manager's edit view. It dynamically uses the current content type and entry ID to build a configurable preview URL, allowing content editors to easily preview their work on your frontend.

✨ Features

• Dynamic Preview URLs — Constructs <basePreviewUrl>?type=<contentType>&id=<id> automatically.
• Works for ANY Content Type — Automatically identifies the current Collection Type or Single Type UID.
• Save-Aware — The button is disabled until the entry is saved (an ID is generated). Tooltips inform the user.
• Configurable — Set the base preview URL via Strapi plugin config or environment variables.
• Token Support — Optionally pass a token query parameter for secure preview endpoints.
• Zero Dependencies — Uses only Strapi's built-in design system and React.

📦 Installation

npm install strapi-plugin-smart-preview
# or
yarn add strapi-plugin-smart-preview

⚙️ Configuration

Enable the plugin in your config/plugins.js (or .ts):

module.exports = ({ env }) => ({
  'smart-preview': {
    enabled: true,
    config: {
      previewBaseUrl: env('PREVIEW_BASE_URL', 'http://localhost:3000/preview'),
      previewToken: env('PREVIEW_TOKEN', null),
    },
  },
});

Environment Variables

🚀 Usage

1. Install the plugin and configure it as shown above.
2. Start your Strapi server (npm run develop).
3. Navigate to Content Manager.
4. Open an existing entry or create a new one.
5. Save the entry if it's new.
6. Click the Smart Preview button located on the right side of the edit view.

The button opens a new tab with:

<previewBaseUrl>?type=<content-type-uid>&id=<entry-id>&token=<optional-token>

🔧 How It Works

The plugin:

1. Registers itself with Strapi's plugin system during register().
2. Injects a PreviewButton React component into the Content Manager's edit view via bootstrap().
3. The button reads the current URL to determine the content type UID and entry ID.
4. On click, it builds a preview URL using the configured base URL and opens it in a new tab.
5. The base URL is fetched from the server-side config, which merges plugin config and env variables.

📋 Compatibility

📄 License

MIT — Made with ❤️ by Techexplified