The first to wrap the new browser API in a component library, it hit 5,000 stars and got named in Chrome's official blog

Canvas UI (DavidHDev/canvas-ui) research report

Research date 2026-11-06. Channel: GitHub. Data sources: our github database (repo_profile / repo_day), GitHub API, canvasui.dev, InfoQ, the Chrome for Developers blog, HN Algolia, YouTube Data API, Exa / Jina search.

One line

The first HTML-in-Canvas component library, built by David Haz, author of React Bits (51k stars). It treats real, interactive DOM as a WebGL/WebGPU texture and runs shader effects on top of it: liquid, fire, glass, ASCII, shatter, and more. Install into React / Vue / Svelte / Solid / Preact / vanilla with one shadcn registry command. Free (MIT + Commons Clause).

Verdict: it worked because of a ready-made distribution base from the author, plus a fresh browser API that had an empty niche. While Chrome's HTML-in-Canvas was still in origin trial, it got there first by packaging the API as a ready-to-use component library, becoming the showcase for the API. Later, Chrome's official stable-release blog recommended it alongside Three.js, Babylon, and PixiJS, which gave it another boost. The stars came from the author's existing audience and launch-day X buzz, not paid acquisition.

1. Growth data

• Got over 4,600 stars within two months of launch, about 86% of the current total. A classic launch spike, followed by a long tail, with a few small peaks pushed by Chrome's platform events.
• Commit pace is slowing. Dense from late July to mid-August (8-14 commits on a single day at most 39), with only sporadic commits in September. The last push was 10-03. Component count grew from about 24–33 at launch to 35.
• No suspect flags. The fork/star ratio is about 5%, which is normal for a UI component library (people mostly copy code rather than fork). No sign of star inflation.

2. Competitors

Landscape: Searching html-in-canvas libraries in our GitHub database, Canvas UI has 5,337 stars. Second place is the WICG spec repo itself (4,088 stars), and everything below that, components or demos, sits under 200 stars. For this new API's component-library slot, it has essentially no competition.

3. Growth tactics (where users come from)

1. The author's existing distribution (confirmed): React Bits has 51k stars and heavy website traffic. On launch day they pinned an announcement in the react-bits repo (Discussion #1008,2026-07-23, titled "The First Ever html-in-canvas Component Library"). The author's GitHub has 3,272 followers, plus the X account @davidhaz and Instagram @david.webdev.
2. Launch-day buzz on X (confirmed): The author's launch post went up at about 2026-07-23 UTC (post 2080224101432447094 on 09:30). The same day, shadcn reposted it with "One of the most impressive registries I've seen" (11:53 UTC), and the Chrome for Developers official account reposted it with "Great to see HTML-in-Canvas already empowering new frameworks" (17:27 UTC). The homepage turns this run of praise (shadcn, ChromiumDev, and a dozen more) into a social-proof wall.
3. YouTube and creator amplification (confirmed): OrcDev, "The Biggest Web UI Breakthrough in Years" (7-2.42M views); Better Stack, "This component library is mind-blowing (Canvas UI)" (8-253k); RoboNuggets (7-28,5.2k); Codedigipt (8-04,3.7k); Duo Talks AI, "Your Claude Code Apps Look Generic. Use This." (9-08,2.9k); CalmCode (8-24,2k). Hyperplexed also has "New browser update lets you set things on FIRE" (8-1.37M), which covers this API; whether it mentions Canvas UI is unverified.
4. LinkedIn and Spanish/Vietnamese-language reposts (confirmed): midudev (a major Spanish-language frontend account) 7-23 posted the same day, Nader Dabit 7-27 posted "Blown away…", plus the TOOOLS.design weekly and Adham Dannaway, among dozens of other posts.
5. Tech media (confirmed): Flavio Copes wrote a long breakdown (7-28), InfoQ published news coverage (9-24), and daily.dev and bestofjs both listed it.
6. Platform event / official endorsement (confirmed): Chrome 157 shipped HTML-in-Canvas to stable, and the official blog (2026-10-26) lists CanvasUI in its "Framework and ecosystem support" section alongside Three.js, PlayCanvas, Babylon.js, and PixiJS. Afterward, Japanese, Russian, and Spanish-language explainers and videos about Chrome 157 followed (Habr 10-30, たもたも子 11-03, and others). The small late-October bump in stars lines up with this timing, but we have no day-by-day click attribution.
7. HN was not a source (confirmed): The launch-day Show HN post, "CanvasUI: HTML-in-Canvas Component Library," got only 2 points. The HN discussion that did take off was about the API itself (HTML-in-Canvas Demos, 67 points; the origin trial blog, 123 points).
8. SEO and AI entry points: The shadcn registry plus an MCP server (so AI assistants can search and install components directly), a README that says "MCP ready," and several "seo update" commits on the website. From 11-01 to 11-06, a batch of content-farm sites (lcua.org, cfirehose.org, uvuu.org, and others) rewrote articles titled "Canvas UI: 35 HTML-in-Canvas Components…" They are riding the project's keywords; the author didn't run them.
9. No paid acquisition found: The product is free with no paywall, and we found no ads.

Source of the 11-02 single-day +92 is unverified: The timing overlaps with secondary spread after Chrome 157 stable rolled out and with the cluster of content-farm articles, but we couldn't find one specific big post responsible.

4. How the money comes back

Canvas UI itself is "Free forever," under MIT + Commons Clause, which allows commercial use but not reselling the components. The money comes from the same author's React Bits Pro: one-time purchases at $129 / $249 / $349, with annual plans starting at $79. TrustMRR publicly reports its revenue; search snippets show "React Bits Pro - $57,555 last 30 days," and the founder page shows $279,914 lifetime (date unverified). Canvas UI's job is to boost the author's brand and audience and funnel people to Pro (the author's pinned X post is for React Bits Pro). It doesn't monetize directly.

5. Why it took off

1. Timing: a new browser API just dropped, and the niche is still empty.HTML-in-Canvas 2026-05 entered origin trial around Google I/O, and Chrome DevRel's demo blew up on HN, but all that's out there are scattered demos and raw engine-level APIs. Canvas UI 7-23 launched as the "first html-in-canvas component library" and grabbed that title.
2. The author's distribution: React Bits built an audience of over 50k stars and relationships in the shadcn ecosystem, which is why shadcn himself and the official Chrome account reposted on launch day.
3. The product is a strong demo: whole-page DOM warps under fire, liquid, and glass, and the links still work. That kind of "visual spectacle" travels naturally through short video and X, and plenty of YouTube titles use "mind-blowing" and "Biggest Breakthrough."
4. Low barrier to use: npx shadcn add @canvas-ui/xxx-react installs it in one line, and the source lands directly in your project. It covers 6 frameworks, each with both WebGL and WebGPU builds. Unsupported browsers fall back automatically to a GPU overlay. It's also wired to MCP, so AI coding tools can call it directly.
5. Official endorsement: The Chrome 157 stable blog named it as a recommendation, moving it from "experimental toy" to "ecosystem library the official channel mentions."

6. Differentiation

• Core difference: It's the only component library that uses the page itself as shader input. Magic UI, Aceternity, and React Bits animate the DOM; Paper Shaders only handle backgrounds; engines like Three.js only provide low-level APIs. InfoQ's words: "Canvas UI is the only option using the page itself as shader input."
• Secondary differences: full coverage of 6 frameworks × 2 renderers, distribution via shadcn registry, MCP, and graceful degradation.
• Is the difference why it took off? Yes, but read it together with distribution. The novelty of "real DOM + shaders" gave the demo its spread. But the first wave of attention came from the React Bits author's standing, plus reposts from shadcn and Chrome. Someone without an audience building the same thing would likely have gotten only the 2 points on HN. Also, the difference rests on a Chrome-only API (Safari and Firefox haven't shipped it), so the moat is first-mover advantage and brand, not technical difficulty.

7. Visibility

It's already widely discussed: InfoQ covered it, the Chrome official blog named it, shadcn and ChromiumDev reposted it, and there are YouTube videos at the 50k-view level. The author's main business, React Bits Pro, has public revenue on TrustMRR. This isn't a secret.

8. Copycats

No serious copycat component libraries found: in our GitHub database, other html-in-canvas libraries sit under 200 stars, and most are single-effect demos that predate it. People are already building around its name:

• A Chrome extension, "Canvas UI Anywhere," by third-party developer AI Mindset, at version 0.1.0, updated 2026-10-13, which overlays the canvasui.dev playground onto any webpage;
• Content-farm sites mass-rewriting articles for SEO.

9. Takeaways

• Hit the window while a new platform API is still early: When a browser or OS API enters origin trial or beta, the first person to package it into a ready-to-use product (components, templates, libraries) gets promoted by the platform itself as a case study (here, the Chrome stable blog naming it).
• Use a free flagship project to build an audience for a paid core product: Canvas UI is free and builds brand and traffic for the author's React Bits Pro.
• Lead with a visual-spectacle demo: The product is the demo, which suits short video and X well; the site runs a wall of creator praise as social proof.
• Distribute via shadcn registry + MCP: Components go directly into users' codebases and AI coding assistant workflows, lowering the barrier to trying it.
• MIT + Commons Clause license: Allows commercial use while preventing resale.

10. Still unclear

• Who drove the +164 from 10-14 to 10-16 and the +92 on 11-02 is unknown; we found no matching posts.
• View counts and likes on the author's X launch post (not in our local x-radar corpus).
• How many production sites actually use Canvas UI (registry install counts aren't public).
• The date TrustMRR's React Bits Pro revenue figure was scraped, and how many conversions Canvas UI drives to Pro.
• Maintenance is slowing (no commits after 10-03). Whether and when Safari and Firefox support this API will decide whether it moves from "showcase" to "everyday tool."

Sources

• Repo / README / commits: github.com/DavidHDev/canvas-ui
• Launch announcement: github.com/DavidHDev/react-bits/discussions/1008 (2026-07-23)
• InfoQ:www.infoq.com/news/2026/09/canvas-ui-webgl/(2026-09-24)
• Chrome 157 stable blog: developer.chrome.com/blog/html-in-canvas (2026-10-26, names CanvasUI)
• Origin trial blog: developer.chrome.com/blog/html-in-canvas-origin-trial
• Flavio Copes:flaviocopes.com/canvas-ui/(2026-07-28)
• Official site's praise wall (X posts from shadcn, ChromiumDev and others): canvasui.dev/
• HN: item 49019078 (CanvasUI, 2 points), 48201222 (Demos, 67 points), 50200164 (origin trial, 123 points)
• YouTube Data API (view counts pulled from 2026-11-06): Better Stack JZf_m_BVDaQ, OrcDev aVgR5YHk4QA and others
• React Bits Pro price: reactbits.dev/pro; revenue: trustmrr.com/startup/react-bits-pro (search snippet)
• Chrome extension: chromewebstore.google.com/detail/canvas-ui-anywhere/lgpkfmjh…
• Star curve: our github repo data, repo_day / repo_profile (2026-10-09 to 11-06)