Complete Lovable CSV importer tutorial: build step by step

This is the complete, step-by-step guide to building a CSV importer in Lovable. Unlike our quick-start posts, this tutorial walks you through each stage so you understand what you're building and can customize it for your needs.

By the end, you'll have a working CSV importer that validates data and saves it directly to your Supabase database.

Time to complete: 15-20 minutes

What you'll build

A contacts management app with:

A table displaying all your contacts
An "Import Contacts" button that opens a modal
A CSV importer that validates names and email addresses
Data flowing directly into your Supabase database
Success and error feedback for your users

Before you start

You'll need:

A Lovable account (free tier works)
A Supabase account (free tier works)
Basic familiarity with Lovable's chat interface

No coding experience required. You'll copy and paste each prompt, and Lovable generates the code for you.

Step 1: Create the base app

Start a new project in Lovable and paste this prompt:

Create a simple contacts management app with:
1. A page that lists contacts in a table
2. Each contact has: name, email, company
3. A header with the app title "Contact Manager"
4. Clean, modern styling with Tailwind CSS

Don't add any data yet - we'll import it from CSV.

What this creates: A clean contacts table with columns for name, email, and company. The table is empty for now - that's intentional. We'll populate it with CSV imports.

After Lovable finishes generating, you should see a simple table layout with your header. If the styling looks different from what you expected, that's fine - Lovable might interpret the design slightly differently each time.

Step 2: Connect Supabase

Before the next prompt, you need to connect your Supabase project.

Follow these steps:

In Lovable, click the Settings icon (gear) in the left sidebar
Go to Integrations
Find Supabase and click Connect
Sign in to your Supabase account when prompted
Select an existing project or create a new one
Wait for the confirmation message in the chat

When connected successfully, you'll see a message in the chat that looks like: "Supabase connected" with a checkmark.

Now paste this prompt to create your database table:

Now that Supabase is connected, create a "contacts" table with these columns:
- id (uuid, auto-generated primary key)
- name (text, required)
- email (text, required)
- company (text, optional)
- created_at (timestamp, auto-generated)

Enable Row Level Security but allow all authenticated users to read and write for now.

What this creates: A database table in Supabase that will store all your imported contacts. The table includes automatic IDs and timestamps so you don't have to manage those yourself.

Step 3: Add the import button

Now let's add a button that will trigger the import modal. Paste this prompt:

Add an "Import Contacts" button in the header next to the app title.

Style it as a secondary button that matches the app design.

When clicked, it should open a modal (for now just show "CSV import coming soon" in the modal).

What this creates: A button in your header that opens a modal window. The modal is a placeholder for now - we'll replace its contents with the actual importer in the next step.

Click the button to make sure the modal opens. If it doesn't open, ask Lovable to fix it by typing: "The modal doesn't open when I click the Import Contacts button. Please fix it."

Step 4: Install ImportCSV

This is where the real work happens. Paste this prompt to add the CSV importer:

Install the @importcsv/react npm package and the zod package.

Replace the placeholder modal content with the CSVImporter component from @importcsv/react.

Configure the importer to accept these columns:
- name (required, string)
- email (required, must be a valid email format)
- company (optional, string)

Use zod for the validation schema.

What this creates: A complete CSV import interface inside your modal. The importer handles:

Drag-and-drop file uploads
Automatic column detection
Column mapping (matching CSV columns to your data structure)
Email validation
Required field checking

Lovable automatically installs the npm packages and generates the React code to use them.

About the packages:

@importcsv/react provides the import interface and handles all the file parsing
zod provides the validation (checking that emails are valid, names aren't empty, etc.)

Step 5: Connect to Supabase

The importer can read files, but it doesn't save data yet. This prompt connects it to your database:

When the CSV import completes successfully:
1. Insert all the validated rows into the "contacts" Supabase table
2. Show a success toast with the number of imported contacts
3. Refresh the contacts table to show the new data
4. Close the import modal

If the insert fails, show an error toast with the message.

What this creates: The connection between your importer and your Supabase database. When users complete an import, the data flows directly into your contacts table.

At this point, you have a working importer. Test it with this sample CSV:

name,email,company
Alice Johnson,alice@example.com,Acme Corp
Bob Smith,bob@example.com,Tech Inc
Carol Williams,carol@example.com,
David Brown,david@example.com,StartupXYZ

Save that as contacts.csv on your computer, then drag it into the importer. You should see the data appear in your contacts table after the import completes.

Step 6: Polish the experience

The importer works, but let's add some finishing touches. Paste this prompt:

Improve the import experience:
1. Show a loading spinner while the import is processing
2. If some rows fail validation, show a summary of how many succeeded vs failed
3. Add a "Cancel" button to close the modal without importing
4. Make sure the modal closes when clicking outside of it

Keep all the existing functionality working.

What this creates: A more polished user experience with proper loading states, error summaries, and easier modal dismissal.

Your CSV importer is now complete and production-ready.

Alternative: all-in-one prompt

If you prefer to skip the step-by-step approach, here's a single prompt that does everything at once. Use this after completing Steps 1 and 2 (creating the base app and connecting Supabase):

Add a complete CSV import feature to my app using the @importcsv/react package.

Install these packages:
- @importcsv/react
- zod

Create an "Import Contacts" button that:
1. Opens a modal with the CSVImporter component
2. Accepts CSV or Excel files
3. Maps columns to: name (required), email (required, valid email), company (optional)
4. Validates all rows before importing
5. On success, inserts data into my "contacts" Supabase table
6. Shows success/error feedback with toasts
7. Refreshes the contact list after import
8. Closes the modal when complete

Use this validation schema:
const contactSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email format'),
  company: z.string().optional()
});

Style everything to match my existing app design.

This prompt produces the same result as Steps 3-6 combined.

Testing your importer

To verify everything works correctly:

Create a test CSV file with the sample data above
Click "Import Contacts" to open the modal
Drag the file into the drop zone
Map your columns if prompted (usually automatic)
Review the preview showing your data
Click Import to complete
Check the table to see your new contacts
Check Supabase to confirm data is in the database

What to look for

The import modal should show a preview of your data before importing
Invalid emails should be flagged (try adding a row with not-an-email to test)
Empty name fields should fail validation
After import, the contacts table should update automatically

Customization ideas

Now that you have a working importer, here are ways to extend it.

Different data types

Change the prompts for your actual use case:

Products: name, price, SKU, category
Inventory: item_name, quantity, warehouse_location
Users: username, email, role, department

Additional validation

Add more rules to the validation prompt:

phone must match a phone number format
price must be a positive number
status must be one of: active, inactive, pending

Custom styling

Ask Lovable to adjust the importer appearance:

Match your brand colors
Change button text
Add a custom header to the modal

Common questions

What if a step doesn't work as expected?

Lovable sometimes generates code differently than expected. If something doesn't work:

Describe the problem in the chat ("The button doesn't do anything when clicked")
Lovable will fix it automatically
If it persists, try rephrasing your original prompt

Can I skip steps?

Steps 1-2 (base app and Supabase connection) are required. Steps 3-6 can be replaced with the all-in-one prompt if you prefer.

How do I add more fields to the importer?

Modify the prompt to include your new fields. For example, to add a phone number:

Update the CSV importer to also accept a "phone" column (optional, string).
Update the Supabase table to include the phone column.

Does this work with Excel files?

Yes. The ImportCSV component accepts both .csv and .xlsx files. Users can upload either format.

What's the maximum file size?

ImportCSV handles files with 10,000+ rows using virtual scrolling. For very large files (50,000+ rows), the import may take longer but should still complete.

My import seems stuck - what do I do?

If the loading spinner runs for more than 30 seconds:

Check your browser console for errors
Verify your Supabase connection is still active
Try a smaller file to isolate the issue

How do I see what data was imported?

The contacts table in your app updates automatically after import. You can also check the Supabase dashboard at supabase.com to see the raw data in your contacts table.

Next steps

You've built a complete CSV importer for your Lovable app. Some ideas for what to do next:

Add authentication so each user sees only their own contacts
Build an export feature so users can download their data
Add search and filtering to the contacts table
Create additional importers for other data types

Ready to add CSV import to your Lovable app? Get started with ImportCSV and follow this tutorial to build your importer in under 15 minutes.