Embeddable Importer

The CSV importer you were about to build

Drop one component into your React app. Your users get upload, AI column mapping, and inline validation. You get clean, typed rows in your onSubmit. Free forever, no row limits.

Start for free

npm i @filefeed/reactfree forever, no credit card

App.tsx

import { FilefeedProvider, FilefeedSheet } from "@filefeed/react";

<FilefeedProvider>
  <FilefeedSheet
    config={{
      name: "Contacts", slug: "contacts",
      fields: [
        { key: "name", type: "string", required: true },
        { key: "email", type: "email", unique: true },
        { key: "age", type: "number" },
      ],
    }}
    onSubmit={({ rows }) => api.import(rows)}
  />
</FilefeedProvider>

Upload

Your user drops a file, any file

CSV, XLSX, or XLS, with encoding detected automatically. No template to download first, no "please resave as UTF-8" support tickets. Users who don't have a file yet can enter rows manually in a spreadsheet grid.

.csv, .xlsx, .xls · automatic encoding detection · manual entry mode

yourapp.com/import

Drop your file here

.xlsx, .xls or .csv

Choose fileEnter manually

Encoding detected automatically

Map

Their columns find your fields

Headers are matched to your schema automatically, with AI suggestions filling the gaps and sample values previewed for every column. Required fields are enforced before anyone can continue, so half-mapped imports never reach you.

auto-matching · AI column suggestions · required-field enforcement · sample previews

yourapp.com/import

Field Mappings

Mapped 3/4

Full_NameFull Name *

E-mailEmail *

Age (yrs)Age

NotesSelect target field

Column: E-mail

Sample Values:

Row 1: jana@acme.io

Row 2: liu.wei@globex.co

Row 3: sam@initech.com

… and 124 more rows

Review & fix

Errors get fixed where they happen

Every row is validated against your field rules. Invalid cells light up and are editable in place, enum mismatches map to allowed values in one click with AI suggestions applied in bulk, and the grid stays fast at a hundred thousand rows because it's virtualized.

inline editing · enum mapping with AI confidence · bulk apply · delete all invalid · virtualized grid

yourapp.com/import

All 128Valid 125Invalid 3

Submit

3 unmapped values across 1 columnApply 3 suggestions

Full NameEmailPlan

Jana Markovicjana@acme.ioPro

Liu Weiliu.wei@globexPro

Sam Ortizsam@initech.compremium ⌄

Cells are editable inline. Enum mismatches map with one click.

Clean rows in your onSubmit

Typed, validated, deduplicated.

No mockups here

This one is the real importer

The button below opens the actual component, running in this page. Bring a messy CSV, watch it map and validate.

For the developer

Built by people who hate building importers

TypeScript-first configTyped sheet config, typed rows in your onSubmit

Field rulesrequired, unique, enums, regex, min/max, custom validators

Per-row hooksonRecordHook runs on every row before submit

Chunked submitLarge imports arrive in batches, not one giant payload

Transformstrim, lowercase, custom functions, applied per field

ThemingLight and dark, CSS variables for brand colors

Portal controlopenPortal and closePortal from anywhere in your app

No backend requiredParsing and validation run client-side, data goes straight to you

Tempted to build it in-house anyway? Read what it actually costs.

When uploads become feeds

The same clients will eventually want SFTP

Manual uploads are how it starts. When a client asks to drop files on a server every Monday instead, Automated FileFeeds runs the same schemas and mappings as a recurring pipeline.

Explore Automated FileFeeds

FAQ

Frequently asked questions

Is the embeddable importer really free?

Yes. The importer is free forever, with no credit card and no row limits. Paid plans exist for the Automated FileFeeds product, which handles recurring file feeds over SFTP and email.

What file types does it support?

CSV, XLSX, and XLS. File encoding is detected automatically, so files exported from older tools and non-UTF-8 locales import cleanly. Users can also enter rows manually in a spreadsheet grid.

How does column mapping work?

Headers are matched to your schema fields automatically, and AI suggestions cover the ambiguous ones. Users see sample values for each column while mapping, and required fields must be mapped before they can continue.

How are invalid rows handled?

Every row is validated against your field rules: types, required, unique, enums, regex, min/max, and custom validators. Invalid cells are highlighted and editable inline, enum mismatches can be remapped in one click, and users can bulk-apply AI suggestions or delete all invalid rows.

Can it handle large files?

Yes. The review grid is virtualized, so files with hundreds of thousands of rows stay responsive, and submits can be chunked into batches so your API receives manageable payloads.

How do I get the data?

Your onSubmit callback receives clean, typed rows that already passed validation. For per-row logic before submit, use onRecordHook. No FileFeed backend sits between your user and your API.

Does it work outside React?

The SDK is built for React with first-class TypeScript support. If your stack is different, the Automated FileFeeds product accepts the same files over SFTP, email, or API without any frontend code.

Is this a free alternative to Flatfile, Dromo, or CSVbox?

Yes. You get upload, AI column mapping, validation, and inline error fixing as an embeddable component, free forever. See the detailed comparisons on our alternatives pages.

Comparing importers? See how FileFeed stacks up against Flatfile, Dromo, and CSVbox.

Ship imports this week

One npm install, one sheet config, one onSubmit. Your users do the rest themselves.

Start for free Read the docs

Free forever, no credit card, no row limits.