Create a brick

Customize rich text styles

Customize the RichText render functions for bold text and links.

Estimated time: 3 minRaw Markdown

What you'll build

In this how-to, you'll customize how your RichText field renders bold text and links.

You'll:

override renderBold to change the bold style
override renderLink to style links
import the React Bricks Link component

At the end, your rich text will use a pink bold style and custom blue links.

Start from the previous guide

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

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

Now we'll customize how bold text and links are rendered.

Customize the bold style

First, add a renderBold prop to the RichText component:

<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>}
/>

This replaces the default bold renderer with your own markup and classes.

Customize the link style

Now let's customize how links are rendered.

Import Link 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 use it inside renderLink:

import { Link, RichText, Text, types } from 'react-bricks/rsc'
 
// ...
;<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>
  )}
/>

Why use the React Bricks `Link` component

It's important to use the React Bricks Link component, imported from react-bricks/rsc in Next.js App Router projects or from react-bricks/astro in Astro projects, not a plain <a> tag and not the framework link directly in this render function.

On the admin interface, this React Bricks Link is visually editable and does not trigger navigation when you click it. That lets editors select and edit the link text without accidentally opening the page.

Under the hood, React Bricks uses the link component from the platform. In this project, that means the Next.js Link component is used for internal links.

Why style the link explicitly

If you're using Tailwind CSS, links are unstyled by default.

So even when the link feature is enabled, you usually want to provide renderLink with classes to make links clearly visible and interactive.

In this example we use:

text-sky-500 for the default color
hover:text-sky-600 for the hover state
transition-colors for a smoother hover effect

A note about `rel` and security

React Bricks passes the correct rel value to your renderLink function.

So if an editor creates a link with target="_blank", React Bricks can also provide the proper rel attribute for security reasons, such as noopener noreferrer.

That's why the custom render function should pass rel={rel} through to the Link component.

Final code

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

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

Try it in the editor

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

Now you can:

make part of the description bold and see it render in pink
add a link and see it render with your custom link styles
edit links visually in the admin without triggering navigation

What's next

Your rich text now has custom rendering for both bold text and links.

From here, you can keep customizing other rich-text styles or move on to adding images and sidebar controls.