整理了 15 个值得收藏的前端开源项目。涵盖 UI 设计工具 draw-a-ui、Web3D 引擎 Orillusion、视频制作库 FFCreator、组件库 shadcn-ui 与 tiny-vue、海报设计器 poster-design、在线白板 excalidraw、动画库 Flutter Zerker、调试工具 page-spy-web、学习资源 50projects50days、微前端方案 hel 与 micro-app、状态管理 limu、代码编辑器 code-run 以及后台模板 koi-ui。这些项目涉及 React、Vue、Node.js、Flutter 等技术栈，适合不同场景下的开发需求，能有效提升开发效率与体验。
新的一年，前端领域再次掀起波澜壮阔的变革。开源世界日新月异，每天都有新奇的惊喜涌现。我们精心整理了 15 个令人眼前一亮的开源项目，涵盖了前端技术的各个层面。
draw-a-ui 巧妙地结合了 tldraw 这一开源数字画板和 GPT-4-Vision API，用户只需通过 tldraw 绘制线框图并添加标注，应用便能生成令人惊艳的基于 HTML 的 UI 设计。其背后的技术原理是将当前画布的 SVG 图形转换为 PNG 格式，并通过 GPT-4-Vision API 生成带有 tailwind 的 HTML 文件。这一创新流程展示了 AI 人工智能工具 GPT 的强大能力，为用户提供了更加自由和灵活的 UI 设计体验。
Orillusion 是一个高性能的 Web3D 渲染引擎，基于 WebGPU 图形 API，具备与 PC 端图形 API 相当的渲染能力。它充分利用了 GPU 的开放能力，如灵活的 GPU 缓存操作、强大的着色器（Webgpu Shader/WGSL）以及备受关注的 Compute Shader 计算内核，从而充分发挥了 GPU 在非光栅化阶段的并行处理能力，为用户带来卓越的渲染效果。
FFCreator 是一个基于 node.js 的轻量、灵活的视频制作工具库。它让每个人都能轻松制作视频。只需几张图片或视频片段，加上一段背景音乐，即可迅速生成炫酷的视频短片。在短视频日益流行的今天，FFCreator 为解决用户快速生产短视频或平台批量合成视频提供了简单高效的解决方案。它依赖少、配置低，轻松上手，让视频制作变得简单又快捷。
shadcn-ui，基于 React 构建的 UI 组件库，利用 TailwindCSS 实现样式自定义。它建立在 Radix 之上，提供无头组件，解决可访问性和键盘交互问题。与 MUI、ChakraUI 等库不同，shadcn-ui 并非传统的 NPM 包。通过终端命令，您可轻松集成 shadcn-ui 组件，安装依赖并直接复制源代码进行修改。
shadcn-ui 的几大核心功能包括：
开源的 web 海报设计器美观且功能强大，适用于多种设计场景。它操作流畅，支持丰富的交互细节和完善的基础功能。服务端生成确保图片多端统一，支持 CSS 特性。简易 AI 抠图工具一键去背景。采用 Vue3 等技术栈，开发体验顺畅。支持 PSD 解析、元素操作、图片素材编辑和画布自定义。一站式解决设计需求，提升效率。
一款免费、开源的在线工具，以无限画布为核心特点，让用户可以在虚拟空间内自由挥洒创意。其手绘风格的功能，使得每一笔、每一划都充满艺术气息。应用支持包括中文在内的多种语言，满足了全球用户的需求。在功能上，它提供了丰富的绘图工具，让用户能够根据个人喜好和需求进行自由绘制。此外，用户还可以将作品导出为 PNG 格式，方便分享和保存。实时协作和共享链接功能则让多人可以在同一画布上共同创作，加强了团队合作的效率和便捷性。
Zerker 是一个灵活且轻量级的 Flutter Canvas 图形动画库。借助 Zerker，您可以创建许多看似繁琐的动画效果，如点赞动画、弹出动画、场景过渡、图标效果等。同时，您还可以使用 Zerker 创建许多简单的游戏。Zerker 包含诸如精灵、滚动背景和图集等元素，使您能够轻松地使用它们创建游戏世界。
PageSpy，由货拉拉公司开源，是一款专为远程 Web 项目调试而设计的工具。它通过封装原生 API，实现了对调用原生方法时参数的智能过滤和转化，进而生成格式规范的消息，以供调试端使用。当调试端接收到这些消息数据时，它能够以类似控制台的可交互式功能界面形式，直观地展示这些数据，从而极大地提升了开发人员在远程 Web 项目调试过程中的效率和便捷性。
这个集合包含 50 个精致的前端小项目，全部采用 HTML、CSS 和 JavaScript 编写。每个项目都附带了网页源码和效果展示，为初学者提供了宝贵的实践机会，同时也是经验丰富的前端开发者的灵感之源。浏览这些项目的效果，新手能够深刻体验到前端技术的魅力，而简洁明了的源码则大大降低了编写代码的门槛。
Hel 提供了一种运行时引入远程模块的能力，模块部署在 CDN，远程模块发布后，不需要重新构建发布，就能生效。hel 所引入的远程模块，可以作为微模块，为传统的页面级别微前端提供了补充。页面级微前端虽然功能强大，但在粒度上有时显得过于粗犷，无法满足所有应用场景的精细需求。在需要更细粒度微前端的情况下，如组件或函数级别的拆分和组合，hel 的远程模块功能便能发挥其独特优势。通过利用 hel 工具，开发者能够更加精确、高效地构建和扩展前端应用，从而提升整体的开发效率和项目质量。
MicroApp，这款由京东前端团队精心打造的微前端框架，以组件化思维为基石，基于类 WebComponent 技术实现微前端的渲染。其设计理念旨在简化上手过程，提高工作效率，为用户带来流畅而便捷的开发体验。MicroApp 具备技术栈无关和业务解绑的特性，可以无缝集成于任何前端框架之中，为用户的前端开发提供强大的支持。
微前端作为一种页面整合方案，其核心在于将庞大复杂的前端应用拆分为多个独立、灵活且可扩展的小型应用。每个小型应用均可独立开发、运行和部署，随后将这些应用巧妙地融合为一个整体。这种架构不仅有助于减少项目间的耦合度，提升项目的扩展性，还使得前端仓库在微前端架构下变得更加小巧和灵活。相较于传统的单一前端仓库模式，微前端架构为前端开发带来了全新的视角和更高的可维护性。
OpenTiny Vue 的突出之处在于其 Renderless 无渲染组件设计，这种架构让一套代码得以兼容 Vue2、Vue3 和 React，同时适用于 PC 和移动端。它支持函数级别的逻辑定制和全模板替换，展现了极高的灵活性和二次开发能力。我们的组件库丰富多样，超过 100 个组件，包括业界常见的以及我们独有的特色组件，如 Split 面板分割器、IpAddress IP 地址输入框、Calendar 日历和 Crop 图片裁切等，满足了各种开发需求。
limu，即 love immutable 的缩写，是专为高效创建和操作不可变对象而设计的。它基于读取时的浅拷贝和写入时的标记修改机制，实现了出色的性能。在各种场景中，limu 的速度通常是 immer 的 2 倍或 20 倍以上，展现出惊人的性能。你可以通过点击在线性能演示来亲自体验这一结果。值得一提的是，limu 在默认情况下不会冻结状态，这使得它在大多数场景中比 immer 更快 10 倍或更多。这一特性使得开发过程更加流畅，提高了开发效率。此外，limu 还非常友好于调试。你可以在任何时候直接查看草稿，而无需担心当前状态的影响。这使得调试过程更加简单和直观。
一个功能强大的代码在线编辑预览工具，它的设计理念与 codepen、jsbin、jsfiddle 等知名平台相似，但更注重用户体验和功能的丰富性。这个工具允许用户在网页上直接编写、运行和预览代码，无需安装任何软件或配置本地环境。无论您是前端开发者、设计师、还是学习编程的学生，这个工具都能满足您的需求。它支持多种编程语言，包括 HTML、CSS、JavaScript 等，让您能够轻松构建网页、测试代码片段或学习新技术。同时，它还提供了实时预览功能，让您在编写代码的同时，即时查看代码的运行效果。
KOI-ADMIN🌻，一款专为企业级中后台管理打造的前沿模板，汇聚了 Vue3、Vite、TypeScript、Pinia（及其持久化插件）、Unocss 与 ElementPlus 等尖端前端技术。相较于市面上流行的后台管理模板，KOI-ADMIN 呈现出更为简洁、高效与易于理解的特点，特别适宜于初学者与小白用户。
此项目不仅具备低学习成本，还配备了详尽的代码注释与丰富的案例，使之成为企业级项目、中小型项目、个人项目乃至毕业设计的理想选择。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
