Bringing Editor.js to Retool: A new open-source component

At Stackdrop, we’re always looking for ways to empower teams to build internal tools faster and with more flexibility. Today we’re excited to share our latest open-source release: the Editor.js Retool Component (a port of Editor.js into a native Retool custom component).

It’s built with TypeScript, exposes clean JSON output, and integrates natively with Retool’s data bindings and query system.

Why we built it

When building internal tools, text inputs often fall short. Many use cases - content management, documentation workflows, or structured user-generated input - require rich text with predictable data output.

Editor.js solves part of that problem by generating structured JSON instead of HTML. But Retool didn’t have a native integration for it.

 This component bridges the gap: it brings a modern, block-style editor into Retool, so you can work with structured data without resorting to unmanageable HTML fields or external editors. 

Features

• Block-based editing - headers, lists, quotes, tables, embeds, and more

• Structured JSON output - accessible through the component's content property

• Configurable tools - enable or disable specific Editor.js features via component props

• Custom styling - set background and text colors directly from the Retool inspector

• TypeScript core - predictable types and easy extension

• Retool-native integration - bind content to queries or temporary state, trigger saves automatically, and handle updates like any other Retool component

Installation & usage (quick start)

Here’s how to get started

Clone the repo

Install dependencies

 Log in to Retool and initialize a custom component library

Note: you’ll need an API access token with read + write scopes for Custom Component Libraries.

Start development mode

Deploy your component version

In your Retool app:

• Drag the “Editor.js” component onto your canvas.

• Bind its content property to the JSON string from your data source (for existing content) or to a local state/temporary state for new.

• Configure styling: e.g., backgroundColor: #f8fafc, textColor: #000 (default values).

• Optional: enable/disable individual tools via the inspector panel (e.g., only allow headings + paragraphs + lists).

• On “Save” (e.g., button click) you can use content and send it via a query to persist into your database or process further.

Example usage

You can store and retrieve JSON content seamlessly:

Because the output is JSON, it’s easy to process, version, or render in downstream systems - no cleanup required

Tips & best practices

• Version your content schema: Since you’re storing JSON blocks, if you ever change tool-set/tool options you might want to include a version field (Editor.js includes version info) or handle migrations of block types.

• Sanitise on render: Even though the JSON is structured, when you render it (e.g., into HTML) ensure you sanitise embedded content (e.g., iframe embeds) to prevent XSS.

• Choose your tool set wisely: Inside Retool you can expose many editing tools, but it might be best to restrict to only what your users need (to simplify the UI and keep content consistent).

• Store the JSON, but also store rendered output if needed: If you have a high-performance front-end you may want to pre-render the JSON to HTML and cache it, but keep the JSON as the source of truth.

• Preview capability: Consider adding a preview panel in your Retool app that renders the JSON blocks to HTML (or React components) so content authors can see what it will look like.

• Backwards compatibility: If content consumers (web/mobile/other apps) expect HTML or markdown, you may want to add a parser from JSON → HTML or markdown (there are libraries for that).

What’s next

We’ve got a few things brewing - these aren’t set in stone (yet), but are definitely on our radar:

• Add ability for drag-and-drop reordering of blocks (leveraging Editor.js upcoming features)

• Support custom block types (for example “call-out box”, “product highlight”, “embedded chart”) that your team can configure via Retool inspector.

• Improve the UI for the component inside Retool (e.g., full-screen editing, mobile-friendly layout)

• Add sample configurations and templates (e.g., blog post template, knowledge base template).

• Create another custom component (the rendering part) for preview

If you’re interested in particular features or would like to contribute, we welcome pull requests.

Get involved

We’re thrilled to deliver this component as part of our mission to accelerate internal tool development. Whether you’re building an admin portal, a knowledge base, or a custom content authoring tool inside Retool - the Editor.js Retool Component brings modern editing capabilities and structured data right into your workflows. 

• Head over to the GitHub repo: Stackdrop (editorjs-retool-component)

• Clone, install and integrate into your Retool org as described above

• Let us know what you build - share your use-case, templates or custom blocks

• If you encounter issues or want to request enhancements, open an issue or submit a PR

Give it a try, and we can’t wait to see what you build with it.