开源画布编辑器 GridaFigma 设计稿直接粘贴进来还能连数据库建表单【免费下载链接】gridaGrida — Open Canvas项目地址: https://gitcode.com/gh_mirrors/gr/gridaGrida 是一个开源画布编辑器核心图形引擎用 Rust Skia 写成、编译成 WASM 在浏览器里跑同一套引擎还能在 Node.js 里无头渲染。它不只是画布还带 SVG 编辑器、数据库/CMS 和表单构建器。它解决什么问题两个很具体的场景设计稿躺在 Figma 里但你要做的是画布 真实数据的内容页或采集页——设计工具碰不了数据纯代码又要从零搭来回切换就是反复返工。你手里有一批 SVG 文件只想改其中一处可多数工具一保存就把整个文件重写diff 一片混乱。Grida 的思路是把画布、SVG、数据库、表单放进同一套工具画布文档存成.grida文件基于 FlatBuffers 的二进制格式面向大文档设计数据直接对接 SupabaseSVG 编辑则按字节级回写。核心能力一览从 Figma 复制节点粘贴成画布原生图层这是主力功能值得多说两句。在 Figma 里选中图层复制到 Grida 画布里直接粘贴编辑器自动识别 Figma 剪贴板格式并转成原生节点层级结构、填充含四种渐变、描边、阴影/模糊效果、文字样式和矢量路径都会保留。注意一点这条通路依赖 Figma 的内部剪贴板格式不是公开 APIFigma 大版本更新后可能暂时失效官方文档里明确写了这一点。场景把 Figma 里的整页设计搬进 Grida接着把某些区块换成数据驱动的内容导出多页 PDF 交付。SVG 编辑器只改一处diff 就只有那一处Grida 的 SVG 编辑器主打往返保真没改动任何内容时保存后的文件与原文件字节一致编辑器不在文件里留下自己的痕迹改了一处diff 里就只显示那一处。它还带 AI 聊天人和 AI 可以编辑同一批文件。场景CI 流程或 AI 批量修改 SVG 资源后用编辑器复核diff 干净到能直接审查。连接 Supabase在编辑器里管数据连上你的 Supabase 项目后表、视图、存储、Auth 都能在界面里操作筛选、排序、全文搜索、CSV 导出数据可以切成列表、图库或图表视图看还能从数据表直接生成表单管理界面。30 输入控件的表单构建器内置文件上传、手写签名、富文本、短信验证等 30 多种输入控件支持逻辑块、计算字段、隐藏字段、实时同步和部分提交内置 12 种界面语言还支持 headless 方式纯 API 使用。场景用它替代 Google Forms 这类表单工具提交结果直接落进 Supabase 表省掉一个中间环节。谁在什么情况下用它设计师/前端Figma 里存了大量设计稿需要一块能编辑、能接数据的画布——复制粘贴过去继续做不用重画。独立开发者想做一个带数据的内容页或带收集表单的产品又不想自己搭一整套后端——画布、表单、数据三件套开箱就在一个仓库里。管理大量 SVG 的团队需要一个改动可审查的 SVG 编辑器diff 只反映真实变化方便人和 AI 协作改文件。5 分钟上手路径把代码拉到本地git clone https://gitcode.com/gh_mirrors/gr/grida确认环境Node.js 24 和 pnpm 11在仓库根目录运行pnpm install运行pnpm dev启动本地开发环境单独起编辑器用pnpm dev:editor打开画布从 Figma 复制任意节点粘贴进来确认样式还原适合谁不适合谁它适合画布 数据 表单要一起用的场景也适合开发者单独取用底层能力——渲染引擎、SVG 解析、撤销/重做、树视图等都被拆成独立的 npm 包发布可以各取所需。但它不是 Figma 的替代品官方自己的定位也是 50/50目前是设计工具的地基组件/实例模型还在路线图上也不是 Notion 那种文档系统。一句话总结如果你需要一块能接数据、能收表单、Figma 稿子直接能粘进来的开源画布Grida 是目前能找到的完整答案之一。代码仓库https://gitcode.com/gh_mirrors/gr/grida 克隆下来pnpm dev就能跑。【免费下载链接】gridaGrida — Open Canvas项目地址: https://gitcode.com/gh_mirrors/gr/grida创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 开源画布编辑器 Grida：Figma 设计稿直接粘贴进来，还能连数据库建表单
开源画布编辑器 GridaFigma 设计稿直接粘贴进来还能连数据库建表单【免费下载链接】gridaGrida — Open Canvas项目地址: https://gitcode.com/gh_mirrors/gr/gridaGrida 是一个开源画布编辑器核心图形引擎用 Rust Skia 写成、编译成 WASM 在浏览器里跑同一套引擎还能在 Node.js 里无头渲染。它不只是画布还带 SVG 编辑器、数据库/CMS 和表单构建器。它解决什么问题两个很具体的场景设计稿躺在 Figma 里但你要做的是画布 真实数据的内容页或采集页——设计工具碰不了数据纯代码又要从零搭来回切换就是反复返工。你手里有一批 SVG 文件只想改其中一处可多数工具一保存就把整个文件重写diff 一片混乱。Grida 的思路是把画布、SVG、数据库、表单放进同一套工具画布文档存成.grida文件基于 FlatBuffers 的二进制格式面向大文档设计数据直接对接 SupabaseSVG 编辑则按字节级回写。核心能力一览从 Figma 复制节点粘贴成画布原生图层这是主力功能值得多说两句。在 Figma 里选中图层复制到 Grida 画布里直接粘贴编辑器自动识别 Figma 剪贴板格式并转成原生节点层级结构、填充含四种渐变、描边、阴影/模糊效果、文字样式和矢量路径都会保留。注意一点这条通路依赖 Figma 的内部剪贴板格式不是公开 APIFigma 大版本更新后可能暂时失效官方文档里明确写了这一点。场景把 Figma 里的整页设计搬进 Grida接着把某些区块换成数据驱动的内容导出多页 PDF 交付。SVG 编辑器只改一处diff 就只有那一处Grida 的 SVG 编辑器主打往返保真没改动任何内容时保存后的文件与原文件字节一致编辑器不在文件里留下自己的痕迹改了一处diff 里就只显示那一处。它还带 AI 聊天人和 AI 可以编辑同一批文件。场景CI 流程或 AI 批量修改 SVG 资源后用编辑器复核diff 干净到能直接审查。连接 Supabase在编辑器里管数据连上你的 Supabase 项目后表、视图、存储、Auth 都能在界面里操作筛选、排序、全文搜索、CSV 导出数据可以切成列表、图库或图表视图看还能从数据表直接生成表单管理界面。30 输入控件的表单构建器内置文件上传、手写签名、富文本、短信验证等 30 多种输入控件支持逻辑块、计算字段、隐藏字段、实时同步和部分提交内置 12 种界面语言还支持 headless 方式纯 API 使用。场景用它替代 Google Forms 这类表单工具提交结果直接落进 Supabase 表省掉一个中间环节。谁在什么情况下用它设计师/前端Figma 里存了大量设计稿需要一块能编辑、能接数据的画布——复制粘贴过去继续做不用重画。独立开发者想做一个带数据的内容页或带收集表单的产品又不想自己搭一整套后端——画布、表单、数据三件套开箱就在一个仓库里。管理大量 SVG 的团队需要一个改动可审查的 SVG 编辑器diff 只反映真实变化方便人和 AI 协作改文件。5 分钟上手路径把代码拉到本地git clone https://gitcode.com/gh_mirrors/gr/grida确认环境Node.js 24 和 pnpm 11在仓库根目录运行pnpm install运行pnpm dev启动本地开发环境单独起编辑器用pnpm dev:editor打开画布从 Figma 复制任意节点粘贴进来确认样式还原适合谁不适合谁它适合画布 数据 表单要一起用的场景也适合开发者单独取用底层能力——渲染引擎、SVG 解析、撤销/重做、树视图等都被拆成独立的 npm 包发布可以各取所需。但它不是 Figma 的替代品官方自己的定位也是 50/50目前是设计工具的地基组件/实例模型还在路线图上也不是 Notion 那种文档系统。一句话总结如果你需要一块能接数据、能收表单、Figma 稿子直接能粘进来的开源画布Grida 是目前能找到的完整答案之一。代码仓库https://gitcode.com/gh_mirrors/gr/grida 克隆下来pnpm dev就能跑。【免费下载链接】gridaGrida — Open Canvas项目地址: https://gitcode.com/gh_mirrors/gr/grida创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考