Drops into the stack you already ship.
CSVbox ships official SDKs for React, Angular, and Vue.js — plus a plain JavaScript snippet for everything else. Same importer, same API, same validated rows out the other side.
- One dependency, no peer-dep sprawl
- Under 10 lines to first import
- Schema changes need no redeploy
The importer is the same. Only the five lines you paste change.
Column mapping, validation, transforms, and delivery all run inside CSVbox — so the SDK’s only job is to open the modal and hand you the result. That keeps the integration surface tiny, and it means switching frameworks later costs you a component, not a rewrite.
Pick your framework
Copy the snippet, swap in your license key, ship. Every example below is the real integration — nothing trimmed for the marketing page.
React
A render-prop button — style the trigger however you like.
npm install @csvbox/reactimport { CSVBoxButton } from '@csvbox/react'
export default function ImportButton() {
return (
<CSVBoxButton
licenseKey="YOUR_LICENSE_KEY_HERE"
user={{ user_id: 'default123' }}
onImport={(result, data) => {
if (result) {
console.log(data.row_success + ' rows uploaded')
} else {
console.log('fail')
}
}}
render={(launch, isLoading) => (
<button disabled={isLoading} onClick={launch}>
Upload file
</button>
)}
>
Import
</CSVBoxButton>
)
}Works with Next.js, Remix, Vite, and CRA. The render prop hands you launch() and isLoading so the button stays yours.
One mental model, four syntaxes
Nothing is framework-exclusive. Learn the importer once and every SDK reads the same way.
| Capability | JavaScript | React | Angular | Vue.js |
|---|---|---|---|---|
| License keyIdentifies the sheet the user is importing into. | new CSVBoxImporter(key, …) | licenseKey | [licenseKey] | :licenseKey |
| User attributesTag every import with your own user or tenant ID. | importer.setUser({…}) | user | [user] | :user |
| Import callbackFires on submit with the result flag and row counts. | callback(result, data) | onImport | [imported] | :onImport |
| OptionsRow limits, language, theme, custom request headers. | importer.setOptions({…}) | options | [options] | :options |
| Lazy loadingDefer importer assets until the user actually clicks. | lazy option | lazy | [lazy] | :lazy |
| Lifecycle eventsHook into ready, close, and submit as they happen. | importer.listen(…) | onReady / onClose / onSubmit | Component outputs | Component props |
Every capability ships in every SDK — no framework is a second-class citizen.
From npm install to first import
Most teams have a working importer in an afternoon — including the parts that usually take a sprint.
- 01
Define the sheet
Set your columns, data types, and validation rules in the CSVbox dashboard. No code, no redeploy when they change.
- 02
Drop in the component
Install the SDK for your framework and pass your license key. Five lines in React, Angular, or Vue — one script tag in plain JavaScript.
- 03
Receive validated rows
Clean data lands at your webhook, database, or any of 20+ destinations. Your callback fires with the row counts.
Your front end picks the SDK. Your back end picks the destination.
The SDK you install has nothing to do with where the data lands. Whatever you run server-side — Node, Rails, Django, Laravel, Go, .NET, or no server at all — CSVbox delivers validated rows to your webhook, database, or no-code tool.
Integration questions, answered
- CSVbox ships official SDKs for React, Angular, and Vue.js, plus a plain JavaScript snippet that works in any page or framework — including Svelte, Ember, Laravel Blade, Rails views, and server-rendered HTML.
- Yes. Every SDK takes a license key, user attributes, an import callback, an options object, and a lazy flag. Only the syntax changes: props in React, bracketed inputs in Angular, bound props in Vue, and setUser() / setOptions() calls in plain JavaScript.
- Yes. The React SDK works in Next.js, Remix, Vite, and Create React App, and the Vue SDK works in Nuxt when rendered client-side. The importer runs in the browser, so render the button on the client.
- Install @csvbox/angular for Angular 12 and above. For Angular 8 through 11, install @csvbox/angular_8 instead — the inputs and behaviour are identical. Angular install docs →
- No. The SDK only opens the importer and returns the result. Validated rows are delivered by CSVbox to your webhook, database, or any of 20+ destinations, so any backend — Node, Rails, Django, Laravel, Go, .NET, or none at all — works unchanged. See all destinations →
- Under ten lines. Install one package, drop in the component with your license key, and handle the import callback. Column definitions and validation rules live in the CSVbox dashboard, so changing your schema never requires a redeploy.