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.

$
Input
1function Example() {
2  return (
3    <div>
4      <p>Click the button below</p>
5      <button>Click me</button>
6    </div>
7  );
8}
idomatic v1.0.0
Ready
...
Monthly Downloads
...
GitHub Stars
...
Latest Version
...
Forks

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.

Built for real-world use cases

Whether you're writing tests, improving accessibility, or debugging — idomatic has you covered.

E2E Testing

Stable selectors for Cypress, Playwright, and Selenium. No more flaky tests due to changing class names.

cy.get('#login-btn').click()

Accessibility

Proper IDs enable better screen reader navigation and ARIA label associations.

<label for="email-input">

Debugging

Quickly identify elements in DevTools. Meaningful IDs make debugging a breeze.

document.querySelector('#error-msg')

Team Collaboration

Consistent naming conventions across your codebase. Everyone speaks the same language.

Standardized ID patterns

CI/CD Integration

Run idomatic in your pipeline to ensure all new components have proper IDs before merge.

npx idomatic scan --dry

Analytics & Tracking

Reliable element identification for analytics tools and heatmap tracking.

trackClick('#cta-button')

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"],
  "includeExtensions": ["html", "vue"]
}

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
    Soon
  • Astro
    Soon
  • Handlebars
    Soon
  • SolidJS
    Soon

Frequently Asked Questions

Got questions? We've got answers.

Ready to automate your IDs?

Stop adding IDs manually.
Start shipping faster.

Join developers who save hours every week by automating their ID attributes. Get started in under a minute.

npm init @idomatic
Open SourceMIT LicenseTypeScript ReadyZero Dependencies