---
title: Add an editable image
category: Custom bricks
order: 8
status: published
summary: Add a visually editable image to your custom brick and place it beside the text.
estimatedTime: 3 min
keywords: image editable visual iimagesource
---

## What you'll build

In this how-to, you'll add a visually editable image to a `TextImage` brick using the React Bricks `<Image>` component.

You'll:

- add an `image` prop to the component interface
- import `Image` from the React Bricks package for your platform
- wrap the brick in a `container`
- create a two-column grid with text on the left and image on the right

At the end, editors will be able to upload and replace the image directly in the visual editor.

## Start from the previous example

If you're starting from the brick used in the previous how-to, your `TextImage` should look like this:

```tsx
import { Link, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}

const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  return (
    <>
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />

      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Link,
        ]}
        renderBold={({ children }) => (
          <b className="text-pink-500">{children}</b>
        )}
        renderLink={({ children, href, target, rel }) => (
          <Link
            href={href}
            target={target}
            rel={rel}
            className="text-sky-500 hover:text-sky-600 transition-colors"
          >
            {children}
          </Link>
        )}
      />
    </>
  )
}

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

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}

export default TextImage
```

Now we'll add an image and place the content in two columns.

## Add the `image` prop

First, import `Image` from `react-bricks/rsc` if you're using Next.js with the App Router, or from `react-bricks/astro` if you're using Astro, and add a new `image` prop to the interface:

```tsx {1, 6}
import { Image, Link, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
}
```

Then read `image` from the component props:

```tsx {4}
const TextImage: types.Brick<TextImageProps> = ({
  title,
  description,
  image,
}) => {
```

`types.IImageSource` is the type React Bricks uses for editable image fields.

## Add the container and grid layout

Now wrap the brick in a `container` and use a two-column grid:

```tsx {8-9}
return (
  <div className="container">
    <div className="grid lg:grid-cols-2 gap-12">
      <div>{/* current text content goes here */}</div>
      <div>{/* image goes here */}</div>
    </div>
  </div>
)
```

This gives you:

- text on the left
- image on the right on large screens
- a single-column layout on smaller screens

## Add the image component

Inside the grid, create one `<div>` for the text and one for the image:

```tsx {41-47}
<div className="container">
  <div className="grid lg:grid-cols-2 gap-12">
    <div>
      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />

      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
        allowedFeatures={[
          types.RichTextFeatures.Bold,
          types.RichTextFeatures.Link,
        ]}
        renderBold={({ children }) => (
          <b className="text-pink-500">{children}</b>
        )}
        renderLink={({ children, href, target, rel }) => (
          <Link
            href={href}
            target={target}
            rel={rel}
            className="text-sky-500 hover:text-sky-600 transition-colors"
          >
            {children}
          </Link>
        )}
      />
    </div>

    <div>
      <Image
        propName="image"
        source={image}
        alt="Image"
        maxWidth={800}
        aspectRatio={16 / 9}
      />
    </div>
  </div>
</div>
```

Here:

- `propName="image"` binds the editor field to the `image` prop
- `source={image}` passes the current image value
- `alt="Image"` is the fallback alt text
- `maxWidth={800}` helps React Bricks optimize the generated images
- `aspectRatio={16 / 9}` keeps the image shape consistent

## Why `maxWidth` matters

React Bricks uses the `maxWidth` value to generate optimized responsive images.

That means it can create image sizes appropriate for the actual space used by the brick, instead of serving a larger image than necessary.

## Final code

Your full `TextImage.tsx` file should now look like this:

```tsx
import { Image, Link, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
}

const TextImage: types.Brick<TextImageProps> = ({
  title,
  description,
  image,
}) => {
  return (
    <div className="container">
      <div className="grid lg:grid-cols-2 gap-12">
        <div>
          <Text
            propName="title"
            value={title}
            placeholder="Type a title..."
            renderBlock={({ children }) => (
              <h2 className="text-3xl font-extrabold">{children}</h2>
            )}
          />

          <RichText
            propName="description"
            value={description}
            placeholder="Type a description..."
            renderBlock={({ children }) => (
              <p className="text-lg text-slate-600">{children}</p>
            )}
            allowedFeatures={[
              types.RichTextFeatures.Bold,
              types.RichTextFeatures.Link,
            ]}
            renderBold={({ children }) => (
              <b className="text-pink-500">{children}</b>
            )}
            renderLink={({ children, href, target, rel }) => (
              <Link
                href={href}
                target={target}
                rel={rel}
                className="text-sky-500 hover:text-sky-600 transition-colors"
              >
                {children}
              </Link>
            )}
          />
        </div>

        <div>
          <Image
            propName="image"
            source={image}
            alt="Image"
            maxWidth={800}
            aspectRatio={16 / 9}
          />
        </div>
      </div>
    </div>
  )
}

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

  getDefaultProps: () => ({
    title: 'Thick as a brick',
    description: 'Another brick in the wall',
  }),
}

export default TextImage
```

## Try it in the editor

Go back to the visual editor and add or edit the `Text Image` brick.

Now you can:

- click the image placeholder to upload an image
- replace the image directly in the editor
- keep editing the title and description inline
- see the layout switch to two columns on larger screens

If you don't set an alt text in the editor, the fallback `"Image"` value is used.

## What's next

Your brick now combines editable text, rich text, and an editable image.

The next step is usually to add sidebar controls for layout and appearance, such as toggles, select options, or alignment settings.