Rattribute.js allows you to define different HTML attributes for different viewport widths using simple data-* attributes. Whether you need to change classes, targets, ARIA attributes, or any other HTML attribute, Rattribute.js updates your elements automatically as the browser size changes — without writing responsive JavaScript.
This is a brand new project that I started a few days ago!
williamtroup
/
Rattribute.js
❓ A lightweight JavaScript library for automatically changing HTML element attributes based on responsive screen sizes.
Rattribute.js
❓ Rattribute.js allows you to define different HTML attributes for different viewport widths using simple data-* attributes. Whether you need to change classes, targets, ARIA attributes, or any other HTML attribute, Rattribute.js updates your elements automatically as the browser size changes — without writing responsive JavaScript.
v1.3.1
What features does Rattribute.js have?
- 🚀 Zero dependencies and lightweight.
- 📝 Written in TypeScript with excellent editor support.
- 📱 Responsive breakpoints matching Bootstrap (
xs–xxl), plus custom sizes. - 🔄 Automatically detects new DOM elements.
- ⚙️ Public API for manual control.
- 🎯 Ignore specific elements when needed.
- 🧩 Set attribute values directly or from function calls.
What browsers are supported?
Rattribute.js works in all modern browsers, including:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
- Opera
What are the most recent changes?
To see a list of all the most recent changes, click here.
How do I install Rattribute.js?
You…
Top comments (1)
Interesting approach. Attribute-driven libraries like this are a good reminder that sometimes the simplest abstractions can solve recurring UI problems without introducing unnecessary complexity.
I like the idea of keeping behavior close to the markup. For many frontend use cases, especially smaller components and progressive enhancement scenarios, this can improve readability and reduce the amount of JavaScript glue code.
A few things I usually consider when adopting this pattern in production:
Ensure attributes remain meaningful and maintainable as the application grows
Avoid turning HTML attributes into hidden business logic
Keep accessibility behavior (ARIA states, keyboard interactions, focus management) part of the component design
Add clear conventions so teams understand which behaviors belong in attributes vs application code
There is definitely a balance between declarative simplicity and long-term scalability.
Great work — lightweight libraries like this can be very valuable when they solve a specific problem without forcing developers into a large framework.