DEV Community

Cover image for Meet TabMate - Your lightweight tab & indentation support for textareas
pascalboth
pascalboth

Posted on

Meet TabMate - Your lightweight tab & indentation support for textareas

#webdev #typescript #html #npm

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
Enter fullscreen mode Exit fullscreen mode

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!
Enter fullscreen mode Exit fullscreen mode

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

Showcase of TabMate

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)