什么值得做
GitHub 开源项目 · 11-6 写
DavidHDev/canvas-ui · DavidHDev

第一个把新浏览器 API 包成组件库的人,拿到了 5,000 星,还被 Chrome 官方博客点了名

它是什么 一套前端特效组件:把真实网页当贴图,在上面跑火焰、液体、玻璃等着色器效果,页面照样能点能选,六个框架一行命令装好,免费开源。

为什么火了 Chrome 的 HTML-in-Canvas 刚进试用、还没人做成品时它第一个做了;作者是 5.1 万星 React Bits 的作者,发布当天 shadcn 和 Chrome 官方就来转评,10 月 Chrome 157 稳定版博客又把它和 Three.js、Babylon 并列点名。

C你可以怎么跟 别再做一个 html-in-canvas 组件库;盯住浏览器下一个进试用的新 API,第一个把它包成多框架、一行装、带降级的成品,发布当天找平台开发者关系团队和生态大号转发;或者在 html-in-canvas 上做它没做的 3D/游戏内交互界面、带真实 DOM 的图片和视频导出。

C 级:这一格已被一个有 5 万星底盘、被 Chrome 官方点名的作者占住,它的起量主要靠跟进者拿不到的分发,同样的东西没受众的人发只换来 HN 2 分;能学的是「抢新 API 空窗期」这套打法,直接跟进不划算。 已公开 / 被广泛讨论
数据(每天更新) · 建库 2026-07-16 · 5,354 星 · 7 天 +174
GitHub · 星数
4.6k4.8k5k5.2k5.4k10-0910-1310-3011-0411-085.4k
数据 2026-10-09 → 2026-11-08(31 天,19 次观测)。10-28 以前的点来自 deeply / 存档补录,不是每天都有

Canvas UI 是一套前端特效组件:把你的真实网页当成贴图,在上面跑火焰、液体、玻璃、碎裂这些着色器效果,链接照样能点、文字照样能选。7 月 23 日发布,到 11 月 6 日 5,337 星。它能做成,一半是因为踩中了 Chrome 一个刚出来、没人包装的新 API,一半是因为作者手里本来就有一个 5 万星的项目。下面说清楚这两半各占多少,以及你能拿走哪一半。

7 月 23 日,同一个项目的两种开局

2026 年 7 月 23 日,David Haz 在自己的 React Bits 仓库里发了一条置顶公告,标题是「Introducing Canvas UI - The First Ever html-in-canvas Component Library」。正文第一段:

Today I'm releasing a new special project … an open source library of creative components built on the experimental html-in-canvas API. The first of its kind.

React Bits 是他 2024 年做的动画组件库,到现在 5.1 万星(GitHub,11-06)。同一天,他在 X 上发了发布帖(约 09:30 UTC);两个多小时后,shadcn 本人转评「One of the most impressive registries I've seen」;傍晚,Chrome for Developers 官方号也转了:「Great to see HTML-in-Canvas already empowering new frameworks」。

也是同一天,有人把它投到 Hacker News 的 Show HN,标题「CanvasUI: HTML-in-Canvas Component Library」,最后拿了 2 分。

同一个项目、同一天、两个渠道,一边是 shadcn 和 Chrome 官方来捧场,一边是没人看见。这篇要讲的就是这个落差。

它是什么

HTML-in-Canvas 是 Chrome 2026 年 5 月前后放出来试用(origin trial)的新 API:能把一块真实的、可交互的 DOM 画进 <canvas>,当成 WebGL / WebGPU 的纹理。以前要做「整页被火烧掉」这种效果,只能先把页面截成一张死图(html2canvas 那一套),截完就不能点了。

Canvas UI 把这个 API 包成了拿来就用的组件。发布时 24 个,现在 35 个:Liquid、Blaze、Glass、Shatter、VHS、Cloth、Ripple……用法是一行命令:

`` npx shadcn@latest add https://canvasui.dev/r/liquid-react.json ``

源码直接进你的项目,不装 npm 包。React、Vue、Svelte、Solid、Preact、原生 TS 都有,每个框架各有 WebGL 和 WebGPU 两种版本;浏览器不支持这个 API 时自动降级成普通的 WebGL 覆盖层。它还接了 shadcn 的 MCP、每页有「Copy for AI」、放了 llms.txt,AI 写代码时能直接搜到、装上。免费,许可证是 MIT 加 Commons Clause(能商用,不能转卖组件)。

星是怎么涨的

时间星数发生了什么
07-160建仓库
07-23—发布:React Bits 置顶公告、X 发布帖,shadcn 和 Chrome 官方转评;HN 2 分
07-24 至 08 月初—YouTube 二次传播:OrcDev「The Biggest Web UI Breakthrough in Years」(1.57 万播放)、Better Stack「This component library is mind-blowing」(5.33 万播放)
09-244,600+InfoQ 报道里的数
10-094,772每天只涨个位数到十几
10-26—Chrome 157 把 HTML-in-Canvas 发进稳定版,官方博客点名 CanvasUI
11-025,272单日 +92,近一个多月最大的一天
11-065,337近 7 天 +169,fork 273

(星数来自 GitHub,播放量取于 11-06。)

形状很典型:头两个月拿走了现在总数的约 86%,之后是长尾,中间被 Chrome 自己的几次动作推出几个小波峰。10-14 到 10-16 两天多了 164 星、11-02 那天多了 92 星,时间上和 Chrome 发 origin trial 博客、稳定版博客、各语种跟进的介绍文章对得上,但没找到具体是哪一条帖子带来的。

fork 和星的比约 5%,在「复制代码而不是 fork」的 UI 组件库里算正常,看不出刷星的痕迹。

另一个要看的数:最后一次提交是 10 月 3 日。7 月底到 8 月中很密(8 月 14 日一天 39 个提交),9 月只剩零星几个。作者的主业在 React Bits 和它的付费版上,Canvas UI 更像一次漂亮的发布,不是他打算长期深耕的东西。

为什么是它,不是别人

把它拆开,能跟进的人拿得到的,和拿不到的,分得很清楚。

拿不到的:作者的盘子。 5.1 万星的 React Bits、3,000 多个 GitHub 关注者、和 shadcn 生态的熟人关系,让它发布当天就有 shadcn 和 Chrome 官方来转评;西语前端大号 midudev 当天也发了,Nader Dabit 7-27 跟进。同样的东西,一个没有受众的人发,大概率就是 HN 上那 2 分。

拿得到的,有三样:

  1. 时机。 5 月 API 进试用,Chrome 开发者关系团队的 demo 在 HN 拿到 67 分,但市面上只有两种东西:一个仓库只做一个效果的 demo(remotion-dev、fimbox、felixturner 这几个,都在 200 星以下),和 Three.js、Babylon、PixiJS 这些引擎给的底层接口。中间「拿来就能用的成品」这一格是空的。Canvas UI 7 月进去,把「第一个」的名头占了。
  2. demo 自己会传播。 整页在火里扭曲、链接还能点,这种画面不用解释,天然适合 X 和短视频。YouTube 上一串标题都在用「mind-blowing」「Breakthrough」。官网首页把 shadcn、Chrome 官方等十几条好评做成了一面墙。
  3. 平台方会回头替你背书。 10 月 26 日 Chrome 157 稳定版的官方博客,「框架与生态支持」一节列了五项:Three.js、PlayCanvas、Babylon.js、PixiJS,和「CanvasUI: an open-source component library designed specifically for HTML-in-Canvas」。一个三个月大的个人项目,和四个大引擎并排。平台方推新 API 时需要「已经有人在用」的例子,先到的那个最容易被顺手写进去。

InfoQ 9 月的报道总结了它的位置:「Canvas UI is the only option using the page itself as shader input」。在 GitHub 上搜 html-in-canvas 相关的仓库,它第一,第二是 WICG 的规范仓库本身(约 4,100 星),再往下都在 200 星以下。

旁边还有谁

项目规模(GitHub 星,11-06)和 Canvas UI 的区别
React Bits(同一作者)5.1 万给 DOM 做动画,不把页面喂进着色器
Magic UI2.3 万CSS / Motion 动效组件
Motion Primitives6,900动效原语,不用 WebGL
Paper Shaders3,900零依赖着色器,只能当背景,不能扭曲真实页面
Three.js / Babylon / PixiJS 的 HTML 纹理接口引擎本身很大只给底层能力,场景和着色器要自己写
Chrome 官方 demo 合集约 180演示,不能装进项目

三个半月过去,没有出现第二个像样的 html-in-canvas 组件库。周边倒有人在蹭:一个第三方 Chrome 扩展「Canvas UI Anywhere」能把它的 playground 套到任意网页上;11 月初还冒出一批内容农场站在洗稿「Canvas UI: 35 HTML-in-Canvas Components」。

如果是你

一句话: 照着再做一个「html-in-canvas 组件库」不划算——这一格已经被一个有 5 万星底盘、被 Chrome 官方点过名的人占了;值得拿走的是它的打法:盯住浏览器的下一个新 API,在它进试用的那几周,第一个把它包成拿来就用的成品。

适合谁: 会写着色器、WebGL 或底层浏览器 API 的前端,愿意天天看 Chrome 的试用列表(developer.chrome.com/origintrials)和 chromestatus,能在一个 API 放出来后两三个月内交出完整的东西;手里最好已经有一个几千星的项目或者几千个关注者——没有的话,要准备好自己去 X 和 YouTube 找人。

不适合谁: 想做「Canvas UI 的 Vue 版 / Svelte 版」的——它六个框架都覆盖了;想靠「效果更多一点」超过它的——用户不会为第 36 个效果换库;没有任何发布渠道、指望 HN 自然流量的——它本人在 HN 上都只拿了 2 分。

怎么做: 两条路。一条是换 API:找下一个进试用、还只有零散 demo 的新能力,做成组件、多框架、shadcn registry 一行装、带降级、带 MCP 和 llms.txt。另一条是在 html-in-canvas 上做它没做的那一层:Canvas UI 做的是「装饰特效」,Chrome 博客里列的另外几个用途——在 3D 场景和游戏里放可交互的表单和面板、把带真实 DOM 的画面直接导出成图片或视频流(captureStream())——还没有一个像样的、拿来就用的库(推断,按 GitHub 上相关仓库都在 200 星以下)。

怎么获客: 照它的发布日来:先做一个十秒就能看懂、能直接录屏的 demo;发布当天在 X 上发,提前私信 API 背后的平台开发者关系团队和生态里的大号,请他们转;同一天在你已有的项目里发置顶公告;一周内去找做「新东西速览」的 YouTube 频道。别把 HN 当主渠道。官网首页放好评墙。

什么时候之前: 越早越好。一个 API 从试用到进稳定版,这次是 5 月到 10 月,大约五个月;稳定版发布博客里要列「生态支持」,在那之前你得已经上线、已经有人在用。

什么情况说明看错了: ① Safari 和 Firefox 一直不跟进 HTML-in-Canvas,这类特效停在「Chrome 上的炫技」,Canvas UI 的星数在 2027 年初之前稳定在每天个位数——说明「新 API 组件库」的天花板就是一次发布脉冲,不值得为下一个 API 再赌一次;② 一个没有大号背书的人做的同类新 API 组件库,半年内靠自己拿到 2,000 星以上——说明分发没那么关键,机会比这里说的更大;③ Chrome 后面几个新 API 的稳定版博客不再列第三方库,或只列大公司的——「被平台方顺手推一把」这条就不成立了。

数据与出处

  • 仓库、提交记录、星数:github.com/DavidHDev/canvas-ui(星数逐日记录 10-09 至 11-06)
  • 发布公告:github.com/DavidHDev/react-bits/discussions/1008(2026-07-23)
  • Chrome 157 稳定版博客:developer.chrome.com/blog/html-in-canvas(2026-10-26)
  • InfoQ:infoq.com/news/2026/09/canvas-ui-webgl(2026-09-24)
  • 转评:canvasui.dev 首页好评墙里的 X 帖链接
  • HN:Show HN「CanvasUI」2 分;「HTML-in-Canvas Demos」67 分
  • YouTube 播放量:11-06 取数

GitHub 仓库 ↗

研究底稿:竞品表、获客证据、完整研究报告
竞品
名字在哪上线规模它和这家不同在哪
React Bits / Vue Bits / Svelte Bits(同一作者)开源2024-08 / 2025-0751.3k / 4.6k / 0.4k 星,另有付费 Pro直接给 DOM 做动画;Canvas UI 把整页 DOM 当着色器输入,是作者自己开的新品类
Magic UI开源2023-0623.1k 星用 CSS/Motion 做动画组件,不把真实 DOM 喂进 GPU
Aceternity UI网页2023未核实落地页特效组件,不用 HTML-in-Canvas
Motion Primitives开源2024-076.9k 星动效原语,不用 WebGL
Paper Shaders开源2024-103.9k 星零依赖的 canvas 着色器,只能当背景,不能扭曲真实页面
Three.js HTMLTexture / Babylon HtmlTexture / PixiJS HTMLSource / PlayCanvas开源2026(随 origin trial)大型引擎只给底层接口,要自己写场景和着色器;Canvas UI 是开箱即用的成品组件,包好了降级
Chrome DevRel 官方 HTML-in-Canvas demo大厂功能2026-05仓库 180 星,HN 67 分只是演示,不能装进项目
零散 html-in-canvas demo(remotion-dev、fimbox、jeantimex、felixturner)开源2026-04 至 05都在 200 星以下一个仓库一个效果,没有多框架分发和 registry
html2canvas / dom-to-image开源多年前大截的是死位图,不可交互;Canvas UI 的页面保持可选、可点
用户从哪来
  • 查实 作者现成受众(React Bits 5.1 万星、仓库公告):react-bits Discussion #1008,2026-07-23 发布公告
  • 查实 X 发布当天的大号转评:shadcn(07-23 11:53 UTC)、ChromiumDev(07-23 17:27 UTC)转评,官网好评墙收了十几条
  • 查实 YouTube 达人:Better Stack 5.33 万播放(08-02)、OrcDev 1.57 万(07-24)、RoboNuggets 5.2k、Codedigipt 3.7k 等
  • 查实 LinkedIn 和西语圈转发:midudev 07-23、Nader Dabit 07-27、TOOOLS.design 周报等几十条帖子
  • 查实 技术媒体:Flavio Copes 拆解长文(07-28)、InfoQ 新闻(09-24)、daily.dev、bestofjs
  • 查实 平台事件 / 官方背书:Chrome 157 稳定版博客(10-26)把 CanvasUI 和 Three.js、Babylon、PixiJS 并列;10 月下旬星数有小波峰
  • 推断 HN:Show 帖只拿到 2 分,不是来源
  • 推断 shadcn registry + MCP + SEO:README 写了 MCP ready,提交记录里有多次 seo update;具体带来多少流量未核实

Canvas UI(DavidHDev/canvas-ui)研究报告

研究日期 2026-11-06。渠道:GitHub。数据来源:我们的 github 库(repo_profile / repo_day)、GitHub API、canvasui.dev、InfoQ、Chrome for Developers 博客、HN Algolia、YouTube Data API、Exa / Jina 搜索。

一句话

React Bits(5.1 万星)的作者 David Haz 做的第一个 HTML-in-Canvas 组件库:把真实、可交互的 DOM 当作 WebGL/WebGPU 纹理,在上面跑液体、火焰、玻璃、ASCII、碎裂等着色器特效,用 shadcn registry 一行命令装进 React / Vue / Svelte / Solid / Preact / vanilla。免费(MIT + Commons Clause)。

结论:它跑出来,是「作者现成的大分发盘」叠上「一个刚出来的浏览器 API 正好空着生态位」。 在 Chrome 的 HTML-in-Canvas 还在 origin trial 的时候,它抢先把这个 API 包装成拿来就用的组件库,成了这个 API 的事实标准展示品。之后 Chrome 官方在稳定版发布博客里把它和 Three.js / Babylon / PixiJS 并列推荐,给它又背了一次书。星数靠的是作者原有的受众和发布当天的 X 声量,不是买量。

1. 增长数据

日期star说明来源
2026-07-160建库(first commit)GitHub API
2026-07-21—「Canvas UI 1.0」整包提交GitHub commits
2026-07-23—正式发布:X 发布帖、React Bits 仓库发 Discussion #1008 公告、HN 投稿(只拿到 2 分)见下文
2026-09-24>4,600InfoQ 报道里写的数infoq.com/news/2026/09/canvas-ui-webgl
2026-10-094,772日涨 2–12github 库 repo_day(deeply)
2026-10-164,96910-14 到 10-16 涨了 +164,原因未核实repo_day(wayback)
2026-10-285,15310-16 到 10-28 涨 +184;期间 Chrome 发了 origin trial 博客(10-22,HN 123 分),10-26 发了 Chrome 157 稳定版博客并点名 CanvasUIrepo_day(census)
2026-11-025,272单日 +92(观测期内的最大值),11-03 +34,之后回到每天约 10repo_day(snap)
2026-11-065,337近 7 天 +169;fork 273(fork/star 5.1%)repo_profile
  • 发布后两个月内拿到 4,600 星以上,约占现在总数的 86%。典型的发布脉冲,后面是长尾,中间被 Chrome 的平台事件推了几次小波峰。
  • 提交节奏在放缓:7 月底到 8 月中密集(8-14 单日 39 个提交),9 月只有零星几个,最后一次推送是 10-03。组件数从发布时的约 24–33 个涨到 35 个。
  • 没有 suspect 标记;fork/star 比约 5%,在 UI 组件库里算正常(这类库大家多是复制代码,不怎么 fork),看不出刷星。

2. 竞品

竞品在哪上线规模和 Canvas UI 的区别
React Bits / Vue Bits / Svelte Bits(同一作者)开源 + 网页2024-08 / 2025-0751.3k / 4.6k / 0.4k 星;另有付费的 React Bits Pro直接给 DOM 做动画;Canvas UI 把整页 DOM 当成着色器输入,是作者自己开的新品类,不和它抢
Magic UI开源2023-0623.1k 星用 CSS/Framer Motion 做动画组件,没有把真实 DOM 喂进 GPU 着色器
Aceternity UI网页(部分付费)2023未核实同上,做落地页特效,不用 HTML-in-Canvas
Motion Primitives开源2024-076.9k 星动效原语,不用 WebGL
Paper Shaders开源(npm)2024-103.9k 星零依赖的 canvas 着色器,但只能放在内容背后或四周当背景,不能扭曲真实页面(InfoQ 的对比)
Three.js HTMLTexture / Babylon HtmlTexture / PixiJS HTMLSource / PlayCanvas开源引擎功能2026 年随 origin trial 陆续加上引擎本身都很大只给底层接口,要自己写 3D 场景和着色器;Canvas UI 是开箱即用的成品组件,包好了降级
Chrome DevRel 的官方 demo(GoogleChromeLabs awesome-html-in-canvas、chrome.dev/html-in-canvas)大厂示例2026-05仓库 180 星;HN 67 分只是演示,不是能装进项目的库
零散的 HTML-in-Canvas demo 仓库(remotion-dev/html-in-canvas、fimbox/html-in-canvas、jeantimex/glass-effect-webgpu、felixturner/html-in-canvas-cracks)开源2026-04 至 05都在 200 星以下一个仓库只做一个效果,没有多框架分发,也没有 registry
html2canvas / dom-to-image开源多年前很大截的是死位图,文字没法选、链接点不了;Canvas UI 的卖点正好是页面保持可交互

格局:在我们的 github 库里搜 html-in-canvas 相关的库,Canvas UI 5,337 星,第二名是 WICG 规范仓库本身(4,088 星),再往下的组件或 demo 都在 200 星以下。它在这个新 API 的「组件库」位置上基本没有对手。

3. 增长手段(用户从哪来)

  1. 作者现成的分发盘(已确认):React Bits 5.1 万星,官网流量大。发布当天在 react-bits 仓库发了置顶公告(Discussion #1008,2026-07-23,标题「The First Ever html-in-canvas Component Library」)。作者的 GitHub 有 3,272 个关注者,还有 X 账号 @davidhaz 和 Instagram @david.webdev。
  2. X 上发布当天的声量(已确认):作者的发布帖发在 2026-07-23 约 09:30 UTC(帖子 2080224101432447094)。同一天 shadcn 转评「One of the most impressive registries I've seen」(11:53 UTC),Chrome for Developers 官方号也转评「Great to see HTML-in-Canvas already empowering new frameworks」(17:27 UTC)。官网首页把这一圈好评(shadcn、ChromiumDev 等十几条)做成了社会证明墙。
  3. YouTube / 达人的二次传播(已确认):OrcDev「The Biggest Web UI Breakthrough in Years」(7-24,1.57 万播放)、Better Stack「This component library is mind-blowing (Canvas UI)」(8-02,5.33 万)、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「New browser update lets you set things on FIRE」(8-13,6.7 万),讲的是这个 API,有没有提到 Canvas UI 未核实。
  4. LinkedIn 和西语、越南语圈的转发(已确认):midudev(西语前端大号)7-23 当天就发了,Nader Dabit 7-27 发了「Blown away…」,还有 TOOOLS.design 周报、Adham Dannaway 等几十条帖子。
  5. 技术媒体(已确认):Flavio Copes 写了拆解长文(7-28),InfoQ 发了新闻(9-24),daily.dev 收录,bestofjs 收录。
  6. 平台事件 / 官方背书(已确认):Chrome 157 把 HTML-in-Canvas 发进稳定版,官方博客(2026-10-26)的「Framework and ecosystem support」一节把 CanvasUI 和 Three.js、PlayCanvas、Babylon.js、PixiJS 并列。之后日语、俄语、西语都有一波 Chrome 157 的介绍文章和视频(Habr 10-30、たもたも子 11-03 等)。10 月下旬的星数小波峰和这个时间吻合,但没有逐日的点击归因。
  7. HN 不是来源(已确认):发布当天的 Show 帖「CanvasUI: HTML-in-Canvas Component Library」只拿到 2 分。HN 上讨论的都是 API 本身(HTML-in-Canvas Demos 67 分,origin trial 博客 123 分)。
  8. SEO 和 AI 入口:shadcn registry 加上 MCP(让 AI 助手直接搜索、安装组件),README 里写了「MCP ready」,官网提交记录里有好几次「seo update」。11-01 到 11-06 出现一批内容农场站(lcua.org、cfirehose.org、uvuu.org 等)在洗稿「Canvas UI: 35 HTML-in-Canvas Components…」,是别人蹭它的关键词,不是它自己投的。
  9. 没发现付费买量:产品本身免费,没有付费墙,没查到广告。

11-02 单日 +92 的来源未核实:时间和 Chrome 157 稳定版铺开后的二次传播、内容农场文章扎堆的时间重合,但没找到某一个具体的大号帖子。

4. 钱怎么回来

Canvas UI 本身「Free forever」,License 是 MIT + Commons Clause,允许商用、不许转卖组件。钱来自同一作者的 React Bits Pro:一次性付费 $129 / $249 / $349,年付 $79 起。TrustMRR 公开了它的收入,搜索摘要显示「React Bits Pro - $57,555 last 30 days」,创始人页面累计 $279,914(日期未核实)。Canvas UI 的作用是给作者的品牌和受众池加分、给 Pro 引流(作者 X 主页置顶的就是 React Bits Pro),它自己不直接变现。

5. 为什么能跑出来

  1. 时机:一个新浏览器 API 刚出来,生态位还空着。HTML-in-Canvas 2026-05 在 Google I/O 前后进 origin trial,Chrome DevRel 的 demo 在 HN 上很火,但市面上只有零散 demo 和引擎的底层接口。Canvas UI 7-23 作为「第一个 html-in-canvas 组件库」发布,把这个名头占住了。
  2. 作者的分发盘:React Bits 积累的五万多星的受众、shadcn 生态的人脉,让 shadcn 本人和 Chrome 官方号在发布当天就来转评。
  3. 产品本身的 demo 冲击力强:整页 DOM 在火焰、液体、玻璃下扭曲,链接还能点。这种「视觉奇观」天然适合短视频和 X 传播,一堆 YouTube 标题都在用「mind-blowing」「Biggest Breakthrough」。
  4. 用起来门槛低:npx shadcn add @canvas-ui/xxx-react 一行装好,源码直接进项目;6 个框架,每个都有 WebGL 和 WebGPU 两种构建;不支持的浏览器自动降级成 GPU 覆盖层;还接了 MCP,AI 写代码时能直接调。
  5. 官方背书:Chrome 157 稳定版博客点名推荐,让它从「实验玩具」变成「官方提到的生态库」。

6. 差异化

  • 核心差异:它是唯一一个把「页面本身」当着色器输入的组件库。Magic UI、Aceternity、React Bits 动的是 DOM;Paper Shaders 只能做背景;Three.js 这些引擎只给底层接口。InfoQ 原话:「Canvas UI is the only option using the page itself as shader input」。
  • 次要差异:6 个框架 × 2 种渲染器全覆盖、shadcn registry 分发、MCP、优雅降级。
  • 差异是不是它跑出来的原因?是,但要和分发叠在一起看。「真实 DOM + 着色器」这个新奇点让 demo 有了传播力;但第一批声量来自 React Bits 作者的身份和 shadcn、Chrome 的转评。换一个没有受众的人做同样的东西,大概只能拿到 HN 上那 2 分。另外这个差异建立在 Chrome 专有(Safari、Firefox 还没实现)的 API 上,护城河靠先发和品牌,技术本身不难复制。

7. 曝光度

已经被广泛讨论:InfoQ 报道过,Chrome 官方博客点了名,shadcn 和 ChromiumDev 转评过,YouTube 有 5 万播放级别的视频。作者主业 React Bits Pro 的收入在 TrustMRR 上公开。这不是没人知道的东西。

8. 跟风者

没发现像样的跟风组件库:在我们的 github 库里,html-in-canvas 方向其它库都在 200 星以下,而且大多是在它之前就有的单效果 demo。周边已经有人借它的名字做东西:

  • Chrome 扩展「Canvas UI Anywhere」,开发者署名 AI Mindset,第三方,0.1.0 版,2026-10-13 更新,能把 canvasui.dev 的 playground 套到任意网页上;
  • 内容农场站批量洗稿做 SEO。

9. 可借鉴

  • 踩准新平台 API 的空窗期:浏览器、OS 的新 API 进 origin trial 或 beta 时,第一个把它包成「拿来就用」的成品(组件、模板、库)的人,会被平台方顺手当成案例推广(这里是 Chrome 稳定版博客点名)。
  • 用免费的旗舰项目给付费主线攒受众:Canvas UI 免费,给作者的 React Bits Pro 积累品牌和流量。
  • 做 demo 先行的视觉奇观:产品就是演示,天然适合短视频和 X 传播;官网直接放达人好评墙当社会证明。
  • shadcn registry + MCP 分发:组件直接进用户代码库和 AI 编程助手的工作流,降低试用门槛。
  • License 用 MIT + Commons Clause:允许商用,防转卖。

10. 还不确定的

  • 10-14 到 10-16 的 +164 和 11-02 的 +92 具体是谁带来的,没找到对应的帖子;
  • 作者 X 发布帖的浏览量、点赞数(x-radar 本地语料没收录);
  • Canvas UI 实际被多少生产站点使用(registry 安装量不公开);
  • TrustMRR 上 React Bits Pro 收入数字的抓取日期,以及 Canvas UI 给 Pro 带了多少转化;
  • 维护在放缓(10-03 之后没提交),Safari、Firefox 何时支持这个 API 会决定它能不能从「炫技」变成「常用」。

出处

文章由 AI 根据公开数据和我们每天采集的数据写成,数字带出处,推断已标明