Get started

JavaScript CSV importer

Add CSV imports to plain JavaScript, HTML or another frontend framework with @csvjetty/js.

On this page

Open the hosted CSVJetty importer from JavaScript without a React dependency. Use it with plain HTML or another frontend framework.

Install

BASH

npm install @csvjetty/js

For a script tag, load https://cdn.jsdelivr.net/npm/@csvjetty/js@0.1.0/dist/csvjetty.min.js. It exposes CSVJetty.open globally. Serve your page over HTTPS or localhost.

Open the importer

Add a button with id="import" to your page. Configure an importer in the dashboard and use its public key. Your backend must authenticate and validate writes.

JAVASCRIPT

import CSVJetty from "@csvjetty/js";
document.getElementById("import").addEventListener("click", () => {  CSVJetty.open({    importerKey: "YOUR_PUBLIC_IMPORTER_KEY",    async onData({ rows, importId, rowNumbers }) {      const response = await fetch("/api/contacts/import", {        method: "POST",        headers: { "Content-Type": "application/json" },        body: JSON.stringify({ rows, importId, rowNumbers }),      });      if (!response.ok) throw new Error("Could not save contacts.");      const body = await response.text();      return body ? JSON.parse(body) : undefined;    },  });});

Use demo: true instead of importerKey to preview the keyless hosted demo. The same column definitions and synchronous custom validators used by the React SDK are supported.

Callback delivery and row errors

Lifecycle

open(options) returns a controller. close() respects busy state and asks before discarding changes. destroy() removes the importer immediately without calling onClose; use it when your page or component is removed. It cannot cancel an application save already running. Only one importer can be open at a time.

onComplete receives importId, accepted and rejected. onClose runs on normal close. Use updateCallbacks to replace handlers without reopening. Invalid configuration throws an error from open().

Overview