A variable-first, stack-agnostic runtime CSS engine.
Atomic. Tiny (~14kb gzipped). Delightfully intuitive.
Zero build steps • Zero configuration • Zero dependencies
Maple is a runtime CSS engine that generates atomic styles from utility classes only when they appear in the DOM.
Instead of shipping pre-compiled stylesheets, Maple ships a small JavaScript file that observes the DOM and constructs CSSOM incrementally as your application renders. If a class is never used, its style is never generated.
This shifts styling cost from upfront network transfer to demand-driven runtime generation. It eliminates build steps, complex configuration, and unused CSS, while keeping styles encapsulated.
Add Maple to your project by including the script below in the document <head> and start styling with utility classes.
<!doctype html>
<html lang="en">
<head>
<!-- Include Maple in the head -->
<script src="https://cdn.jsdelivr.net/npm/@f12io/maple/dist/maple.js"></script>
</head>
<body>
<!-- Start styling -->
<div class="bgc-blue-500 c-white p-4 rad-2">Hello World</div>
</body>
</html>Like stylesheets, Maple is a render-blocking resource and belongs in <head> as a <script>, so styles exist before the browser paints. Skip async, defer, type="module", and end-of-body placement, for the same reason you wouldn't defer your main stylesheet: they let the browser paint before styles are ready.
Tip
For production, pin Maple to a specific version:
<script src="https://cdn.jsdelivr.net/npm/@f12io/maple@x.y.z/dist/maple.js"></script>Instead of generating or optimizing CSS files ahead of time, Maple generates styles on-demand as the browser encounters classes.
That model creates benefits across delivery, developer experience, and styling power.
- Constant Transfer Size: Maple ships as a single ~14kb gzipped JavaScript file.
- Incremental CSSOM: CSS is constructed incrementally based on what appears on the page.
- Automatic Code Splitting: If a component is not on the screen, its styling cost is zero.
- No Unused Styles: Styles cannot exist "just in case"; they are generated only from classes that appear in the DOM.
- No Build Step: Include the script and start styling.
- No Configuration Files: Maple observes the DOM using a
MutationObserverinstead of scanning source files. - No Special SSR Treatment: Maple behaves the same whether HTML is produced by Next.js, Remix, Nuxt, PHP, or served as a static file.
- Universal Portability: If you can add a
<script>tag, you can use Maple.
- Dynamic Data as CSS: Maple treats dynamic data exactly like static class names.
- Variable-first Architecture: Utilities map to semantic fallback chains of CSS variables.
- Dynamic Color Manipulation: Color utilities resolve through CSS variables in the OKLCH color space.
- True Encapsulation: Selector logic can live inside the class name itself.
Every Maple class name follows a colon-separated structure:
media-query:selector:utilityThe first two parts are optional, so Maple scales from simple utilities to advanced state management.
<div class="bgc-red"></div>
<div class="&:hover:bgc-red"></div>
<div class="@md:^.active:bgc-red"></div>Learn the full syntax in the Syntax Reference.
Maple maps utility classes to cascading CSS variables rather than hardcoded values. You can also define variables directly in HTML using class syntax.
<div class="--primary=blue bgc-primary-200 c-primary-700">I am blue.</div>When you want to bypass the variable system, use = to inject a literal value directly:
<div class="w=86% c=#ff0000"></div>Read more in Variable-first Architecture and Variable Utilities.
Because Maple observes the DOM directly, dynamically generated class names work naturally.
<div className={`md:bg-${userColor} w=${progress}%`}></div>Read more in Dynamic Data as CSS.
Maple color utilities resolve through CSS variables in the OKLCH color space, making lightness, chroma, hue, and alpha adjustable at runtime.
<div class="bgc-primary-320/70 c-white/80"></div>
<div class="c-coral-600"></div>
<div class="bg-teal/70"></div>
<div class="c-slateblue-500/20"></div>Read more in Dynamic Color Manipulation and try the Native Palette.
Maple supports selector logic inside utility classes.
<button class="c-red ^.card:c-green ^.nav:c-blue">
Text is green when in a card and blue when in a navigation bar.
</button>
<button class="&:hover:c-black">The text becomes black on hover</button>
<div class="/>span:fw=700">
<span>This text is bold</span>
</div>Read more in True Encapsulation and Selectors.
Aliases expand into one or more utility classes, letting you build reusable grouped classes. You can define custom aliases on the root <html> element using --alias-{name}=... and apply them with @. Alias definitions are read once at load and locked — changing them at runtime has no effect.
<html class="--alias-truncate=of=hidden;tof=ellipsis;ws=nowrap">
<body>
<!-- Usage: Grouped utility classes under a single name -->
<span class="@truncate w-40">Long text that should truncate</span>
</body>
</html>Aliases can also accept parameters using {name} placeholders. This allows you to create incredibly flexible, reusable utility abstractions that adapt dynamically to your design needs, bridging the gap between static utility classes and dynamic components.
By combining parameterized aliases with nested forwarding, you can build entire component systems directly in your root HTML:
<html
class="--alias-swatch=c-{color,black}-600;bgc-{color,black}-100;brc-{color,black}-200;square-8;br"
>
<body>
<!-- Usage: Instant, dynamic variations -->
<div class="@swatch"></div>
<!-- Black (Default) -->
<div class="@swatch(red)"></div>
<div class="@swatch(green)"></div>
</body>
</html>Maple moves styling work from build time to runtime. That gives you zero build steps, zero configuration, no unused CSS, and dynamic styling. It also means the following.
- JavaScript is required. Maple generates styles in the browser rather than shipping a static stylesheet, so it carries the same requirement as any client-rendered application. This is the fundamental trade-off for a no-build pipeline and constant transfer size. If you need to fully support JavaScript-disabled clients, Maple may not be the right tool for you.
- Runtime work scales with utility classes. Work is proportional to the number of unique utility classes that appear in the DOM, not to the number of elements; a class that repeats reuses the rule already generated. In exchange, a class that never appears is never generated, so a page pays only for what it renders.
- Relative OKLCH colors need modern browsers. Maple color utilities use CSS relative color syntax with OKLCH, so colors can be adjusted from their base values in the browser. As of August 2026, global support for relative color syntax is about 91%, with broader support for plain OKLab and OKLCH colors. Browsers that do not support relative color syntax ignore those generated color declarations.
Maple includes a Playwright-based benchmark suite that compares runtime delivery against static CSS delivery across workload sizes, network profiles, and CPU profiles.
The default static fixture is intentionally a best-case baseline: it contains exactly the CSS rules needed by the generated page. For a payload model closer to common real-world CSS delivery, the benchmark can also add unused static CSS to represent shared bundles, global styles, route-level CSS, component-library CSS, or conservatively extracted utilities.
See the benchmark methodology for the command reference, reproducibility notes, fixture design, measurement contract, and report interpretation. For a deeper dive into the results and analysis, check out the dedicated Guide page.
Contributions are welcome! See contributing docs for development setup, project layout, and pull request guidelines.
Released under the Root Source License (ROOT), an MIT-style permissive license with an additional distribution condition for systems that can recreate the source on demand. © f12.io