Skip to content

Design system

WYSIWYG Editor

Last updated 4 April 2025

The Insites WYSIWYG Editor component is basically like your Markdown editor but in steroids. If you're a lot more comfortable messing with a little bit of HTML, then the WYSIWYG editor is for you. This editor can handle HTML styling and a lot more customisable, as oppossed to the Markdown editor.

Figma Component Variant Properties

WYSIWYG

Properties Options Notes
Show Source No Label, Label, Tooltip Toggle to show the rendered content or HTML code content.
State Default, Focus, Read Only, Error Select the state to use for the component.
Show Label Wrapper True, False Toggle to hide or show the label and tooltip for the component. Show Label and Show Tooltip property for the component will be hidden if this is disabled.
Show Label True, False Toggle to show or hide the label for the component.
Show TooltipTrue, FalseToggle to show or hide the tooltip for the component.
Show Code ButtonTrue, FalseToggle to show or hide the code button for the component.
Show Image ButtonTrue, FalseToggle to show or hide the image button for the component.
Show Custom ContentTrue, FalseToggle to show or hide the custom content for the component.
Custom Content-Use to select your custom content for the component.

Image Modal

Properties Options Notes
TabUpload, ChooseSelect what tab is active for the modal.