Meet TabMate - Your lightweight tab & indentation support for textareas

Adding proper tab or indentation support to a plain HTML <textarea> isn’t as easy as it sounds. Full editors like Monaco or CodeMirror can do it, but they’re far too heavy if you only need simple tab behavior.

Lightweight options like TabOverride once filled the gap, but many are outdated—no TypeScript types, old JavaScript, and reliance on deprecated events.

That’s where your TabMate comes in. At just ~1KB gzipped, it’s a modern, framework-agnostic library that brings code-editor-like indentation to your textarea elements—without any overhead.

TabMate is the perfect choice for you when:

• You need proper indentation behavior but don't need a full code editor
  


• You're building applications where bundle size matters
  


• You want to enhance textareas in forms, comment sections, or simple editors

TabMate focuses on doing one thing very well - providing intuitive, code-editor-like indentation behavior for plain HTML elements - without the overhead of more complex solutions.

Key features

• ⌨️ Smart Tab Key Handling — Press Tab to insert spaces or tabs where your cursor is, just like in your favorite code editor.
  


• 🔙 Shift+Tab Unindent — Outdent using Shift+Tab, even across multiple lines.
  


• 🖱️ Multiline Indentation — Select multiple lines and indent/unindent them all at once.
  


• ⚙️ Custom Tab Size — Choose how wide your indent should be: 2 spaces, 4 or even 100 spaces?.
  


• 🪶 Zero Dependencies — Built with modern TypeScript, no external libraries or runtime bloat.

Getting started

It's super simple to use TabMate within your project. First you need to install the library:

npm i @tabmate/core

yarn add @tabmate/core

pnpm add @tabmate/core

After installing you ca attach it to your textara:

import { tabmate } from "@tabmate/core";  



// Get a reference to your textarea  

const textarea = document.querySelector("textarea");  



// Attach TabMate to the textarea  

const instance = tabmate(textarea);  



// Now the textarea has enhanced tab behavior!  

With this basic setup, your textarea will now support:

• Pressing Tab to insert spaces
  


• Pressing Shift+Tab to remove indentation
  


• Multi-line indentation when text is selected

Using TabMate within frameworks

At its core TabMate is completely framework agnostic, but it comes right now with direct integration for Vue. More framework integrations, like for Angular and React will follow soon.

After adding the supporting package for Vue with the following command:

npm i @tabmate/core @tabmate/vue

yarn add @tabmate/core @tabmate/vue

pnpm add @tabmate/core @tabmate/vue

You can benefit from using the useTabmate composable or the vTabmate directive. More info can be found in the docs.

What’s next

TabMate already covers the essentials, but here’s what’s on the roadmap:

• 🔄 Auto-indentation


• ⚛️ React and Angular integrations


• 🔌 Plugin support for extra behaviors

Give TabMate a try and see how easy it is to add code-editor-like indentation to your textareas.

⭐ Star it on GitHub


🤝 Contribute or share feedback


📚 Check out the docs for more details

Lightweight, modern, and built for developers who care about simplicity.