CSV in.
Validated records out.
The core parser and widget are plain JavaScript ES modules. No dependency installation or hosted account is needed to evaluate them. This prototype supports UTF-8 CSV and TSV, 5 MB / 10,000 data records by default. It does not accept XLSX.
1. Add the component
Copy the SDK directory into your application’s static assets. Load the stylesheet once.
<link rel="stylesheet" href="/rowframe/widget.css">
<div id="importer"></div>
<script type="module">
import { mountImporter } from '/rowframe/widget.mjs';
const importer = mountImporter(
document.querySelector('#importer'),
{
fields: [
{ key: 'sku', label: 'SKU',
aliases: ['Product code'],
required: true, unique: true },
{ key: 'quantity', type: 'integer',
aliases: ['Stock'], required: true, min: 0 }
],
onComplete: async (records) => {
const response = await fetch('/your-import-endpoint', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(records)
});
if (!response.ok) throw new Error('Import failed');
}
}
);
</script>2. Describe your fields
key identifies the returned property. label is shown in the UI. aliases supplies exact normalized matches for source headers. Nothing is sent to an AI provider for matching.
- Types: string (default), email, number, integer and enum.
- Rules: required, unique, min/max for numbers, values for enums.
- Whitespace is trimmed by default; use trim: false to preserve it.
- Keep identifiers such as SKUs as strings to retain leading zeros.
- Custom validate(value, record) may return an error message. It receives the completed typed record.
3. Own the destination
The callback receives all accepted records only when the configured schema passes. It may return a promise. A rejected promise shows a retry message, not success. The component does not implement your API authorization, database transaction, retry deduplication or business rules.
Always revalidate on your server. Browser validation can be bypassed. Make your endpoint idempotent if a user may submit the same file twice.
Use in React, Vue or a plain page
Mount into a DOM element once and call importer.destroy() during unmount. Framework wrappers are not included in this initial build. Type declarations are included. A React effect should use stable schema and callback references so ordinary renders do not reset the file.
Files and data
The demo keeps records in memory until you load another file, destroy the component or close the tab. No analytics, remote fonts, cookies, storage or third-party data endpoint is configured. The component does not fetch image URLs found in a file.
CSV exports protect spreadsheet viewers from formula-prefixed text by adding a leading apostrophe. Applications that need exact machine-readable output may explicitly set safeForSpreadsheet: false when calling toCSV, or use the JSON output. Identifiers stored in CSV may still be reformatted by spreadsheet applications; import them as text.
Honest limits
This is a prototype, not a certified or enterprise support offering. The 10,000-row default is covered by an automated core test; parsing currently runs on the main thread. A worker, accessibility audit, wider browser matrix and real customer integration trials are still required before a production release. No lifetime upgrades or live support SLA are promised.
Evaluate the package
The ZIP contains the original modules, styles, type declarations, core tests and a separate consuming-app example. Extract it, run npm test, then serve the directory over localhost. Commercial deployment rights are not included.