---
title: Add rich text
category: Custom bricks
order: 6
status: published
summary: Add a RichText component to your custom brick for editable formatted text.
estimatedTime: 2 min
keywords: rich text richtext bold link editable <richtext>
---

## What you'll build

In this how-to, you'll extend the `TextImage` brick from the previous guide by adding a `description` field rendered with the React Bricks `<RichText>` component.

You'll:

- add a `description` prop to the component interface
- import `RichText`
- render a `<RichText>` component below the existing `<Text>`
- set a default value in the schema

At the end, editors will be able to edit formatted text below the title directly in the visual editor.

## Start from the previous brick

After the previous guide, your `TextImage` brick should look like this:

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

interface TextImageProps {
  title: types.TextValue
}

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

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

  getDefaultProps: () => ({
    title: 'Thick as a brick',
  }),
}

export default TextImage
```

Now we'll add a rich-text description below the title.

## Add the `description` prop

First, update the component interface to include a `description` field:

```tsx {5}
interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}
```

Then read both props from the component:

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

## Import and render `<RichText>`

Now import `RichText` 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 it right after the existing `<Text>` component:

```tsx {1, 8, 20-31}
import { 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,
        ]}
      />
    </>
  )
}
```

Here:

- `propName="description"` binds the editor to the `description` prop
- `value={description}` passes the current rich-text value
- `renderBlock` defines how each paragraph is rendered
- `allowedFeatures` limits formatting to `Bold` and `Link`

## Add the default value in the schema

To make the new field start with content, add `description` to `getDefaultProps`:

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

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

## Final code

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

```tsx
import { 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,
        ]}
      />
    </>
  )
}

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 the `Text Image` brick again.

Now you'll have:

- an editable title
- a rich-text description underneath
- basic formatting controls for bold and links

This is a great next step when a plain text field is not enough and editors need simple formatting options.

## What's next

Your brick now supports both a simple text field and a rich-text field.

In the next how-tos, you can keep extending it by adding an image and sidebar controls.