TabMate.js is a lightweight (~<1KB gzipped), framework-agnostic JavaScript library for enabling tab/indentation behavior to HTML elements like textarea — just like in modern code editors.
Explore the docs »
Key Features • Getting started • Usage • Roadmap • Contributing •
- ⌨️ 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.
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 text-areas 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.
To get started, you need to install the npm package like this:
npm i @tabmate/core
# or
yarn add @tabmate/core
# or
pnpm add @tabmate/coreTabMate is exported as ESM and UMD.
The simplest way to use TabMate is to attach it to a textarea element:
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
Tabto insert spaces - Pressing
Shift+Tabto remove indentation - Multi-line indentation when text is selected
If you want to find out about the configuration options you can pass to the tabmate instance you can check the docs.
TabMate is framework-agnostic, but it comes with direct integration for Vue (React and Angular coming soon).
Check out the framework integration section in the docs for more information.
- Smarter indenting (e.g. skipping blank lines)
- Auto-indentation
- Direct framework integration for Vue
- Direct framework integration for React & Angular
- Allow to add plugins for extra behavior
If you have a suggestion that would make TabMate better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
This project is licensed under the MIT License - see the LICENSE file for details.