这里是按照「分类」阅读往期的 HelloGitHub 月刊内容, 您目前在查看 HelloGitHub JavaScript 项目 集合。
3D 地理空间的 JavaScript 库。该项目是用于在 Web 网页中创建交互式 3D 地球和 2D 地图的 JavaScript 库,它利用了 WebGL 技术来加速图形处理,具备较好的渲染速度,可处理海量数据和动态数据可视化,支持地形和三维瓦片(3D Tiles)等多种数据格式,适用于构建地理信息系统(GIS)等 Web 应用。
import { Viewer } from "cesium"; import "cesium/Build/Cesium/Widgets/widgets.css"; const viewer = new Viewer("cesiumContainer");

自动兼容错误 JSON 格式的 JavaScript 库。这是一个用于修复/解析多种错误 JSON 格式的 JavaScript 库,与 JSON.parse() 遇到格式错误直接抛出异常不同。它可以自动处理常见的 JSON 格式问题,如键名缺失引号、单引号代替双引号、尾部多余逗号、缺失逗号和换行符不规范等。
import { jsonrepair } from 'jsonrepair' try { // The following is invalid JSON: is consists of JSON contents copied from // a JavaScript code base, where the keys are missing double quotes, // and strings are using single quotes: const json = "{name: 'John'}" const repaired = jsonrepair(json) console.log(repaired) // '{"name": "John"}' } catch (err) { console.error(err) }
炫酷 3D 球体年会抽奖应用。这是一个基于 Three.js 和 Vue.js 构建的年会抽奖工具,支持导入人员名单、设置奖品/奖项、播放背景音乐、临时抽奖等功能。

免费开源的屏幕录制工具。这是一款免费且开源的屏幕录制工具,可作为 Screen Studio 的轻量级替代品,支持应用录制、修改背景、自定义缩放时长等功能,适用于 Windows 和 macOS 系统。

易扩展的 CSS-in-JS 解决方案。该项目是 Meta 开源的 CSS-in-JS 库,支持在 JavaScript 中定义样式,并在编译时自动优化和提取为独立的 CSS 文件,不仅消除运行时的性能开销,还能彻底避免样式冲突。
import * as stylex from '@stylexjs/stylex'; const styles = stylex.create({ root: { padding: 10, }, element: { backgroundColor: 'red', }, }); const styleProps = stylex.props(styles.root, styles.element);
极简的个人云相册平台。这是一款功能强大的自托管个人相册应用,专为展示与分享个人摄影作品而设计。它提供简洁易用的 Web 界面,可轻松管理和浏览照片,支持 Live Photo 与 Motion Photo 格式,并具备 EXIF 信息解析、地理位置识别和地图探索等功能。

免费炫酷的股票市场应用。这是一款基于 Next.js、TailwindCSS 和 MongoDB 构建的股票市场平台,提供实时行情、图表(K 线图、热力图)、新闻资讯和个性化监控等功能,专注于数据展示与分析,不支持交易。

专为静态网站打造的 CMS。这是一个专为静态网站生成器设计的内容管理系统(CMS),支持 Jekyll、Next.js、VuePress 和 Hugo 等。它提供友好的用户界面,让非技术人员也能轻松编辑和更新网站内容,所有更改将自动转化为 GitHub 上的提交。

免费开源的 Google Drive 替代品。这是一款基于 Node.js 和 MongoDB 构建的云存储平台,提供类似 Google Drive 的文件管理和存储功能,支持 Docker 一键部署。

让 React 状态管理更轻松。这是一款轻量、快速、易扩展的 React 状态管理库,为开发者提供简洁且高效的状态管理体验。它拥有简洁的 API,支持直接定义和使用状态,并通过自定义 Hooks 来管理状态,帮你远离传统状态管理方案的繁琐与陷阱。
import { create } from 'zustand' type Store = { count: number inc: () => void } const useStore = create<Store>()((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })), })) function Counter() { const { count, inc } = useStore() return ( <div> <span>{count}</span> <button onClick={inc}>one up</button> </div> ) }
