Yace

Yace

[](https://www.npmjs.com/package/yace) [](https://coveralls.io/github/petersolopov/yace) [](https://bundlephobia.com/result?p=yace)

Yace is a tiny, extensible code editor component for cases where a plain `` is not enough and Monaco or CodeMirror would be overkill.

Under 2KB gzipped. Zero dependencies. Framework agnostic.

• Input stays in a real , preserving native caret behavior, IME, mobile input, selection, and accessibility
• Plugins add only the editing behavior you need: history, indentation, bracket pairing, shortcuts, or your own transformations
• Highlighters control what appears as you type: code, Markdown, tokens, animations, or your own renderer
• The editor mounts into a DOM node and works with React, Vue, vanilla JS, or anything else

[See live examples](#examples)

When Yace fits

Use Yace for embedded code samples, documentation playgrounds, Markdown inputs, prompt editors, token visualizers, and custom text experiences. It gives you syntax highlighting and editing hooks without bringing an IDE into the page.

If you need large-document virtualization, multicursor editing, rich text, or a full language-tooling platform, use Monaco or CodeMirror. Yace deliberately stays smaller and gives you the pieces to build the editor you actually need.

Quick start

Install Yace from npm:

npm install yace

Add a mount point:

Create an editor with syntax highlighting and familiar editing behavior:

import { Yace } from "yace";
import { code } from "yace/highlighters/code";
imp