Skip to Content
🚀 You Code the Magic. We Handle the IDs. Welcome to IDomatic Docs!

Automate your #ID attributes.
Stay consistent, stay testable.

IDomatic automatically adds meaningful id attributes to your HTML/JSX for better testability, maintainability, and team sanity.

npm init @idomatic

Before:

function Example() {
  return (
    <div>
      <p>Click the button below</p>
      <button>Click me</button>
    </div>
  );
}

After:

function Example() {
  return (
    <div id="idomatic-1b9d6c88-32f1-11ec-8d3d-0242ac130003">
      <p id="idomatic-1b9d6fa4-32f1-11ec-8d3d-0242ac130003">Click the button below</p>
      <button id="idomatic-1b9d70da-32f1-11ec-8d3d-0242ac130003">Click me</button>
    </div>
  );
}

Why use idomatic?

Speed up your test automation and maintain clean markup with zero effort.

Auto-detects missing IDs
Scans your project and smartly inserts IDs where needed, saving time and effort.
Zero-config CLI
Just run one command — no setup or config files required.
Framework-agnostic
Supports multiple frontend frameworks: HTML, JSX, Vue, and Angular templates.
Test-friendly IDs
Adds readable and reliable IDs optimized for automated tests.

How idomatic works

From install to improved markup — here’s how simple it is.

1. Initialize
npm init @idomatic

Choose your framework: React/JSX or HTML/Vue/Angular. A config file is generated.

2. Customize config
{
  "attributeName": "id",
  "prefix": "auto-id-",
  "excludeTags": ["html", "head", "script"],
  "includeExtensions": ["html", "vue"],
  "excludeFiles": []
}

Adjust the rules in .idomatic.config.json to match your project structure.

3. Scan your code
npx idomatic scan

Run a full scan or preview which files will be modified using the --dry flag.

What it supports

IDomatic is built for the modern frontend ecosystem — with more support on the way.

Currently Supported
  • JavaScript / JSX / TSX
  • React & React Native
  • HTML
  • Vue
  • Angular
Coming Soon
  • Svelte
  • Astro
  • Handlebars
  • SolidJS