hub / github.com/HelloCSV/HelloCSV

github.com/HelloCSV/HelloCSV @v0.4.3

Chat with this repo

repository ↗ · DeepWiki ↗ · release v0.4.3 ↗ · + Follow

344 symbols 738 edges 133 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

HelloCSV

A modern, drop in, frontend only, CSV importer workflow.

Explore the docs »

View Demo .
Report Bug . Request Feature

About The Project

Screenshot

A challenge almost every project eventually faces is importing user uploaded data from CSV files in a way that doesn't cause a ton of issues. Developers always have to figure out

How do you make sure that data uploaded is correct
How do you notify the user that the data is incorrect before they upload it, and give the user a chance to fix it
Incorrect or duplicate data that is uploaded is super annoying to try to fix after-the-fact
Run automatic formatters (ex: phone number formatting), but providing a way for the user to see what our formatter did before uploading as a sanity check

HelloCSV a Javascript library that drops in a CSV importer into your project that:

Supports custom columns
with custom validations
and custom transformations
a nice UI that walks a user through a 4 step process of uploading a CSV (upload, map columns, preview data, upload confirmation)
with a small JS footprint
that doesn't assume your frontend stack

Install

With npm:

npm install hello-csv

From CDN

<script src="https://cdn.jsdelivr.net/npm/hello-csv@0.4.3/dist/bundled/index.es.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hello-csv@0.4.3/dist/bundled/hello-csv.css">

Documentation

Current documentation could be find here

Extension points exported contracts — how you extend this code

Props (Interface)

(no doc)

src/components/SheetTooltip.tsx

ImporterDefinition (Interface)

(no doc)

src/importer/types.ts

ColumnMapping (Interface)

(no doc)

src/mapper/types.ts

ThemeSetterProps (Interface)

(no doc)

src/theme/ThemeSetter.tsx

ImporterTransformerDefinitionBase (Interface)

(no doc)

src/transformers/types.ts

ImporterValidationError (Interface)

(no doc)

src/validators/types.ts

ColumnMeta (Interface)

(no doc)

src/sheet/types.ts

ImportStatistics (Interface)

(no doc)

src/status/types.ts

Core symbols most depended-on inside this repo

src/validators/validator_definitions/base.ts

push

called by 23

src/transformers/index.ts

useTranslations

called by 21

src/i18/index.tsx

buildValidatorFromDefinition

called by 16

src/validators/validator_definitions/index.ts

useImporterDefinition

called by 12

src/importer/hooks.tsx

transform

called by 10

src/transformers/index.ts

useImporterState

called by 9

src/importer/reducer.tsx

Shape

Function 183

Interface 78

Class 42

Method 41

Languages

TypeScript100%

Modules by API surface

src/importer/state.tsx20 symbols

src/utils/index.ts14 symbols

src/importer/index.tsx14 symbols

src/sheet/types.ts12 symbols

src/validators/types.ts11 symbols

src/mapper/utils.ts11 symbols

src/mapper/index.ts10 symbols

src/transformers/index.ts7 symbols

src/importer/reducer.tsx7 symbols

src/i18/index.tsx7 symbols

src/components/Select.tsx7 symbols

src/sheet/utils.ts6 symbols

For agents

$ claude mcp add HelloCSV \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact