Logo

TANCN

TANCN is the best & Fastest way to build forms and tables

Build powerful forms and tables with ease using TanStack technologies. Code generation with 100% Type-Safe.

Start BuildingForm Registry
TanCN
×

Fields

Select Field

Elements

Editor

Design form

  • Contact us
    Customize Field
  • Name
    Customize Field
  • Email
    Customize Field
  • Message
    Customize Field
  • I agree to the terms and conditions
    Customize Field
Drag & Drop Builder
Intuitive drag-and-drop interface for building forms quickly. Add, rearrange, and configure form fields with ease.
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.

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.

❤️ Sponsors

Thanks to our generous sponsors for supporting the project.

Shadcnblocks LogoShadcnblocks
Become a Sponsor
Contributors

A big thank you to all the contributors who have helped make this project better.

VING

Development Roadmap

Completed Features

Core Form Builder

Drag-and-drop form builder with real-time preview

Type-Safe Code Generation

Generate fully typed React components with TypeScript

ShadCN UI Integration

Seamless integration with ShadCN UI components

Multi-Step Forms

Support for complex multi-step form workflows

Field Array Support

Dynamic field arrays for complex data structures

Schema Generation

Automatic schema generation for form validation

Table Builder

Drag-and-drop table builder with customizable columns and data

Save & Share

Save and share form configurations

Templates

Pre-built form templates for common use cases

In Progress

Advanced Validation

Custom validation rules and error handling

SolidJS Support

Support for SolidJS

Infinite Scroll Table

Infinite scrolling for large datasets in tables

Planned Features

Auto-Save

Auto-save form configurations

Server Funtion for Form Submission

Server function for form submission

Single Command Code Generation

Single command code generation With ShadCN Registry

React Native Support

Generate React Native forms

AI Feature

AI-powered form and table generation

MCP

Model Context Protocol integration

Frequently Asked Questions

Build powerful forms with ease, generate type-safe code,and integrate seamlessly with your projects.

The drag-and-drop interface lets you easily add, rearrange, and configure form fields. Simply drag components from the library onto your canvas, customize their properties, and see changes in real-time preview.
It generates fully typed React components with TypeScript support, including automatic schema generation for form validation using libraries like Zod, Valibot, or ArkType. The code is ready to use in your projects.
We support Zod, Valibot, and ArkType for schema validation. You can choose your preferred validation library when generating form code, ensuring compatibility with your existing setup.
The Table Builder is a drag-and-drop interface for creating dynamic, type-safe tables. It allows you to define columns, apply filters, sort data, and generate performant table components with TanStack Table.
Similar to the form builder, you can drag and drop column types, configure sorting and filtering options, and customize table appearance. The builder generates code for tables that integrate seamlessly with your data sources.
It supports advanced filtering, sorting, pagination, column resizing, and data export. You can create tables with virtual scrolling for large datasets and customize them with ShadCN UI components.
Build forms and tables in minutes, not hours.
Drag, drop, and generate type-safe code instantly with TanStack power.
Start Building
No login required. Free to use. Open source.