Show HN: GolemUI – JavaScript表单的新范式

# GolemUI - 声明式表单引擎 来源: https://golemui.com/ GolemUI ### React + React Hook Form - Schema 序列化（表单为 JSON） - 开箱即用的无障碍、键盘导航、ARIA - i18n 适配器——自带库 \{gui.\} - Schema 序列化（表单为 JSON） - 开箱即用的无障碍、键盘导航、ARIA - i18n 适配器——自带库 ……更多功能（继续往下滚动 ↓） 同一表单，每个框架都能用，渲染代码一并提供。 ### 源代码 开始使用 (https://golemui.com/dx/getting-started/installation/)GitHub ↗ (https://github.com/golemui/golemui) ## 构建表单的**全新范式** 操作下面的表单，看看几行声明式 schema 如何生成一个完全反应式的表单——每一步解锁一项功能，驱动它的代码一并展示。 ## 用 **JSON Schema 生成表单** 每个字段、规则和布局都是纯 JSON——可移植、可存储、框架无关。存储、部署、生成皆可；UI 根据 schema 自动渲染。 ## 你的表单可以**随处运行** 因为 schema 是数据而非代码，表单定义可以到达代码无法触及的地方。大多数表单库离不开代码库，GolemUI schema 可以。 持久化 ### 将表单保存在数据库中 在任何数据存储中保存表单定义。进行版本控制、对比差异、回滚。像处理内容一样处理表单。 部署 ### 通过 CMS 提供表单 营销和运维团队可以发布、更新和 A/B 测试表单——无需部署，无需工单。 生成 ### 用 LLM 生成表单 让模型生成表单 schema，立即渲染。根据提示、文档或数据库列列表自动构建流程。 ## 28 个组件，**功能齐全** 以下是部分组件的展示——真实、无障碍、可主题化，全部由同一 schema 驱动。悬停可暂停滚动，与任意组件交互；点击可查看其文档。 ## 用**可复用模块组合表单** 编写 `gui.*`——一个带类型提示和自动补全的构建器——将字段、验证器和逻辑作为模块复用；集成第三方库和自有组件。 ## 节约 **token 消耗**，轻松通过 **code review** `\{gui.\}` 小到让 AI agent 能干净地输出——小到让你的团队一眼就能审查完。**同一代码，两项工作。** React + React Hook Form 0 token 89 行表单代码 · 用 `cl100k_base` 分词 GolemUI 0 token 52 行 · 同一表单减少 41% 开始使用 AI (https://golemui.com/dx/getting-started/build-with-ai/) ## **开箱即用**的功能 无障碍、国际化、验证、性能——其他库需要你自己处理的繁琐工作，这里在你写第一个字段之前都已搞定。 库体积 0kb gzipped LCP 0ms 最大内容绘制 Lighthouse 0 满分 GolemUIDIY Schema 序列化（表单为 JSON） 无障碍（WCAG 2.1 AA & ARIA） 国际化（i18n） Schema 驱动的验证 +28 个内置组件 ## **你的品牌，你的规则** 选择一个主题，表单即刻换肤。GolemUI 提供合理的默认样式——你的品牌只需覆盖原生 CSS 变量即可叠加，无需重新构建、无需编译、无需胶水代码。可制作完整的自定义主题，或仅调整一个 token。 ## 表单引擎，**完全自由** 点击任意字段的标签即可切换其来源——我们的内置组件、Material、Shoelace，或你自己的组件。因为 GolemUI 是引擎，而非组件集合，每个字段都可以来自任何地方：使用自带的默认组件、引入第三方库、或接入自己的组件。同一表单中可混搭使用。 ### 自带（几乎）一切 ……以及几乎所有其他东西——`middlewares` 可拦截响应式引擎，`itemRenderers` 自定义列表渲染方式，`dependencies` 配置组件内部逻辑。 BYOFWK### 自带框架 React、Angular、Lit 和 Vue 是一等公民——也可从纯 Web 组件驱动引擎，或集成你自己的框架。 BYOCS### 自带组件集 基于同一组件架构构建自己的组件集。我们做到了——并将其命名为 \{gui.\}。 BYOV### 自带验证器 任何标准 schema 验证器都可接入——Zod、Valibot 等等。我们自己的验证器基于 Zod 构建。 BYOi18n### 自带 i18n 通过简单适配器映射任意 i18n 库，并保留其擅长的高级功能。 ## 准备开始构建了吗？ 别再跟表单状态和逻辑较劲了。使用 GolemUI 在几分钟内定义更智能、可序列化的表单。 阅读文档 (https://golemui.com/dx/getting-started/installation/)在 GitHub 上查看 ↗ (https://github.com/golemui/golemui)