About tancn

Tanstack Builder for Form and Table

v

Published by

README.md

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.

tancn