npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

strapi-component-preview

v1.0.4

Published

Strapi 5 plugin that adds a preview-url custom field (with native media library picker) and an edit-view side panel showing component screenshots. Content editors pick a screenshot from the media library, its URL is stored on the component instance, and t

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

prathambhatiaprathambhatia

Keywords

strapipluginstrapi-plugincomponent-previewcustom-fieldside-panel

Readme

strapi-component-preview

A Strapi 5 plugin that adds a preview screenshot field to any component and shows all component previews as a side panel in the edit view.

Content editors pick a screenshot from Strapi's native Media Library, its URL is stored on the component instance, and the panel displays it live — reordering components reorders the panel, and duplicate components collapse into a count badge.

Install

npm install strapi-component-preview
# or
yarn add strapi-component-preview
# or
bun add strapi-component-preview

Strapi auto-discovers the plugin — no config/plugins.ts entry required (unless you want to disable it or pass options later).

Rebuild the admin:

npm run build

Add the preview field to your components

You have two options:

Option 1 — Auto-add to all components (recommended)

Run the bundled CLI from the root of your Strapi project:

npx strapi-component-preview

This walks src/components/**/*.json and adds a preview custom field to every component schema (idempotent — safe to re-run).

Option 2 — Manual

In Strapi's Content-Type Builder, edit each component → Add another field → Custom → pick "Preview Screenshot URL". Name the field exactly preview.

Usage

  1. In Strapi Media Library, upload your component screenshots (they can live on any CDN your upload provider supports — local disk, S3, Shopify CDN, Cloudinary, etc.).
  2. Open an entry that uses your components and expand a component.
  3. The preview field shows a URL input + Browse button.
  4. Click Browse → Strapi's native media library opens → pick the screenshot → the URL fills in and the image displays inline.
  5. The Component previews side panel on the right shows all component screenshots for the current entry.

Behavior

  • Dynamic zone: panel items appear in the current order. Reorder components → panel reorders live.
  • Duplicate components in a dynamic zone: single card with • N instances badge.
  • Regular component fields: deduplicated and sorted alphabetically.
  • Fallback: if a component schema has info.preview (a URL) set, it's used as a default when no entry-level value is provided.

What the plugin registers

  • Custom field type: plugin::component-preview.preview-url (stored as string)
  • Custom field UI: URL text input + Media Library browser + inline thumbnail with Change / Clear
  • Content-Manager edit-view side panel: "Component previews"

Supported Strapi versions

Strapi 5.x

License

MIT