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

1. Clone the repository:

git clone <repository-url>
cd tancn

2. Install dependencies:

bun install

3. 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

<a href="https://www.star-history.com/#Vijayabaskar56/tancn&type=date&legend=top-left"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Vijayabaskar56/tancn&type=date&theme=dark&legend=top-left" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Vijayabaskar56/tancn&type=date&legend=top-left" /> <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Vijayabaskar56/tancn&type=date&legend=top-left" /> </picture> </a>

License

This project is licensed under the MIT License - see the LICENSE file for details.