A native, zero-config optimization engine for the modern web.
Cherry.js is a "healing" library designed to bridge the gap between semantic design and technical performance. It identifies common accessibility gaps, SEO omissions, and performance bottlenecks (like Cumulative Layout Shift) and patches them at runtime during browser idle periods.
Most performance tools only report errors; Cherry fixes them. Built on the principle of "In-Flight Repair", it offers:
- Zero Technical Debt: Patches legacy HTML for WCAG and SEO compliance without changing a line of source code.
- Idle-Time Execution: Utilizes
requestIdleCallbackto perform DOM surgery only when the browser is idle, protecting your Total Blocking Time (TBT). - Aesthetic Preservation: Allows designers to focus on the visual layer while the engine handles the technical enforcement underneath.
CDN (recommended):
-
Simply add this in your
<head>tag:<script src="https://cdn.jsdelivr.net/gh/kaiserrrrrr/cherry/src/cherry.min.js" async></script>
Manually:
-
Download the file:
wget "https://cdn.jsdelivr.net/gh/kaiserrrrrr/cherry/src/cherry.min.js"OR download directly: cherry
-
Link it from HTML:
<script src="cherry.min.js" async></script>
sequenceDiagram
autonumber
participant B as Browser
participant C as Cherry.js
participant D as DOM (Web Page)
Note over B, D: Script Initialization
B->>C: Load script
activate C
alt if readyState is 'complete'
C->>C: init()
else wait for 'load' event
B-->>C: window.onload
C->>C: init()
end
deactivate C
Note over C, D: Performance
activate C
C->>D: Set loading="lazy" (img/iframe)
C->>D: Set width/height from naturalWidth
C->>B: Force {passive: true} on listeners
C->>D: Append font preconnect links
deactivate C
Note over C, D: Accessibility
activate C
C->>D: Remove body[aria-hidden]
C->>D: Fix input Labels & unique IDs
C->>D: Ensure alt="" and aria-labels exist
C->>D: Set min-size (44px) for tap targets
deactivate C
Note over C, D: Best Practices
activate C
C->>D: Add [rel="noopener"] to _blank links
C->>D: Reset tabindex > 0 to 0
C->>B: Stop paste event propagation
C->>D: Remove <meta http-equiv="refresh">
deactivate C
Note over C, D: SEO
activate C
C->>D: Set html[lang] & charset="UTF-8"
C->>D: Generate Description & Robots meta
C->>D: Enforce viewport max-scale=5
C->>D: Inject hidden H1 & fix list nesting
deactivate C
Note over B, D: Page Optimization Complete
Cherry.js is the definitive technical companion for Blossom.css. While Blossom provides the visual framework and semantic baseline, Cherry handles the technical enforcement:
- Layout Stability: Respects Blossom's centering logic (
max-widthandmargin: auto) while preventing layout jumps. - Theme Native: Injected UI elements automatically inherit Blossom’s CSS variables (
--bg-color,--text-color,--btn-bg). - Responsive Dark Mode: Fully compatible with Blossom’s native
@media (prefers-color-scheme: dark)root variables.
 Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
 Samsung |
 Opera |
|---|---|---|---|---|---|---|
| Edge | Last 68 versions | Last 65 versions | Last 6 versions | Last 6 versions | Last 16 versions | Last 60 versions |
© Cherry 2026. Code released under the GNU General Public License v3.0.
Built with 🍒 and Blossom.