Import CSVInteractive Playground
Configure your CSV importer visually and generate production-ready code
Interactive Playground
Configure your CSV importer, test with sample data, and generate production-ready code you can copy directly into your app.
How It Works
Add columns, set validation rules, and configure transformations using the visual interface
Try your configuration with real CSV files or generate sample data
Switch to the "Code" tab to get Zod schema code with TypeScript types
Paste the generated code into your React/Next.js app
Loading playground...
Next Steps
After generating your code:
- Next.js Integration - Add to Next.js app with API routes
- React Integration - Add to Vite, CRA, or any React setup
- Handling Data - Process imported data and send to your API
- Validation Guide - Advanced validation patterns
- Schema Guide - Deep dive into Zod schemas
Troubleshooting
Generated code doesn't compile
Make sure you have both dependencies installed:
npm install @importcsv/react zodValidation isn't working
- Check that validators are enabled in the "Validation Rules" section
- Test with sample data to see validation in action
- Review the generated Zod schema to ensure validators are included
Transformations not applied
Transformations are shown in the generated code but only execute during import. Test the importer with real data to see transformations in action.
Need help? Check out our integration guides or review the API documentation.