An interactive playground for vimee — try vim-style editing across multiple editor backends in your browser, tweak settings, and inspect every action in real time.
Live: playground.vimee.dev
| Editor | Package | Description |
|---|---|---|
| shiki-editor | @vimee/shiki-editor |
Full-featured vim editor with syntax highlighting powered by Shiki. Includes action log, theme/language switcher, and custom color controls. |
| textarea | @vimee/plugin-textarea |
Vim keybindings attached to a plain <textarea> element. Minimal setup for lightweight use cases. |
| monaco | @vimee/plugin-monaco |
Vim keybindings attached to Monaco Editor. Supports minimap, built-in themes, and language intelligence. |
| codemirror | @vimee/plugin-codemirror |
Vim keybindings attached to CodeMirror 6. Lightweight and extensible with language-specific extensions. |
- Vim editor with multiple editor backends — Shiki, Monaco, CodeMirror, and plain textarea
- Theme switcher — catppuccin-mocha, dracula, nord, tokyo-night, and more (varies by editor)
- Language selector — Go, TypeScript, JavaScript, Python, Rust, HTML, CSS, JSON, Markdown, Bash
- Editor options — toggle line numbers, read-only mode, indent style (tabs/spaces), indent width
- Editor color controls — customize
--sv-*CSS variables (cursor, selection, gutter, statusline, focus) with color pickers and alpha sliders (shiki-editor) - Action log — every vim action (
cursor-move,content-change,mode-change,yank,save, etc.) is logged in reverse chronological order with keystroke and payload details (shiki-editor)
- React 19
- Vite 8
- Tailwind CSS v4
- shadcn/ui (Radix UI)
- Shiki v4
- Monaco Editor
- CodeMirror 6
- Bun (v1.2+)
# Clone the repository
git clone https://github.com/vimeejs/playground.git
cd playground
# Install dependencies
bun install
# Start the dev server
bun run devThe dev server starts at http://localhost:5173.
bun run buildOutput is written to dist/. You can preview the production build with:
bun run previewMIT