# 策展 · X (Twitter) 🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Akash (@akash_3444) · 平台：X (Twitter) · 日期：2026-06-19

> 原始來源：https://x.com/akash_3444/status/2067618568737562706

## 中文摘要

FormCanvas 透過視覺化介面生成 React 程式碼。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781886718431-sc6hlg9n.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/b6cd146c3248bfd7.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這是一個名為 FormCanvas 的線上表單構建工具，提供視覺化拖曳介面與即時程式碼生成功能。

**核心功能與價值**
Akash 推出的 FormCanvas 是一款專為 React 開發者設計的視覺化表單建構工具，其核心目標在於簡化表單開發流程，並確保產出的程式碼具備生產環境等級的品質。該工具強調「所見即所得」的開發體驗，使用者無需註冊即可直接使用，並能將生成的程式碼直接整合至現有專案中，且不依賴任何 FormCanvas 的執行時期套件。

**技術整合與產出**
FormCanvas 產出的程式碼針對現代 React 生態系進行了最佳化，具備高度的型別安全與驗證能力：
- 支援 React Hook Form 與 @tan_stack Form 兩種主流表單管理方案。
- 內建 Zod 驗證規則，確保資料輸入的正確性。
- 採用 @shadcn ui 元件庫，確保介面風格的一致性與美觀。
- 支援多種欄位類型，包括 Input、Textarea、Select、Radio Group、Checkbox Group、Switch 及 Slider 等。

**操作與開發流程**
使用者可以透過直覺的操作介面完成表單設計：
1. 從左側「Field Types」面板拖曳所需的元件至畫布。
2. 針對每個欄位進行詳細設定，包括標籤（Label）、預留位置（Placeholder）、驗證規則與版面配置。
3. 利用「Presets」功能快速套用「Contact Us」、「Sign Up」、「Bug Report」或「Newsletter」等常見表單模板。
4. 在右側預覽區即時檢視表單樣貌，並切換至「Code」模式複製產出的程式碼。

該專案採用 Next.js（App Router）開發，並使用 @dnd-kit 處理拖曳互動，以及 zustand 管理建構器的狀態。開發者可前往 [FormCanvas 官網](https://formcanvas.dev/) 體驗完整的建構流程。

## 媒體內容

**這是一個名為 FormCanvas 的線上表單構建工具，提供視覺化拖曳介面與即時程式碼生成功能。**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:00）點擊左側「Select」元件並將其拖曳至表單中。
2. （00:05）在「Form Settings」中編輯「Select」元件的標籤（Label）為「Role」，並設定選項（Options）為「Creator」與「Engineer」。
3. （00:22）調整表單元件的排序，將「Role」移至「Subscribe to product updates」上方。
4. （00:33）點擊「Code」按鈕查看並複製產生的 React 程式碼。
5. （00:38）在程式碼檢視模式中切換表單庫選項（TanStack Form / React Hook Form）。
6. （00:49）點擊「Presets」並選擇「Newsletter」模板，確認替換當前表單。

## 標籤

AIGC, 新產品, React, Web, FormCanvas