How to create a markdown editor in Retool with a custom component

January 1, 2000

Retool offers some options to let app users edit texts.

There's the bare-bones text-area component for simple text, and there's the Rich Text Editor for formatted text.

The Rich Text Editor allows common text formatting options such as bold, italic, heading, link, etc.

The output of the component is raw HTML.

This is good for many use cases.

There's another options that might be interesting but not natively supported in Retool.

A Markdown editor.

Markdown

We love markdown.

It's fast to write, and allows to give structure and good-enough formatting options, just the essentials for good documentation.

Markdown is already supported in Retool for rendering purpose in the static Text component.

Indeed, the Text component can be render plain text and markdown text as well.

But if you want to edit markdown and having a preview of the formatting, using the text-area is less than ideal.

Markdown editor in a custom component

Thankfully, in Retool we can rely on the custom component when we need to extend the platform.

Thus, here a step by step tutorial to get a markdown editing experience in Retool.

Text area with preview parsed by Marked

...

Using SimpleMDE

...

Using TinyMDE

...

Have a business need or a project in mind?

We help ambitious companies ride the change