For years, frontend development has been dominated by the build step. Webpack, Rollup, Vite, PostCSS... the list goes on. While these tools are powerful, they introduce a layer of complexity that can be overkill for many projects. We asked ourselves: What if you could just write HTML?
The Problem with Static CSS
Traditional CSS requires you to maintain a separate stylesheet file. Utility frameworks like Tailwind CSS improved this by moving styles into the HTML, but they still require a heavy Node.js build process to generate the final CSS file. This creates a barrier to entry for backend developers, beginners, and those working on legacy stacks.
The AtomAttr Solution
AtomAttr takes a different approach. Instead of compiling your CSS at build time, it compiles it at runtime, right in the user's browser. This might sound slow, but thanks to modern JavaScript engines and the MutationObserver API, it happens in milliseconds.
<div flex justify="center" items="center" h="screen" bg="slate-900">
<h1 text="white" size="3rem">Hello World</h1>
</div>With the code above, AtomAttr scans the DOM, identifies the attributes, generates the corresponding atomic CSS classes, and injects them into the page style. It's instant, responsive, and requires zero configuration.
Key Benefits
- Zero Config: No `npm install`, no `tailwind.config.js`. Just a script tag.
- Framework Agnostic: Works with React, Vue, PHP, Rails, or plain HTML.
- Tiny Footprint: The engine is less than 10KB gzipped.
We believe this is the future of rapid prototyping and simpler web development. Try it out in the Playground today.