Custom Component: CodeMirror Editor

Hey there! I needed to build a general purpose code editor custom component for Retool, and I thought I would share the code in case anyone else needs to have an embedded editor.

The component uses CodeMirror v5, a slightly older version of the editor used in Chrome dev tools. You should be able to customize the editor as described in the API docs.

This gist contains the HTML code and model JSON you need. It also has an importable JSON for a Retool app that demonstrates how to use it.

Hope this helps someone!

2 Likes

Hi @kwhinnery

very nice!

Just curious: how do you use the written code, that I guess is serialized somewhere in a db/storage, in a real-world scenario?

Thanks

Typically you need a browser-based code editor when your application is trying to create some kind of development environment. This happens in education (like Codecademy), developer tools (like repl.it or something like Retool's browser IDE), and sometimes SaaS (like how you can write integration code for Salesforce directly inside Salesforce).

My specific use case was a dev tools use case, where I needed to build a quick and dirty frontend for the Deno Subhosting API, which lets you send JS/TS code via API to run on Deno's cloud. From prior experience, I knew I could use Retool to prototype this in a few hours :slight_smile:

2 Likes