yet another code editor

• ~1KB gzipped with zero dependencies.
• binding hotkey and enhance with plugins.
• adding any highlighter.

yace is published to npm, and accessible via the unpkg.com CDN:

via npm:

npm i yace

hotlinking from unpkg: (no build tool needed!)

import Yace from "https://unpkg.com/yace?module";

yace is working in browser and need DOM node e.g.:

<div id="editor"></div>

Initializing editor passing css selector and options:

import Yace from "yace";

const editor = new Yace("#editor", {
  value: "your awesome code",
  lineNumbers: true,
});

Live demo with codesandbox:

• Using highlight.js as highlighter
• Using prismjs as highlighter
• Building tiny ~2KB markdown editor
• Building markdown editor with highlighting code in code blocks
• Using plugins
• Using with react

const editor = new Yace(selector, options);

• value — initial value.
• lineNumber — show or hide line numbers, default false.
• highlighter — function that takes current value and return highlighted html.
• styles — styles for root component, e.g. { fontSize: "20px }.
• plugins — array of plugins.

Plugin is a function that called with textarea params {value, selectionStart, selectionEnd} as first argument and keydown DOM event as second argument and returns new textarea params {value, selectionStart, selectionEnd}.

It takes a callback that will be invoked when editor value is changed.

editor.onUpdate((value) => console.log(`new value: ${value}`));

Update editor value and selections.

// update value
editor.update({ value: "new awesome code" });

// update selection
editor.update({ selectionStart: 0, selectionEnd: 4 });

Remove all listeners.

editor.destroy();

Get the current editor's value.

editor.value; // => "your awesome code";

Get the textarea DOM element.

editor.textarea.focus();
editor.textarea.spellcheck = false;

MIT