Make text visually editable

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:

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:

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:

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:

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:

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.