https://github.com/vijayabaskar56/tan-builder
Tanstack Builder for Form and Table
https://github.com/vijayabaskar56/tan-builder
angularjs form-builder react solidjs tanstack tanstack-form vuejs
Last synced: 4 months ago
JSON representation
Tanstack Builder for Form and Table
- Host: GitHub
- URL: https://github.com/vijayabaskar56/tan-builder
- Owner: Vijayabaskar56
- License: mit
- Created: 2025-08-03T08:15:01.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-10-07T18:53:47.000Z (4 months ago)
- Last Synced: 2025-10-07T20:31:45.555Z (4 months ago)
- Topics: angularjs, form-builder, react, solidjs, tanstack, tanstack-form, vuejs
- Language: TypeScript
- Homepage: https://tan-form-builder.baskar.dev/
- Size: 9.61 MB
- Stars: 198
- Watchers: 0
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# TanStack Form Builder
A powerful form builder application built with TanStack technologies. Create dynamic, type-safe forms with drag-and-drop interface, real-time preview, and automatic code generation.
## Features
### 🖱️ Drag & Drop Builder
Intuitive drag-and-drop interface for building forms quickly. Add, rearrange, and configure form fields 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 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.
### 💾 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:
```bash
git clone
cd tanstack-form-builder
```
2. Install dependencies:
```bash
bun install
```
3. Start the development server:
```bash
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](https://formcn.dev) and is inspired by:
- [tweekcn](https://tweakcn.com/) - Component library and design system
- [formcn](https://formcn.dev) - Form building tools and utilities
- [originui](https://originui.com) - UI component library and design patterns
- [better-t-stack](https://better-t-stack.dev/) - 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](LICENSE) file for details.