> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# RichText

> Adds a Rich Text control in the Makeswift builder to visually edit a `ReactNode` of text.

Adds a Rich Text control in the Makeswift builder to visually edit a `ReactNode` of text.

#### Block

![](/_fern-img/d07023be09df86cb565ea8d701142b2e219ad4ee0537f2d93c1977627c88978b.webp)

#### Inline

![](/_fern-img/1b7d53e4738276d666f7b452ce1e3e524522fb1c08da4cfc3f6073b511ae8005.webp)

## Options

**`mode`** `RichText.Mode.Block | RichText.Mode.Inline` — default: RichText.Mode.Block

Sets the `display` property of the `ReactNode` that is passed to the control. This is useful for visually editing buttons and links.

| Mode                   | Description                                                                                                                                                                                                                                                                                                   |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `RichText.Mode.Block`  | Use for creating editable full line blocks of your site. Passes a `ReactNode` that is `display: block`.                                                                                                                                                                                                       |
| `RichText.Mode.Inline` | Use for visually editing buttons and links. Passes a `ReactNode` that is `display: inline`. Prevents [hydration mismatch errors](https://nextjs.org/docs/messages/react-hydration-error) that can occur when placing block level elements into inline level elements. Only available for `v0.10.0` and above. |

---

## Prop type

The RichText control passes a `ReactNode` to your component.

## Example

### Block mode

**`Hero.makeswift.ts`**

```tsx Hero.makeswift.ts
import { RichText } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Hero } from "./Hero";

runtime.registerComponent(Hero, {
  type: "hero",
  label: "Hero",
  props: {
    headline: RichText(),
  },
});
```

**`Hero.tsx`**

```tsx Hero.tsx
interface Props {
  headline: ReactNode;
}

export function Hero() {
  return (
    <div className="flex gap-4 justify-center">
      <img src="https://placehold.it/500" />
      <h1>{headline}</h1>
    </div>
  );
}
```

### Inline mode

**`Button.makeswift.ts`**

```tsx Button.makeswift.ts
import { RichText, Image } from "@makeswift/runtime/controls";
import { runtime } from "@/lib/makeswift/runtime";

import { Button } from "./Button";

runtime.registerComponent(Button, {
  type: "button",
  label: "Button",
  props: {
    children: RichText({ mode: RichText.Mode.Inline }),
  },
});
```

**`Button.tsx`**

```tsx Button.tsx
interface Props {
  children: ReactNode;
}

export function Button({ children }: Props) {
  return <a className="px-4 py-3 rounded bg-black text-white">{children}</a>;
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).

## Changelog

| Version                                                                                          | Changes                                                       |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- |
| [`v0.10.0`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.10.0) | Overhauled control architecture and introduced `Inline` mode. |
| [`v0.6.3`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.6.3)   | Introduced `RichText` control.                                |