> Markdown version of [Rich Text Editor](https://vaadin.com/docs/latest/components/rich-text-editor). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt) # Rich Text Editor > **Note: Commercial Feature** > > A commercial Vaadin subscription is required to use Rich Text Editor in your project. > > - [Start Free Trial](https://vaadin.com/trial) > > - [See Pricing](https://vaadin.com/pricing) Rich Text Editor allows the user to author text that has rich formatting. It allows you to format and style your text using boldface, italics, headings, lists, images, links, etc. **Lit** — `rich-text-editor-basic.ts` ```html ``` **Flow** — `RichTextEditorBasic.java` ```java RichTextEditor rte = new RichTextEditor(); rte.setMaxHeight("400px"); String valueAsHtml = DataService.getTemplates().getRichTextHtml(); rte.setValue(valueAsHtml); add(rte); ``` **React** — `rich-text-editor-basic.tsx` ```tsx { richText.value = event.detail.value; }} /> ``` ## Value Format Rich Text Editor supports the HTML format and the [Quill Delta format](https://github.com/quilljs/delta) for reading and setting its value. HTML Format Details Rich Text Editor supports values in the HTML format, with the following restrictions: - Only a subset of HTML tags are supported, which are listed in the table below; - Block elements, such as paragraphs, lists, or block quotes, can’t be nested; and - Unsupported tags, such as ``, are replaced with an equivalent supported tag, such as ``, or with a paragraph (`

`). Table 1. Supported HTML Tags | Feature | Tags | | ---------------------------------------------------------- | -------------------------------- | | Paragraphs and line breaks | `

`, `
` | | Headings | `

`, `

`, …​, `

` | | Bold, italic, underlined and strike-through text | ``, ``, ``, `` | | Links | `…​` | | Text alignment via the `text-align` CSS property | `

` | | Ordered, unordered lists, and list items (can’t be nested) | `

    `, `
      `, `
    • ` | | Block quotes | `
      ` | | Pre-formatted text | `
      `                          |
| Images, using a Base64-encoded data URL                    | ``                 |

> **Note:** Only Base64-encoded data URLs are supported for images. Web URLs are not supported.

The following snippet contains an HTML document that is supported by the component. It demonstrates the usage of several tags. Try pasting the snippet into the `HTML Value` text area in the example below and see how the editor updates. Then try modifying the value, either by using the editor’s features, or by changing the HTML value, directly.

```html

      High quality rich text editor for the web
      

      Rich text editor handles the following formatting:
      

        
  
      • Bold
        • 
  
      • Italic
        • 
  
      • Underline
        • 
  
      • Strike-through
        • 

      Blockquotes
      

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
  dolore magna aliqua.

      Code blocks
      

      <body>
  <vaadin-rich-text-editor></vaadin-rich-text-editor>
</body>

      
```

Delta Format Details

The JSON-based Delta format consists of an array of operations to apply to a document. Rich Text Editor specifically only uses insert operations, each operation sequentially adding content to the document. Operations can have attributes, such as whether to render a piece of content with a specific text style, or as a link. For the full specification of the format, see the [Quill Delta GitHub repository](https://github.com/quilljs/delta).

The following snippet contains a Delta document that demonstrates some of the format’s features. Try pasting the snippet into the `Delta Value` text area in the example below and see how the editor updates. Then try modifying the value, either by using the editor’s features, or by changing the Delta value directly.

```json
[
  {"insert": "High quality rich text editor for the web\n", "attributes": {"header":  2}},
  {"insert": "Rich text editor handles the following formatting:\n"},
  {"insert": "Bold\n","attributes": { "bold": true, "list": "bullet" }},
  {"insert": "Italic\n", "attributes": { "italic": true, "list": "bullet" }},
  {"insert": "Underline\n", "attributes": { "underline": true, "list": "bullet" }},
  {"insert": "Strike-through\n", "attributes": { "strike": true, "list": "bullet" }},
  {"insert": "Blockquotes\n", "attributes": { "header": 3 }},
  {"insert": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n", "attributes": { "blockquote": true }},
  {"insert": "Code blocks\n", "attributes": { "header": 3 }},
  {"insert": "\n", "attributes": { "code-block": true }}
]
```

For the Flow component, the default is the HTML format, which is also used automatically when binding the component with `Binder`.

To read, write, or bind the component’s value using the Delta format, use the [`RichTextEditor.asDelta()`](https://vaadin.com/api/platform/25.3.1/com/vaadin/flow/component/richtexteditor/RichTextEditor.html#asDelta\(\)) wrapper.

> **Note: Usage with Binder**
>
> As the component uses a complex HTML value, the default `asRequired` validator does not work as expected with `Binder`. Instead, provide a custom validator:
>
> ```java
> binder.forField(richTextEditor)
>     .asRequired(Validator.from(value -> !richTextEditor.isEmpty(), "Required"))
> ```

For the web component, to read or write the value in the Delta format, use the `value` property.

To read or write the value in the HTML format, use the `htmlValue` property and the `dangerouslySetHtmlValue` method.

> **Note: HTML Sanitization**
>
> To prevent injecting malicious content, be sure to sanitize HTML strings before passing them to the web component using `dangerouslySetHtmlValue`. An example of this would be using a library such as [dompurify](https://www.npmjs.com/package/dompurify).

**Lit** — `rich-text-editor-set-get-value.ts`

```typescript






...

setHtmlValue(htmlValue: string) {
  this.htmlValue = htmlValue;
  this.richTextEditor.dangerouslySetHtmlValue(htmlValue);
}
```

**Flow** — `RichTextEditorSetGetValue.java`

```java
RichTextEditor rte = new RichTextEditor();
rte.getStyle().set("height", "400px");
rte.setValueChangeMode(ValueChangeMode.TIMEOUT);

// HTML value
TextArea htmlTextArea = new TextArea("HTML Value");
htmlTextArea.setHelperText(
        "Shows the HTML representation of the edited document. You can also modify or paste HTML here to see the changes reflected in the editor above. Note that you have to leave (blur) this field in order for the editor to update.");
htmlTextArea.setWidthFull();
rte.addValueChangeListener(e -> htmlTextArea.setValue(e.getValue()));
htmlTextArea.addValueChangeListener(e -> {
    if (!rte.getValue().equals(e.getValue())) {
        rte.setValue(e.getValue());
    }
});

// Delta value
TextArea deltaTextArea = new TextArea("Delta Value");
deltaTextArea.setHelperText(
        "Shows the Delta representation of the edited document. You can also modify or paste the Delta JSON here to see the changes reflected in the editor above. Note that you have to leave (blur) this field in order for the editor to update.");
deltaTextArea.setWidthFull();
rte.asDelta().addValueChangeListener(
        e -> deltaTextArea.setValue(e.getValue()));
deltaTextArea.addValueChangeListener(e -> {
    if (!rte.asDelta().getValue().equals(e.getValue())) {
        rte.asDelta().setValue(e.getValue());
    }
});

add(rte, htmlTextArea, deltaTextArea);
```

**React** — `rich-text-editor-set-get-value.tsx`

```tsx
const htmlValue = useSignal('');
const deltaValue = useSignal('');

const richTextEditorRef = useRef(null);

const handleEditorChange = (event: RichTextEditorValueChangedEvent) => {
  deltaValue.value = event.detail.value;
};

const handleHtmlChange = (event: TextAreaChangeEvent) => {
  const { value } = event.target;
  htmlValue.value = value;
  if (richTextEditorRef.current) {
    richTextEditorRef.current.dangerouslySetHtmlValue(value);
  }
};

return (
  <>
     {
        htmlValue.value = e.detail.value;
      }}
      ref={richTextEditorRef}
    />