---
title: Set a preview image
category: Custom bricks
order: 10
status: published
summary: Set a preview image for your brick so editors can recognize it more easily in the add-brick interface.
estimatedTime: 3 min
keywords: preview image previewimageurl playground screenshot brick preview
---

## 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:

```tsx
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:

```tsx
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:

```tsx {4}
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:

```bash
brick-preview.png
```

Then import it in your brick file:

```tsx {1}
import imgBrick from './brick-preview.png'
```

And use it in the schema like this:

```tsx {4}
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:

```tsx
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.