Introduction: Maple CSS Engine

A variable-first, stack-agnostic runtime CSS engine. Atomic, tiny (~14kb gzipped), delightfully intuitive.

What is Maple?

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 the styling cost from upfront network transfer to demand-driven runtime generation. It entirely eliminates build steps, complex configuration, and unused CSS, while keeping your styles strictly encapsulated.

Any Stack, Any Framework

Maple works seamlessly with any frontend framework (React, Vue, Angular, Svelte) or backend-driven architecture (WordPress, Django, Rails, PHP).

Whether your HTML is server-rendered by Next.js, dynamically generated by PHP, or served as a static file, Maple behaves the same way. There is no style collection step, no critical CSS extraction, and no framework-specific integration required. You just drop it in and start styling.

Variable-First

Maple maps utility classes to cascading CSS variables rather than hardcoded values. A single class like .bgc-primary-500 dynamically constructs an OKLCH color pipeline, giving you granular control over fallback values, lightness scaling, and hue rotation directly in the browser.

Ready to Start?

Because Maple operates entirely at runtime, trying it out is as simple as adding a single script tag to your document. No terminal commands, no configuration files, and no build steps. Head over to the Quick Start to drop the engine into your project and start styling immediately.