---
title: Make text visually editable
category: Custom bricks
order: 5
status: published
summary: Make the text in custom brick visually editable by adding a Text component.
estimatedTime: 2 min
keywords: text visually editable component <text>
---

## What you'll build

In this how-to, you'll take the simple `TextImage` brick from the previous guide and make its text visually editable.

Instead of rendering a fixed `"Hello world"` string, you'll:

- add a `title` prop to the brick
- use the React Bricks `<Text>` component
- define how the text should render
- set a default value with `getDefaultProps`

At the end, editors will be able to click on the text directly in the visual editor and change it inline.

## Start from the previous brick

In the previous how-to, the brick looked like this:

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

const TextImage: types.Brick = () => {
  return <h2 className="text-3xl font-extrabold">Hello world</h2>
}

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

export default TextImage
```

Now we'll make that text editable.

## Add a text prop

First, define an interface for the brick props.

We'll add a `title` prop of type `types.TextValue`:

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

Then use that interface in the brick component and read the `title` prop from it.

## Use the `<Text>` component

Import `Text` 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 replace the fixed text with a `<Text>` component:

```tsx {1, 9-16}
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',
}

export default TextImage
```

Here's what each prop does:

- `propName`: the name of the prop to bind
- `value`: the current value of that prop
- `placeholder`: the text shown when the field is empty
- `renderBlock`: how the editable text should be rendered on the page

In this case, we render the title as an `h2` with some Tailwind CSS classes.

## Add default props

Right now, the brick supports editable text, but new instances would start empty.

To provide an initial value, add `getDefaultProps` to the schema:

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

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

## Final code

Your full `TextImage.tsx` file should now 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
```

## Try it in the editor

Now go back to the visual editor and add the `Text Image` brick to a page.

This time, instead of static text, you'll see editable text directly on the page.

You can:

- click on the title
- type new content inline
- see it rendered immediately with your custom styles

This is the basic pattern you'll use for most text-based bricks in React Bricks.

## What's next

Your brick now supports inline visual editing for text.

In the next how-tos, you'll extend it by adding rich text, an image, and sidebar controls to customize layout and appearance.