Component Preview Thumbnails

Show previews of your components in the CMS component picker

When an editor is selecting a component in CloudCannon, the icon from the component spec is used as the default thumbnail:

hero.bookshop.yml
copied
spec:
  icon: nature_people 

You can provide a custom image to use instead by placing a matching <component>.preview.<format> file in your component directory. This will only be shown when adding new components to a page:

src/
 components/
    hero/
       hero.bookshop.yml
       hero.astro
       hero.preview.png 

You can also specify a <component>.icon.<format> file, which will be shown alongside existing components in CloudCannon's array view:

src/
 components/
    hero/
       hero.bookshop.yml
       hero.astro
       hero.icon.svg 

Open in a new tab