Set a preview image

What you'll build

In this how-to, you'll set a preview image for a TextImage brick.

This preview image is shown in the admin interface when editors browse the list of available bricks to add to a page.

Start from the TextImage brick

Suppose you already have a TextImage brick like the one used in the previous guides.

The important part is that it already has a valid schema:

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
}

Now we'll add a preview image to that schema.

Create a preview image from the Playground

Open the Playground and click on the TextImage brick.

If you want, update the text and image so the brick looks exactly the way you want in the preview.

Then click the Get component screenshot button.

When you do that, React Bricks copies to your clipboard a URL from the React Bricks media library with a screenshot of your component.

The URL will look something like this:

https://assets.reactbricks.com/.../images/master/xyz.png

Set previewImageUrl in the schema

Now add the previewImageUrl property to the schema and paste the URL you copied:

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
  previewImageUrl: 'https://assets.reactbricks.com/.../images/master/xyz.png',
}

previewImageUrl tells React Bricks which image to show for this brick in the add-brick interface.

Once you add it, editors can see a visual preview of the brick instead of just its name.

What editors will see

In the admin interface, when you open the UI to add a brick, the Text Image brick will now display its preview image.

This makes it easier for editors to recognize the brick and choose the right one quickly.

A better long-term approach

Using the URL copied from the Playground works, but we suggest a more robust approach for production projects.

Save the screenshot locally in the same folder as the brick, for example as:

brick-preview.png

Then import it in your brick file:

import imgBrick from './brick-preview.png'

And use it in the schema like this:

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
  previewImageUrl: imgBrick.src,
}

Why saving the file locally is better

When you save the preview image next to the brick, the brick becomes more self-contained.

That means:

• the preview image lives together with the component code
• the brick does not depend on an image stored in the DAM of one specific project
• the brick is easier to move, reuse, and share across projects

This is usually the safest option when building reusable bricks or sharing a codebase across multiple React Bricks projects.

Final example

Your schema could look like this:

import imgBrick from './brick-preview.png'
 
TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
  previewImageUrl: imgBrick.src,
}

What's next

Your brick now has a visual preview in the admin interface.

From here, you can keep improving the editing experience by adding more sidebar props, visual fields or nested items.