Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# RichText

Formatted text authored as HTML, with inline styling and links. Use it for fields that
need more than a plain string, such as a description or article body where the Wix user
controls formatting like bold, color, alignment, and lists. The runtime value carries the
rendered HTML together with a separate list of the links it contains, so you can drop the
markup straight into the page or work with the links on their own without parsing it.

## Component

In your component code, import the `RichText` type from `@wix/editor-react-types`:

```ts
import type { RichText } from '@wix/editor-react-types';
```

A `RichText` has the following properties:

<PropertyList bordered>
  <Property
    name="text"
    type="string"
    required
    description="The original rich text content."
  />
  <Property
    name="html"
    type="string"
    required
    description="The content as HTML, with links resolved. Render this."
  />
  <Property name="linkList" type="Link[]" required>
    Every link in the content, each a
    [Link](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/link).
  </Property>
</PropertyList>

### Usage

Your code either consumes a value of type `RichText` or produces one:

::::tabs
:::Consumers
In a component that receives a `RichText`, render `html` and read `linkList` as
needed:

```tsx
import type { RichText } from '@wix/editor-react-types';

function ProductCard({ description }: { description?: RichText }) {
  return <div dangerouslySetInnerHTML={{ __html: description?.html ?? '' }} />;
}
```
:::
:::Producers
When your code produces a `RichText`, for a context or a function return, set all
three fields consistently: `text` is the raw content, `html` is valid markup with resolved
`href`s, and `linkList` holds a `Link` for each link in that markup:

```ts
import type { RichText, Link } from '@wix/editor-react-types';

const learnMore: Link = { href: 'https://example.com', target: '_blank', rel: 'noopener' };

const description: RichText = {
  text: 'Handmade from recycled materials. Learn more',
  html: '<p>Handmade from recycled materials. <a href="https://example.com" target="_blank" rel="noopener">Learn more</a></p>',
  linkList: [learnMore],
};
```
:::
::::

## Manifest

In your manifest, declare the field with the `richText` dataType:

```json
{ "dataType": "richText" }
```

### Declaration

Declare a `richText` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should edit the `description` in a panel. It
takes `dataType`, `displayName`, an optional `defaultValue`, and the options that follow:

```json
{
  "description": {
    "dataType": "richText",
    "displayName": "Product Description",
    "defaultValue": {
      "text": "<p>Handmade from recycled materials. <a dataquery=\"#learnMore\">Learn more</a></p>",
      "linkList": [{ "id": "learnMore", "url": "https://example.com" }]
    },
    "richText": {
      "abilities": ["font", "color", "textAlign", "bulletedList"]
    }
  }
}
```

> **Your `defaultValue` sets the source text and links, not the resolved object.** It
> provides `text` as HTML with `dataquery` anchors and a matching `linkList`. Before your
> component runs, the editor builds the complete `RichText` object it receives, including
> the `html`. Do not set `html` in your manifest.

#### Options

A `richText` data property accepts the following options:

<PropertyList bordered>
  <Property
    name="abilities"
    type="RichTextAbilities[]"
    description="Which formatting controls the editor offers the Wix user. Omit it to allow all of them."
  >
    <ExpandableSection name="RichTextAbilities values">
      <PropertyList>
        <Property name="'font'" description="Theme font, also swaps the HTML tag." />
        <Property name="'fontFamily'" description="Font family." />
        <Property name="'fontSize'" description="Font size, with min and max." />
        <Property name="'fontStyle'" description="Italic or normal." />
        <Property name="'fontWeight'" description="Bold, normal, or 100 to 900." />
        <Property name="'textDecoration'" description="Underline or line-through." />
        <Property name="'color'" description="Text color." />
        <Property name="'backgroundColor'" description="Background color." />
        <Property name="'letterSpacing'" description="Letter spacing." />
        <Property name="'textAlign'" description="left, center, right, or justify." />
        <Property name="'direction'" description="rtl or ltr." />
        <Property name="'marginStart' / 'marginEnd'" description="Indent or outdent." />
        <Property name="'bulletedList' / 'numberedList'" description="<ul> or <ol>." />
        <Property name="'seoTag'" description="SEO tags: h1 to h6, p, blockquote." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>
:::
:::Context-item
Exposed through a context, a `richText` field takes just `dataType` and `displayName`:

```json
{
  "description": {
    "dataType": "richText",
    "displayName": "Product Description"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns rich text. It takes
`dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "richText",
      "displayName": "Description"
    }
  ],
  "returns": {
    "dataType": "richText"
  }
}
```
:::
::::