TANCN
A powerful form and table builder application built with TanStack technologies. Create dynamic, type-safe forms and performant, customizable tables with a drag-and-drop interface, real-time preview, and automatic code generation.
Features
🖱️ Drag & Drop Builder
Intuitive drag-and-drop interface for building forms and tables quickly. Add, rearrange, and configure them with ease.
🔒 Type-Safe Code Generation
Generate fully typed React components with TypeScript support. Automatic schema generation for form validation.
🎨 ShadCN UI Integration
Seamlessly integrated with ShadCN UI components. Generate customizable, accessible form and table components out of the box.
📑 Multi-Step & Field Arrays
Create complex multi-step forms and dynamic field arrays. Perfect for advanced form requirements and data structures.
📑 Data-Grid & Advanced Filters
Create complex data-grid tables and powerful filters. Perfect for building complex tables with large datasets.
💾 Save, Share & Export
Save your form configurations, share them with team members, and export generated code for immediate use in your projects.
👁️ Real-time Preview
See your form changes instantly with live preview. Test form behavior and styling as you build.
Installation
- Clone the repository:
git clone <repository-url>
cd tancn
- Install dependencies:
bun install
- Start the development server:
bun run dev:web
The application will be available at http://localhost:3001
Usage
- Navigate to the Form Builder section to start creating forms
- Use the drag-and-drop interface to add and arrange form fields
- Configure validation rules and field properties
- Preview your form in real-time
- Export the generated code for use in your projects
Project Origins
This project was started as a fork of formcn.dev and is inspired by:
- tweakcn - Component library and design system
- formcn - Form building tools and utilities
- originui - UI component library and design patterns
- better-t-stack - modern CLI tool for scaffolding end-to-end type-safe TypeScript projects
Tech Stack
- Frontend: React 19, TypeScript
- Routing: TanStack Router
- Forms: TanStack Form, React Hook Form
- UI: ShadCN UI, Radix UI, Tailwind CSS
- Validation: Zod, Valibot, ArkType
- Build: Vite, Turbo
- Deployment: Cloudflare Pages
Star History
License
This project is licensed under the MIT License - see the LICENSE file for details.