Ymacs

Ymacs is an Emacs-like editor that works in a browser. This is an old project, but it still works very well. There was a major overhaul in 2024 so I wouldn't call it dead yet. Besides a lot of fixes and new features, an important change is that Ymacs is now standalone (no longer depends on thelib.js).

Here is an instance with some HTML code from this very page. Try various editing commands, but first, you might want to pin the tab, or enter full screen mode with M-x request_full_screen (TAB completion available). More information below.

Features

Ymacs is not Emacs, but it's also not just another editor with Emacs keybindings; the goal was to emulate Emacs as best as possible. Most of the this list was written back in 2010:

Limitations

Building

Some quick notes about building/usage.

git clone https://github.com/mishoo/ymacs.git
cd ymacs
npm install
npx parcel build

You should now have the dist/ directory, containing ymacs.mjs, ymacs.css and themes/. Copy them to your web project. Note that the JS code needs an import-enabled script tag. Example usage:

<link rel="stylesheet" type="text/css" href="ymacs.css"/>
<link rel="stylesheet" type="text/css" href="themes/standard-light.css"/>

<script type="module">
 import { Ymacs, Ymacs_Buffer } from "ymacs.mjs";
 let buf = new Ymacs_Buffer({ name: "test.html", code: "<h1>Hello World</h1>" });
 let ymacs = new Ymacs({ buffers: [ buf ] });
 ymacs.addClass("Ymacs-line-numbers");
 ymacs.setColorTheme("standard-light");
 buf.cmd("html_mode");
 document.querySelector("#container").appendChild(ymacs.getElement());
 ymacs.focus();

 // prevent accidental tab killing (C-w) if focus is within Ymacs
 window.addEventListener("beforeunload", preventKill);
 function preventKill(ev) {
     if (document.activeElement.closest(".Ymacs")) {
         ev.preventDefault();
         return ev.returnValue = true;
     }
 }
</script>

Note that you should load at least one theme. Above we load standard-light.css, and activate it with ymacs.setColorTheme("standard-light"). This method basically adds the CSS class "Ymacs-Theme-standard-light" to the toplevel element — you can add it manually to the container if you prefer.

Ymacs

Latest blog entries

Note that the main browsers do not allow websites to intercept a few key combinations that are traditionally used in Emacs, such as Ctrl-w, Ctrl-n and Ctrl-t (Chromium issue, Firefox issue). There is no reason for this restriction. Please tell them so! They closed comments for these issues (which is hostile!) but you can file new ones.

Fork me on Github