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:

• Emacs movement keys:

  • by character (ArrowRight, ArrowLeft, C-f, C-b)
  • by line (ArrowUp, ArrowDown, C-n, C-p)
  • by word (C-ArrowRight, C-ArrowLeft, M-f, M-b)
  • by paragraph (C-ArrowUp, C-ArrowDown)
  • even by balanced expressions (M-a, M-e, C-M-f, C-M-b, C-M-a, C-M-e)
  • beginning of buffer (C-Home, M-<)
  • end of buffer (C-End, M->)

• Emacs text manipulation commands:

  • transpose chars (C-t)
  • transpose words (M-t)
  • transpose lines (C-x C-t)
  • upcase word (M-u)
  • downcase word (M-l)
  • capitalize word (M-c)
  • word killing (M-d, M-Delete, C-Backspace)
  • dabbrev-expand (M-/) — autocomplete the word at point
  • paragraph filling (M-q)
  • paredit commands (work best in Lisp mode) (M-s, M-r, C-M-t)

• Emacs-like editing modes (currently JavaScript, XML, CSS, HTML, Lisp and Markdown):

  • modes can provide custom keymaps
  • and syntax highlighting
  • and automatic indentation
  • highlighting matching parentheses

• And other features implemented in a very Emacs-like fashion:

  • undo queue
  • mark, kill ring and transient mark
  • minibuffer and mode line
  • interactive search (C-s, C-M-s), query replace (M-%, C-M-%). Note, to yank word in isearch you must use S-C-s (that's Shift-Ctrl-s), since C-w is forbidden by our browser Gods.
  • multiple buffers
  • split frames (C-x 2 or C-x 3 to split frame, C-x 0 to delete this frame, C-x 1 to delete-other-frames)
  • prefix keys, keymaps
  • markers, overlays and text properties
  • M-x for other commands (TAB completion available)

• Color themes are generated from Emacs themes. To change the theme, type M-x set_color_theme and press TAB to list the themes available in this page.

Limitations

• Support on touch devices (it doesn't bring up the on-screen keyboard; works fine otherwise, for example with a bluetooth keyboard)
• No right-to-left support
• Buggy with Unicode surrogate pairs/combined characters
• Composition-based input methods might not work
• Slow with huge text/lines

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.