Zero dependency, VI editor implemented in JavaScript, which turns any <textarea> into a full-screen VI-style editor running in the browser. It's a maintained fork of a project created by Internet Connection, Inc..

Screenshot

Install

npm install jsvi

Usage

ES Module

import vi from 'jsvi';
import 'jsvi/vi.css';

const textarea = document.querySelector('#editor');
const editor = vi(textarea, {
    color: '#ccc',
    backgroundColor: '#000',
    onSave() {
        console.log('contents:', textarea.value);
        console.log('contents:', editor.freeze());
    },
    onExit() {
        console.log('editor closed');
    }
});

TypeScript types for the public API (the vi() factory and the editor instance it returns) are included, so import vi from 'jsvi' is typed out of the box.

Script Tag (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvi/vi.css" />
<script src="https://cdn.jsdelivr.net/npm/jsvi/vi.js"></script>
<script>
    const editor = vi(document.querySelector('#editor'));
</script>

This build exposes a global vi function, same as before — no bundler required.

API

vi(textarea, options?) replaces the given <textarea> with the editor UI and returns an editor instance. Options:

| Option | Type | Description | |-------------------|----------------------------|-------------------------------------------| | onSave | () => void | Called when file is saved (:w) | | onExit | () => void | Called when the editor is closed (:q) | | color | string | Foreground color (needs backgroundColor) | | backgroundColor | string | Background color (needs color) | | spell_script | string | URL of a server-side spell-check script | | padding | number | Space in pixels around the editor's text area (default 0) | | html | boolean | Interpret <b>/<u>/<i>/<span class="rv"> and &/< as rich-text markup, and escape </& on save (default false, plain text) |

The returned editor instance exposes methods such as freeze() / thaw() (serialize/load the buffer), insert(), delete(), command() (run an ex command), and disable() (tear down the editor). See vi.esm.d.ts for the full public interface.

color/backgroundColor are applied inline on the editor, so they override the --color/--background CSS custom properties described below. To theme the editor from CSS instead (e.g. to share a theme with jQuery Terminal, which uses the same variable names), set --color/--background on an ancestor and omit color/backgroundColor from the options.

Cursor style

The cursor blinks using a CSS animation, the same mechanism as jQuery Terminal (with vi--prefixed names so the two don't collide if used on the same page). Pick a style by setting the --vi-animation custom property:

:root {
    --vi-animation: vi-blink;     /* solid block cursor (default) */
    --vi-animation: vi-underline; /* thin line under the character */
    --vi-animation: vi-bar;       /* thin vertical bar, like a text caret */
    --vi-animation: vi-none;      /* static cursor, no blinking */
}

vi-bar/vi-underline use --vi-line-thickness (default 2, in pixels) for the line's thickness. When the OS-level "reduce motion" accessibility preference is set, --vi-animation defaults to vi-none (a static, non-blinking cursor) unless overridden by a later, equally-specific :root rule.

Development

npm install
npm run build      # generates vi.esm.js from vi.js
npm run typecheck  # type-checks the public interface with tsc
npm test           # runs the Vitest + jsdom test suite
npm run coverage   # runs tests with a code coverage report

vi.js is the original ES5 source and is also the browser/script-tag build; vi.esm.js is generated from it (with an export default added) so the package can be imported by name.

License