HeyForm 开源表单构建器上手指南

HeyForm 开源表单构建器上手指南

【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyform

自己搭表单收集功能，每次都要手写字段校验、条件跳转、主题样式和 CSV 导出，改一处字段结构，渲染层、校验层、导出层得跟着改三遍；没有防刷机制时，表单页很快会变成垃圾数据的收件箱。HeyForm 是一个可自托管的开源表单构建器（Form Builder）。先带你在本地把最小服务跑起来，再逐个拆解五个核心能力。

项目全景

HeyForm 是一个 monorepo（多包单仓），由 7 个包组成：server 是 NestJS + GraphQL 后端，webapp 是 React + Vite 前端，form-renderer 是独立渲染库。架构思想是把「表单定义」和「表单渲染」解耦，同一份 schema 被编辑器预览、公开表单页和第三方网站嵌入三处复用，只换外壳。它面向的是想给自己的产品自建表单构建器的开发者，而不是依赖 SaaS 的团队。

🚀 上手路径

环境上你需要 Node ≥ 20 和 pnpm ≥ 8，后端还要 MongoDB 与 Redis（KeyDB 兼容），仓库自带 docker-compose.test.yml，一条命令能拉起 Mongo 4.4 和 KeyDB，顺带处理了上传目录的卷挂载。

安装命令负责克隆仓库并安装 workspace 依赖，注意 postinstall 会自动挂上 pre-commit 钩子：

git clone https://gitcode.com/GitHub_Trending/he/heyform cd heyform && pnpm install

服务端启动前要把必填环境变量写进 .env，其中 SESSION_KEY 与 FORM_ENCRYPTION_KEY 是启动硬依赖，其余项可对照 docker-compose.test.yml 里的默认值：

SESSION_KEY=your-session-key FORM_ENCRYPTION_KEY=your-encryption-key MONGO_URI=mongodb://127.0.0.1:27017/heyform REDIS_HOST=127.0.0.1 REDIS_PORT=6379

运行入口是根目录一条pnpm dev，它会并发启动 webapp 与 server，服务端默认监听 9157 端口，访问 /health/ready 确认就绪；想直接体验 Docker 部署形态，改用docker compose -f docker-compose.test.yml up构建即可。

🧩 核心能力拆解

这五个能力都是 monorepo 内的独立模块，无需额外安装依赖，每一块都能在下文指到具体源码目录。

多表单嵌入：一个 div 挂进任意页面

嵌入组件——不改宿主页代码，四种方式挂表单

embed 包扫描页面上所有带 contenteditable="false">【免费下载链接】heyformOpen-Source Form Builder项目地址: https://gitcode.com/GitHub_Trending/he/heyform