{"id":37351093,"url":"https://github.com/f12io/maple","last_synced_at":"2026-07-05T00:00:58.313Z","repository":{"id":361424216,"uuid":"263624232","full_name":"f12io/maple","owner":"f12io","description":"A variable-first, stack-agnostic CSS engine that generates atomic styles from utility classes only when they appear  in the DOM.","archived":false,"fork":false,"pushed_at":"2026-06-20T08:24:44.000Z","size":1699,"stargazers_count":30,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-06-20T10:12:36.285Z","etag":null,"topics":["css","css-engine","maple","runtime-css","utility-classes"],"latest_commit_sha":null,"homepage":"https://maple.f12.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/f12io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-05-13T12:31:56.000Z","updated_at":"2026-06-20T08:24:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/f12io/maple","commit_stats":null,"previous_names":["f12io/maple"],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/f12io/maple","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f12io%2Fmaple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f12io%2Fmaple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f12io%2Fmaple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f12io%2Fmaple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f12io","download_url":"https://codeload.github.com/f12io/maple/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f12io%2Fmaple/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35139194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-04T02:00:05.987Z","response_time":113,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-engine","maple","runtime-css","utility-classes"],"created_at":"2026-01-16T04:02:34.287Z","updated_at":"2026-07-05T00:00:58.284Z","avatar_url":"https://github.com/f12io.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ch1\u003eMaple\u003c/h1\u003e\n  \u003cp\u003e\n    A variable-first, stack-agnostic runtime CSS engine.\u003cbr\u003e\n    Atomic. Tiny (~12kb gzipped). Delightfully intuitive.\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    Zero build steps • Zero configuration • Zero dependencies\n  \u003c/p\u003e\n\n  \u003cp\u003e\n    \u003ca href=\"#quick-start\"\u003eQuick Start\u003c/a\u003e •\n    \u003ca href=\"#why-maple\"\u003eWhy Maple?\u003c/a\u003e •\n    \u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e •\n    \u003ca href=\"https://maple.f12.io\"\u003eWebsite\u003c/a\u003e\n  \u003c/p\u003e\n\n\u003c/div\u003e\n\n## TL;DR\n\nMaple is a runtime CSS engine that generates atomic styles from utility classes **only when they appear in the DOM**.\n\nInstead 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.\n\nThis 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.\n\n## Quick Start\n\nAdd Maple to your project by including the script below in the document `\u003chead\u003e` and start styling with utility classes.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003c!-- Include Maple in the head --\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@f12io/maple/dist/maple.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- Start styling --\u003e\n    \u003cdiv class=\"bgc-blue-500 c-white p-4 rad-2\"\u003eHello World\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e [!IMPORTANT]\n\u003e Load Maple as a blocking script in the document head.\n\u003e\n\u003e Maple replaces a render-blocking stylesheet with a small render-blocking runtime. Loading it with `async`, `defer`, `type=\"module\"`, or at the end of the body allows the browser to paint elements before Maple has generated their styles, which can cause a Flash of Unstyled Content.\n\n\u003e [!TIP]\n\u003e For production, pin Maple to a specific version:\n\u003e\n\u003e ```html\n\u003e \u003cscript src=\"https://cdn.jsdelivr.net/npm/@f12io/maple@x.y.z/dist/maple.js\"\u003e\u003c/script\u003e\n\u003e ```\n\n## Why Maple?\n\nInstead of generating or optimizing CSS files ahead of time, Maple generates styles **on-demand** as the browser encounters classes.\n\nThat model creates benefits across delivery, developer experience, and styling power.\n\n### Delivery \u0026 Performance\n\n- [Constant Transfer Size](https://maple.f12.io/docs/why-maple/constant-transfer-size): Maple ships as a single ~12kb gzipped JavaScript file.\n- [Incremental CSSOM](https://maple.f12.io/docs/why-maple/incremental-cssom): CSS is constructed incrementally based on what appears on the page.\n- [Automatic Code Splitting](https://maple.f12.io/docs/why-maple/automatic-splitting): If a component is not on the screen, its styling cost is zero.\n- [No Unused Styles](https://maple.f12.io/docs/why-maple/no-unused-styles): Styles cannot exist \"just in case\"; they are generated only from classes that appear in the DOM.\n\n### Developer Experience\n\n- [No Build Step](https://maple.f12.io/docs/why-maple/no-build-step): Include the script and start styling.\n- [No Configuration Files](https://maple.f12.io/docs/why-maple/no-configuration-files): Maple observes the DOM using a `MutationObserver` instead of scanning source files.\n- [No Special SSR Treatment](https://maple.f12.io/docs/why-maple/no-special-ssr-treatment): Maple behaves the same whether HTML is produced by Next.js, Remix, Nuxt, PHP, or served as a static file.\n- [Universal Portability](https://maple.f12.io/docs/why-maple/universal-portability): If you can add a `\u003cscript\u003e` tag, you can use Maple.\n\n### Styling Power\n\n- [Dynamic Data as CSS](https://maple.f12.io/docs/why-maple/dynamic-data-as-css): Maple treats dynamic data exactly like static class names.\n- [Variable-first Architecture](https://maple.f12.io/docs/why-maple/variable-first-architecture): Utilities map to semantic fallback chains of CSS variables.\n- [Dynamic Color Manipulation](https://maple.f12.io/docs/why-maple/dynamic-color-manipulation): Color utilities resolve through CSS variables in the OKLCH color space.\n- [True Encapsulation](https://maple.f12.io/docs/why-maple/true-encapsulation): Selector logic can live inside the class name itself.\n\n## Syntax\n\nEvery Maple class name follows a colon-separated structure:\n\n```txt\nmedia-query:selector:utility\n```\n\nThe first two parts are optional, so Maple scales from simple utilities to advanced state management.\n\n```html\n\u003cdiv class=\"bgc-red\"\u003e\u003c/div\u003e\n\u003cdiv class=\"\u0026:hover:bgc-red\"\u003e\u003c/div\u003e\n\u003cdiv class=\"@md:^.active:bgc-red\"\u003e\u003c/div\u003e\n```\n\nLearn the full syntax in the [Syntax Reference](https://maple.f12.io/docs/syntax).\n\n## Examples\n\n### Variable-first Utilities\n\nMaple maps utility classes to cascading CSS variables rather than hardcoded values. You can also define variables directly in HTML using class syntax.\n\n```html\n\u003cdiv class=\"--primary=blue bgc-primary-200 c-primary-700\"\u003eI am blue.\u003c/div\u003e\n```\n\nWhen you want to bypass the variable system, use `=` to inject a literal value directly:\n\n```html\n\u003cdiv class=\"w=86% c=#ff0000\"\u003e\u003c/div\u003e\n```\n\nRead more in [Variable-first Architecture](https://maple.f12.io/docs/why-maple/variable-first-architecture) and [Variable Utilities](https://maple.f12.io/docs/guide).\n\n### Dynamic Classes\n\nBecause Maple observes the DOM directly, dynamically generated class names work naturally.\n\n```jsx\n\u003cdiv className={`md:bg-${userColor} w=${progress}%`}\u003e\u003c/div\u003e\n```\n\nRead more in [Dynamic Data as CSS](https://maple.f12.io/docs/why-maple/dynamic-data-as-css).\n\n### Dynamic Colors\n\nMaple color utilities resolve through CSS variables in the OKLCH color space, making lightness, chroma, hue, and alpha adjustable at runtime.\n\n```html\n\u003cdiv class=\"bgc-primary-320/70 c-white/80\"\u003e\u003c/div\u003e\n\u003cdiv class=\"c-coral-600\"\u003e\u003c/div\u003e\n\u003cdiv class=\"bg-teal/70\"\u003e\u003c/div\u003e\n\u003cdiv class=\"c-slateblue-500/20\"\u003e\u003c/div\u003e\n```\n\nRead more in [Dynamic Color Manipulation](https://maple.f12.io/docs/why-maple/dynamic-color-manipulation) and try the [Native Palette](https://maple.f12.io/docs/guide/native-palette).\n\n### Inline Selectors\n\nMaple supports selector logic inside utility classes.\n\n```html\n\u003cbutton class=\"c-red ^.card:c-green ^.nav:c-blue\"\u003e\n  Text is green when in a card and blue when in a navigation bar.\n\u003c/button\u003e\n\n\u003cbutton class=\"\u0026:hover:c-black\"\u003eThe text becomes black on hover\u003c/button\u003e\n\n\u003cdiv class=\"/\u003espan:fw=700\"\u003e\n  \u003cspan\u003eThis text is bold\u003c/span\u003e\n\u003c/div\u003e\n```\n\nRead more in [True Encapsulation](https://maple.f12.io/docs/why-maple/true-encapsulation) and [Selectors](https://maple.f12.io/docs/syntax/selectors).\n\n### Aliases\n\nAliases expand into one or more utility classes, letting you build reusable grouped classes. You can define custom aliases on the root `\u003chtml\u003e` element using `--alias-{name}=...` and apply them with `@`.\n\n```html\n\u003chtml class=\"--alias-truncate=of=hidden;tof=ellipsis;ws=nowrap\"\u003e\n  \u003cbody\u003e\n    \u003c!-- Usage: Grouped utility classes under a single name --\u003e\n    \u003cspan class=\"@truncate w-40\"\u003eLong text that should truncate\u003c/span\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Parameterized Aliases\n\nAliases 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.\n\nBy combining parameterized aliases with nested forwarding, you can build entire component systems directly in your root HTML:\n\n```html\n\u003chtml\n  class=\"--alias-swatch=c-{color,black}-600;bgc-{color,black}-100;brc-{color,black}-200;square-8;br\"\n\u003e\n  \u003cbody\u003e\n    \u003c!-- Usage: Instant, dynamic variations --\u003e\n    \u003cdiv class=\"@swatch\"\u003e\u003c/div\u003e\n    \u003c!-- Black (Default) --\u003e\n    \u003cdiv class=\"@swatch(red)\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"@swatch(green)\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Limitations \u0026 Trade-offs\n\nMaple's architecture offers unique benefits but also introduces constraints you should understand before adoption.\n\n- **JavaScript is Required.** Maple runs entirely in the browser and does not generate static CSS. If JavaScript is disabled, the page will render without styles.\n- **Runtime Cost Scaling.** Maple's generation work scales with the number of **unique** utility classes that appear in the DOM.\n- **Not all CSS fits in Utilities.** Certain patterns, such as keyframes, font-face declarations, and global resets, are often better expressed in traditional CSS.\n- **Relative OKLCH Colors.** As of May 2026, global support for relative color syntax is about 89%, with broader support for plain OKLab and OKLCH colors. Browsers that do not support relative color syntax ignore those generated color declarations.\n\n## Runtime vs Static\n\nMaple includes a Playwright-based benchmark suite that compares runtime delivery against static CSS delivery across workload sizes, network profiles, and CPU profiles.\n\nThe 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.\n\nSee the [benchmark methodology](examples/benchmarks/README.md) 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](https://maple.f12.io/docs/guide/performance) page.\n\n## Documentation\n\n- [Introduction](https://maple.f12.io/docs)\n- [Quick Start](https://maple.f12.io/docs/quick-start)\n- [Why Maple?](https://maple.f12.io/docs/why-maple)\n- [Syntax Reference](https://maple.f12.io/docs/syntax)\n- [Guide](https://maple.f12.io/docs/guide)\n\n## Contributing\n\nContributions are welcome! See [contributing docs](https://github.com/f12io/maple/blob/main/.github/CONTRIBUTING.md) for development setup, project layout, and pull request guidelines.\n\n## License\n\nReleased under the [Root Source License (ROOT)](LICENSE), an MIT-style permissive license with an additional distribution condition for systems that can recreate the source on demand. © [f12.io](https://f12.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff12io%2Fmaple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff12io%2Fmaple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff12io%2Fmaple/lists"}