---
title: RichText
description: >-
  The `RichText` component renders a metafield of type `rich_text_field`. By
  default the rendered output uses semantic HTML tags. Customize how nodes are
  rendered with the `components` prop.
api_version: 2024-04
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2024-04/components/richtext'
  md: 'https://shopify.dev/docs/api/hydrogen/2024-04/components/richtext.md'
---

# Rich​Text

The `RichText` component renders a metafield of type `rich_text_field`. By default the rendered output uses semantic HTML tags. Customize how nodes are rendered with the `components` prop.

## Props

* **data**

  **string**

  **required**

  The JSON string that correspond to the Storefront API's [RichText format](https://shopify.dev/docs/apps/custom-data/metafields/types#rich-text-formatting).

* **as**

  **ComponentGeneric**

  An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

* **components**

  **CustomComponents**

  Customize how rich text components are rendered

* **plain**

  **boolean**

  Remove rich text formatting and render plain text

### CustomComponents

* root

  The root node of the rich text. Defaults to \`\<div>\`

  ```ts
  ({ node, }: { node: { type: "root"; children?: ReactNode[]; }; }) => ReactNode
  ```

* heading

  Customize the headings. Each heading has a \`level\` property from 1-6. Defaults to \`\<h1>\` to \`\<h6>\`

  ```ts
  ({ node, }: { node: { type: "heading"; level: number; children?: ReactNode[]; }; }) => ReactNode
  ```

* paragraph

  Customize paragraphs. Defaults to \`\<p>\`

  ```ts
  ({ node, }: { node: { type: "paragraph"; children?: ReactNode[]; }; }) => ReactNode
  ```

* text

  Customize how text nodes. They can either be bold or italic. Defaults to \`\<em>\`, \`\<strong>\` or text.

  ```ts
  ({ node, }: { node: { type: "text"; italic?: boolean; bold?: boolean; value?: string; }; }) => ReactNode
  ```

* link

  Customize links. Defaults to a React Router \`\<Link>\` component in Hydrogen and a \`\<a>\` in Hydrogen React.

  ```ts
  ({ node, }: { node: { type: "link"; url: string; title?: string; target?: string; children?: ReactNode[]; }; }) => ReactNode
  ```

* list

  Customize lists. They can be either ordered or unordered. Defaults to \`\<ol>\` or \`\<ul>\`

  ```ts
  ({ node, }: { node: { type: "list"; listType: "unordered" | "ordered"; children?: ReactNode[]; }; }) => ReactNode
  ```

* listItem

  Customize list items. Defaults to \`\<li>\`.

  ```ts
  ({ node, }: { node: { type: "list-item"; children?: ReactNode[]; }; }) => ReactNode
  ```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {RichText} from '@shopify/hydrogen';

  export function MainRichText({metaFieldData}) {
    return (
      <RichText
        data={metaFieldData}
        components={{
          paragraph({node}) {
            return <p className="customClass">{node.children}</p>;
          },
        }}
      />
    );
  }
  ```

  ##### TypeScript

  ```tsx
  import {RichText} from '@shopify/hydrogen';

  export function MainRichText({metaFieldData}: {metaFieldData: string}) {
    return (
      <RichText
        data={metaFieldData}
        components={{
          paragraph({node}) {
            return <p className="customClass">{node.children}</p>;
          },
        }}
      />
    );
  }
  ```