2025年度前端最受欢迎项目出炉,和你想的可能有点不一样?

2025年度前端最受欢迎项目出炉,和你想的可能有点不一样?

下面的图表比较了各个项目过去 12 个月在 GitHub 上获得的 star。项目来源于 Best of JS 网站,一个收集了 Web 平台优秀项目的网站。

最受欢迎项目

年度冠军项目: n8n 🏆

n8n 是2025年排行榜的绝对赢家,数据非常惊人:一年内增加了+112,000颗星。自从我们开始发布 Rising Stars 以来,还没有哪个项目在一年内获得如此多的星标。

n8n 是一个公平代码的工作流自动化平台,具有原生AI功能,允许您通过可视化工作流连接各种应用程序和服务。它的成功反映了对无代码自动化工具日益增长的需求,现在通过AI集成得到增强,以支持新兴的基于代理的工作流。

在工作流自动化领域,您可能对2025年创建的以下两个项目感兴趣:

Motia(总体排名第17)
workflow
另外三个与AI相关的项目进入TOP 10:

Onlook:为React应用带来AI优先的可视化编辑
Dyad:一个免费的、本地的、开源的AI应用构建器,是v0/lovable/Bolt的替代品
Stagehand:带来AI驱动的浏览器自动化

在这里插入图片描述
第2名: react-bits🥈

React Bits 是一个React的精美动画组件集合(背景效果、文本动画、卡片等),非常适合构建令人难忘的网站。

有趣的是,它作为一个shadcn/ui项目分发,可以通过命令行从shadcn/ui注册表获取,或通过传统的复制粘贴方式添加到您的代码库中。某些组件需要依赖:GSAP 或 motion。

文档附带一个背景工作室,让您调整和自定义所有组件的设置(颜色、速度、粒子数量等),并导出可复制粘贴到代码库中的代码片段。

还有Vue版本:Vue Bits。

在这里插入图片描述
第3名: shadcn-ui🥉

排名第3的是shadcn/ui,2023年和2024年的冠军,继续保持强劲势头。

如果您查看过我们的前几期,您已经知道这是一套用品味和对细节的极大关注制作的一致React组件(无障碍访问、键盘交互等),汇集了最好的无头组件,如Radix UI、TanStack Table等。

它也是一个注册表,使得分发组件的新模式成为可能。 许多项目定义自己为"shadcn/ui"项目,官方注册目录中列出了大约100个项目。

shadcn/ui 最令人惊叹的特点是,在开箱即用的功能和可定制性之间找到了最佳平衡点。

除了新增的组件外,shadcn/ui 不再与 Radix UI 紧密耦合,现在支持 Base UI(在组件库排名中位列第4)

有人批评使用它构建的网站看起来相似;然而,随着新样式的引入和新的创建页面(用于构建自定义主题)的推出,外观自定义能力得到了很大改善。

在这里插入图片描述

前端框架前10名

在这里插入图片描述


React从htmx手中重新夺回了桂冠,htmx在2024年位居该类别榜首。

关于React的年龄以及Solid或Svelte等替代方案是否更适合新项目的争论,因LLM被训练使用React代码库而变得更加复杂,这使得替代方案更难获得势头。参见React是如何默认获胜的。

React 19引入了重大改进,包括Activity API和用于管理用户事件的增强钩子。

说到副作用,发生了一次中断,Cloudflare因为仪表板上的一个useEffect无限调用他们的API而对自己进行了DDoS攻击。

React通过React服务器组件向服务器端转移,标志着近年来最大的变化,但这伴随着巨大的力量和风险,如React2Shell等关键漏洞所示,这是React服务器组件中的一个远程代码执行(RCE)漏洞,需要紧急补丁发布。(2025年12月3日,2025年12月11日)

排名第2的是Ripple,这是TOP 5中的新面孔。这是一个全新的UI框架,结合了React、Solid和Svelte的最佳特性。它具有响应式原语、基于组件的架构和模板语法。

目前处于早期开发阶段。React有Next.js,Vue.js有Nuxt,Svelte有SvelteKit,Solid有SolidStart……Ripple会有自己的元框架来处理服务器端渲染吗?

Svelte连续第三年排名第三。Svelte 5的Runes响应式系统($state, $derived, $effect)已成为建模状态的标准方式。

工具前十名

在这里插入图片描述

AI前10名

在这里插入图片描述

移动端前10名

在这里插入图片描述

Vue 生态

在这里插入图片描述

UI组件库

在这里插入图片描述

桌面端

在这里插入图片描述

静态站点

在这里插入图片描述

Read more

AI 编程新王 Codex 全面上手指南

AI 编程新王 Codex 全面上手指南 一篇文章带你精通 Codex 四大环境 + 免费使用方法 💡 前言:AI 编程的新时代 AI 编程的竞争正进入“第二轮洗牌期”。 过去几个月,Claude Code 一度成为开发者的宠儿,但频繁的限速、封号、降智问题让不少人头疼。 如今,OpenAI 推出的 Codex 迅速崛起,凭借强大的编程能力和超高性价比,成为“AI 编程新王”。 Codex 是什么? 它是基于 GPT-5 模型打造的专用编程环境,支持命令行、VS Code 插件、SDK 集成、云端操作等多种运行模式。 不论你是写脚本、做项目、还是维护仓库,Codex 都能像“AI 结对程序员”一样协助你高效开发。

By Ne0inhk
Obsidian接入AI完整配置指南

Obsidian接入AI完整配置指南

🚀 Obsidian接入AI完整配置指南 📋 目录导航 * 核心工具介绍 * 免费接入方案 * 详细配置步骤 * 模型选择建议 * 实用功能配置 * 使用场景示例 * 常见问题解决 * 高级技巧 🎯 核心工具:Copilot插件 Copilot是Obsidian中最强大的AI助手插件,让你的笔记体验智能化升级! 安装步骤(3步搞定) 1. 打开设置:Obsidian → 设置 → 社区插件 2. 搜索安装:搜索"Copilot"并点击安装 3. 启用重启:启用插件并重启Obsidian 💰 免费AI接入方案:OpenRouter OpenRouter提供多个免费AI模型,是性价比最高的选择! 第一步:注册账号 * 🌐 访问:https://openrouter.ai/ * 🔗 使用GitHub或Google快速注册 * 🔑 在Keys页面生成API密钥 第二步:添加模型配置 模型添加方法: 1. ✅ 模型名称必须正确 2. 🌐 URL同图片地址

By Ne0inhk
AI大模型落地系列:一文读懂 Eino 的 Embedding

AI大模型落地系列:一文读懂 Eino 的 Embedding

Embedding 使用说明 * 有啥用?! * 他能干嘛? * 它不能直接干嘛? * 总结: * 浅用之法 * 食用之法 * 一、最基本用法:直接调用 `EmbedStrings` * 1. 创建 embedder * 2. 调用 `EmbedStrings` * 3. 向量拿来干嘛 * 二、完整demo * 三、带 Option 怎么用 * 四、在编排中怎么用 * 在 Chain 中使用 * 在 Graph 中使用 * 五、带 Callback 怎么用 * 六、真实场景 * 场景:做知识库问答 * 第一步:把知识库切块 * 第二步:给每个 chunk 生成向量 * 第三步:存起来

By Ne0inhk