Quickstart

1. Install

pnpm add @bootstrapware/importer

2. Choose a mode

Local schema for development: pass fields in code.

Hosted configuration for production: pass importerId and a publishable key from the dashboard after you publish a revision.

3. Embed (local schema)

Use a Client Component in Next.js App Router.

"use client";

import { Importer } from "@bootstrapware/importer";
import "@bootstrapware/importer/styles.css";

export function ImportCustomers() {
  return (
    <Importer
      fields={[
        { key: "email", label: "Email", type: "email", required: true },
        { key: "name", label: "Name", type: "string", required: true },
      ]}
      duplicateKey="email"
      onComplete={async (rows, meta) => {
        await fetch("/api/import", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ rows, meta }),
        });
      }}
    />
  );
}

4. What you get

onComplete receives valid rows only, plus meta with counts, file type, duration, and optional Excel sheetName. Invalid rows stay in the UI unless the user exports them.

On the upload step, once fields are known (local fields or hosted published config), the widget offers Download template.csv. Headers use labels, falling back to keys. One example row is derived from field types. The file is generated in the browser.

Optional props when your customers are not US-only: dateOrder, numberLocale, and dir. See the React component reference.

5. Security

Publishable keys (bsw_*_pub_) may appear in the browser. Secret keys (bsw_*_sec_) stay in Route Handlers or other server code. Do not POST file contents to Bootstrapware.

Related: React component · onComplete · API keys · Next.js guide