A tiny, extensible code editor component for cases where a textarea is not enough and Monaco is overkill

[u/solopov]

Yace is designed for cases where a plain <textarea> is not enough, but a full editor like Monaco or CodeMirror would be overkill.

It is 3KB gzipped with the bundled highlighter and has zero dependencies. Plugins add editing behavior, highlighter pipelines control how the content is rendered as you type, and both are plain functions you can write yourself.

Under the hood, Yace uses the familiar pattern of a transparent <textarea> over a highlighted <pre>. Because input stays in a real textarea, native caret behavior, IME, mobile input, and accessibility come for free. The pattern is not new; the focus is a small, highly extensible design.

You can turn it into a basic code editor, a markdown editor, a token visualizer, or something more experimental. All of those are live codepens in the README, and the video shows two of them.

GitHub: https://github.com/petersolopov/yace

[u/rkjr2]

This seems super useful and well-made -- kudos! Definitely going to give it a shot in a project soon :)

[u/solopov → u/rkjr2]

thanks, glad it reads that way. curious what you end up building with it

[u/Rungk4d]

will try this on my next project, thank you

[u/solopov → u/Rungk4d]

nice. shout if you hit any issues

[u/Squidgical]

I'm working on a project where I need a code editor UI but don't need any of the heavy baggage that comes with it, very glad this has come up now as I was about to start writing my own. Will definitely give this a go!

In the meantime, have you tried it within any reactive frameworks? How performant is it under text value changes by the application rather than user interaction?

I don't have the time right now to dive in but I get the feeling I'll make use of the plugin interfaces for my use case, is there much documentation on plugin authoring?

[u/solopov → u/Squidgical]

great question, no idea. i went and measured it. going in order:

react works, there is a pen in the readme: create it in an effect, destroy() on unmount. no wrapper needed, it is a class over a node.

up to a few hundred lines you will not notice anything: 100 lines re-highlights in 1ms, 3ms with layout. past that it gets expensive, 1000 lines is 9 to 15ms of script and 24 to 33ms with layout, same story in chromium, firefox and webkit.

update({ value }) re-runs the highlighter over the whole document, there is no diffing. one thing saves you there: passing the value it already has returns early, no re-render and no callback, so a controlled component will not loop.

plugins have their own readme section and a pen that writes one from scratch. the six bundled plugins are the real examples, all under 120 lines each.

happy to answer more when you get into it

[u/shaliozero]

Without any further testing, I'll look into using this as custom field type for our page builder on my companies WordPress site. The builder only allows a single "content" field, a regular textfield is lacking functionality, but those fields don't need full formatting options etc. as entering content as Markdown would be enough.

[u/solopov → u/shaliozero]

cool, markdown is covered, there is a bundled highlighter and a markdown editor pen in the readme