Package:
@react-form-builder/components-mantine
· Source code
Introduction
The Tiptap component provides a rich text editor (WYSIWYG) with formatting toolbar and support for headings, lists, links, and more.
It requires the optional package @mantine/tiptap and is based on Mantine Tiptap.
It is included within the following NPM package: @react-form-builder/components-mantine.
Main properties
The following general properties are available within the Main tab:
| Name | Type | Description |
|---|
| Content | string | Initial or controlled HTML/content (data-bound) |
| Placeholder | string | Placeholder when editor is empty |
| Editable | boolean | If true, the content is editable (default: true) |
| On change | event | Fired when the content changes |
Style properties
These are properties that allow to customize the size, color and other style properties of your component:
-
For Device: You can provide component’s style customization for all devices or specific
devices by using this dropdown list. Refer to Adaptive Layout for more
details.
-
Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
-
Wrapper: The options below enable you to tailor the appearance of your component and customize
it for a specific device type, as selected in the For Device property:
| Name | Type | Description |
|---|
| Width | number | Specifies the width for your component |
| Height | number | Specifies the height for your component |
| Margin top/right/bottom/left | number | Margin values for you component |
| Color | string | Allows customizing the text color |
| Background color | string | Enables customizing the background color |
Additional resources
Last modified on April 16, 2026
