Componentize HTML with Atomic CSS Semantics
Zero-runtime · No build step · Pure HTML/CSS templating

👉 AtomicX

• Macro Components - Define reusable templates with @macro: syntax
• Attribute Injection - Dynamically inject content into slots using {curly_braces}
• Micro Aliasing - Create component variants with @micro: directives
• Zero Dependencies - Works with pure HTML/CSS (No JSX, no Virtual DOM)
• Atomic CSS Ready - Perfect companion for Tailwind/UnoCSS workflows
• Debugging Tools - Built-in utilities for template inspection

👉 layout

👉 Source code

Click here

<script src="https://cdn.jsdelivr.net/gh/Jeffrey0117/atomicX/atomicX.js"></script>

1. Download atomicx.js
2. Add to your HTML:

<script src="./atomicx.js"></script>

Define reusable templates directly in HTML:

<!-- Copy the original element (which will still be rendered)-->
<div class="@macro:Card bg-white p-4 rounded-lg shadow">
  <h3 class="text-xl">The first Product</h3>
  <p class="text-gray-600">something about this stuff</p>
</div>

<!-- Usage -->
<Card h3="{The second Prodcut}" p="{here is NEW stuff}"></Card>

AtomicX supports three content injection modes:

<Component 
  img="{logo.png}"        <!-- Injects src for <img> -->
  a="{https://example} text-[24px] text-red-500"   <!-- Injects href for <a> -->
  p="{Dynamic content} text-[18px] text-white"   <!-- Injects textContent for others -->
/>

Style specific child elements using el-[index]:

<Card 
  el-1="text-blue-500"    <!-- Styles first child -->
  el-2="bg-gray-100"      <!-- Styles second child -->
/>

    <div class="@export:Card max-w-[1460px] mx-auto py-[55px] ">  <!-- Make this UI reuseable -->
        <h1 class="text-6xl font-bold text-gray-800">News</h1>
        <p class="text-[20px] mt-3">Choose your country, Please select your region to find the contact closest to you.</p>
    </div>

 <Card> </Card>  <!-- This is the component which you had export from page1.html -->
 <Card h1="{GOODS}" p="text-[32px] mt-5"> </Card>

  <script>
    atomicX.clear(); <!-- Clear the cache -->
    atomicX.from("page1.html");   <!-- Get your components from page1.html-->
  </script>

// Show all processed components
atomicX.debug.showProcessedElements();

// Check specific component state
atomicX.debug.inspect('Card');

• VS Code extension
• CLI tool for static generation
• Interactive playground

We welcome contributions!

MIT © Jeffrey0117