> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# RichText

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

<Tabs>
  <Tab title="Block">
    <Frame type="glass" caption="A block Rich Text node for a Text component">
      <img src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/rich-text-block.png?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=ed3e868c53b2174899362d1bd849faba" width="1357" height="848" data-path="images/rich-text-block.png" />
    </Frame>
  </Tab>

  <Tab title="Inline">
    <Frame type="glass" caption="An inline Rich Text node for a Button component">
      <img src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/rich-text-inline.png?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=ca632abd7682b4322c21a844e7f35f99" width="1024" height="640" data-path="images/rich-text-inline.png" />
    </Frame>
  </Tab>
</Tabs>

## Options

<ParamField query="mode" type="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/messages/react-hydration-error) that can occur when placing block level elements into inline level elements. Only available for `v0.10.0` and above. |
</ParamField>

## Prop type

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

## Example

### Block mode

<CodeGroup>
  ```tsx Hero.makeswift.ts theme={null}
  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(),
    },
  });
  ```

  ```tsx Hero.tsx theme={null}
  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>
    );
  }
  ```
</CodeGroup>

### Inline mode

<CodeGroup>
  ```tsx Button.makeswift.ts theme={null}
  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 }),
    },
  });
  ```

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

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

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

## 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.                                |