Retool Rich Text Editor: Add Editor.js as a Custom Component

Why Retool's Built-In Text Inputs Fall Short

If you've been building internal tools with Retool long enough, you've almost certainly hit this wall: a client needs a content editor, a notes field, or a structured document input — and Retool's native text components just don't cut it. The built-in richTextEditor component is functional, but it outputs messy HTML, lacks block-level structure, and gives you almost no control over tooling or styling. For apps that need real rich text — headers, tables, nested lists, embeds — you're stuck.

That's exactly the problem we ran into repeatedly at our Retool agency. So we built a proper solution and open-sourced it: a Retool-native Editor.js custom component that gives your internal tools a world-class rich text editing experience with clean, structured JSON output.

GitHub: StackdropCO/editorjs-retool-component

What Is Editor.js and Why Use It in Retool?

Editor.js is an open-source, block-style rich text editor. Instead of producing a single blob of HTML, it outputs a clean JSON data structure — one object per block (paragraph, header, list, table, etc.). This makes it dramatically easier to store in a database, render consistently on the front end, and manipulate programmatically.

In the context of a Retool internal tool, that matters a lot. You're probably saving this content to Postgres, MySQL, or a REST API. Storing structured JSON instead of raw HTML means you can query it, transform it, and display it without a sanitization headache.

What the Editor.js Retool Component Supports

This isn't a minimal proof-of-concept. The component ships with a full suite of Editor.js tools configured out of the box:

• Block types: paragraphs, headers (H1–H6), ordered and unordered lists, quotes, tables, and embeds
• Structured JSON output: every save produces a predictable, typed data structure — no messy HTML strings
• Fully configurable tools and styling: enable or disable blocks, adjust the toolbar, pass in custom CSS
• TypeScript core: type-safe internals mean fewer runtime surprises when wiring up Retool queries
• Native Retool bindings: the component's output value plugs directly into {{ editorjs1.value }} just like any other component — use it in queries, transformers, or other component properties without any glue code

How to Add the Editor.js Component to Your Retool App

Setup follows the standard Retool Custom Component Library (CCL) workflow. Here's the full process:

Step 1 — Clone the repo

git clone https://github.com/StackdropCO/editorjs-retool-component.git
cd editorjs-retool-component

Step 2 — Install dependencies

npm install

Step 3 — Authenticate with Retool

Make sure you have the Retool CLI installed and are authenticated against your Retool instance or Retool Cloud org:

npx retool-ccl login

Step 4 — Deploy the component

npx retool-ccl deploy

This bundles the component and pushes it to your org's custom component library. It will appear under the Custom Components section in the Retool editor sidebar.

Step 5 — Drag it into your app

Open any Retool app, find the component in the sidebar, and drag it onto your canvas. Wire up the output using {{ editorjs1.value }} and pass it into any query that writes to your database or API.

How to Use the JSON Output in a Retool Query

The component's value property contains the full Editor.js JSON payload. A typical output looks like this:

{
  "time": 1720000000000,
  "blocks": [
    { "type": "header", "data": { "text": "My Heading", "level": 2 } },
    { "type": "paragraph", "data": { "text": "Some body text here." } },
    { "type": "list", "data": { "style": "unordered", "items": ["Item one", "Item two"] } }
  ],
  "version": "2.29.1"
}

In a Resource Query that writes to Postgres, you can pass this directly as a JSONB column value:

INSERT INTO articles (title, body) VALUES ({{ titleInput.value }}, {{ editorjs1.value }})

Because it's clean JSON, you can also use a JS Query transformer to extract just the blocks array, filter by type, or reshape the data before it hits your database.

How This Compares to Other Retool Rich Text Options

The Retool community has explored a few approaches here. One popular alternative is a Quill.js-based custom component (with the bubble theme) — and it's worth knowing a PR pathway exists to submit community components to the official Retool custom component guide repo. If you're evaluating options:

• Retool's built-in richTextEditor: fast to use, but HTML output and limited configurability
• Quill.js custom component: great UI, but still outputs HTML by default
• This Editor.js component: structured JSON output, block-level control, TypeScript internals — best fit if your backend cares about content structure

When Should You Use This Component?

Reach for this Retool rich text editor custom component when:

• Your app lets users create structured documents (SOPs, reports, knowledge base entries)
• You need to store content in a database and render it in multiple contexts (web, PDF, email)
• You want consistent, queryable content structure rather than raw HTML blobs
• You're building a CMS-like internal tool on top of Retool

Get the Component and Contribute

The component is fully open source under the MIT license. Star the repo, open issues, or submit a PR if you add a new Editor.js tool or improve the Retool binding interface. We're actively maintaining it and planning to release additional open-source Retool custom components — follow along on GitHub to stay updated.

Repo: github.com/StackdropCO/editorjs-retool-component

If you're building internal tools with Retool and need help with custom components, complex query logic, or architecture — that's what we do. Get in touch.