">https://img.shields.io/badge/node-%3E%3D22.12-339933?logo=node.js&logoColor=white&style=flat-square">
Abra, filtre e analise arquivos CSV enormes direto no navegador — sem instalar nada e sem enviar seus dados para nenhum servidor.
| ⚡ Parsing em streaming | CSV/TSV/TXT são lidos e parseados num Web Worker dedicado (csvParser.worker.ts), em chunks de 1 MB — a UI nunca trava, mesmo em arquivos com milhões de linhas. |
| 🧭 Detecção automática | Delimitador (, ; tab), BOM e linhas irregulares são tratados na hora do parse; colunas curtas são normalizadas contra o cabeçalho. |
| 🖥️ Tabela virtualizada | Renderização com @tanstack/vue-virtual — só o que está na viewport vai para o DOM, então rolar 1 milhão de linhas é tão liso quanto rolar 10. |
| 🔍 Busca + ordenação | Busca global instantânea sobre todas as colunas e ordenação multi-coluna, tudo reativo e computado em memória. |
| 📌 Colunas sob controle | Fixe, redimensione, reordene e oculte colunas — o layout da tabela é seu. |
| 🧮 Estatísticas por coluna | Tipo inferido (número, data, booleano, e-mail, URL), nulos, únicos, duplicados, preenchimento, mín/máx/média/mediana e um mini-histograma de distribuição, por coluna selecionada. |
| 🧰 Filtros por coluna | Operadores combináveis por tipo de dado (igual, contém, maior/menor, entre, intervalo de datas, vazio/preenchido) — combine quantos quiser, com feedback imediato de quantas linhas casaram. |
| 🚨 Destaques automáticos | Células vazias, valores duplicados, números negativos e datas inválidas são realçados na tabela sem nenhuma configuração — legenda fixa no topo. |
| ✏️ Edição com desfazer/refazer | Edite células inline com validação por tipo; desfazer/refazer cobre tanto edições de célula quanto reordenação de coluna numa única pilha cronológica — "Salvar nova versão" ou "Sobrescrever original" gravam o arquivo com a ordem de colunas vigente. |
| 🆚 Comparação de arquivos | Abra um segundo CSV lado a lado e veja o diff: registros adicionados, removidos, alterados e inalterados, pareados por coluna-chave ou por posição. |
| 📤 Exportação | CSV, JSON, Markdown, SQL (INSERT) e XLSX, respeitando filtros ativos e colunas visíveis/ocultas. |
| 💾 Arquivos recentes + sessão | Cada arquivo aberto é persistido em IndexedDB (LRU de 10) — reabra em um clique e retome de onde parou: busca, filtros, ordenação e colunas voltam exatamente como estavam. |
| 🌗 Tema claro/escuro | Dark por padrão, com preferência persistida entre sessões. |
| 🔒 Zero backend | ssr:false, sem rotas de API, sem chamadas de rede. Nada do conteúdo do seu arquivo sai da máquina — nem por acidente. |
flowchart LR
A["Arraste ou selecione<br>um .csv / .tsv / .txt"] --> B["Web Worker<br>parseia em streaming"]
B --> C["IndexedDB<br>guarda arquivo + sessão"]
C --> D["Viewer<br>busca · filtros · ordenação · colunas"]
D --> E["Editar células<br>desfazer/refazer · salvar"]
D --> F["Comparar<br>com um segundo arquivo"]
D --> G["Exportar<br>CSV/JSON/MD/SQL/XLSX"]
Todo o pipeline roda no navegador: abrir → parsear → persistir → explorar → editar/comparar/exportar.
Não há server/, não há API, não há upload — só o seu arquivo e a sua máquina.
Tema dark por padrão, com variante light — tokens vivos em app/assets/css/main.css.
- Tipografia: Geist para UI, Geist Mono para dados tabulares — ambas auto-hospedadas via
@fontsource-variable, sem CDN externo. - Raios:
2–14pxem chips/inputs/botões/cards,20pxem pílulas e superfícies grandes. - Troca de tema via atributo
data-themena raiz do documento (useTheme.ts), persistida emlocalStorage.
| Camada | Tecnologia |
|---|---|
| Framework | Nuxt 4 (ssr:false, Nitro preset:'static') — SPA pura, sem servidor |
| UI | Vue 3 <script setup> + Tailwind CSS v4 |
| Linguagem | TypeScript |
| Parsing | PapaParse rodando dentro de um Web Worker |
| Tabela | @tanstack/vue-virtual |
| Persistência | IndexedDB via idb |
| Testes | Vitest + @vue/test-utils + happy-dom + fake-indexeddb |
Pré-requisitos: Node >=22.12.0 e yarn (único gerenciador suportado — yarn.lock é a fonte da verdade).
yarn install # instala as dependências
yarn dev # http://localhost:3000| Comando | O que faz |
|---|---|
yarn dev |
Servidor de desenvolvimento (nuxt dev) |
yarn build |
Build de produção (nuxt build) |
yarn generate |
Gera o SPA estático (nuxt generate) — servível por qualquer CDN |
yarn preview |
Preview do build de produção |
yarn test |
Roda a suíte de testes uma vez (vitest run) |
yarn test:watch |
Testes em modo watch |
csvview/
├─ app/
│ ├─ pages/ # index.vue (Upload) · viewer.vue (Visualizador) · compare.vue (Comparação)
│ ├─ layouts/ # shell com header, logo e toggle de tema
│ ├─ components/ # Dropzone, ViewerTable, StatsPanel, ColumnChip, FilterPanel,
│ │ # CompareTable, SaveCopyModal, UnsavedChangesModal, HighlightLegend...
│ ├─ composables/ # useCsvParser, useViewer, useCellEditing, useSaveVersion,
│ │ # useUnsavedChangesGuard, useComparisonDatasets, useFilesStore, useTheme...
│ ├─ services/ # csvParser, columnStats, columnFilters, diffDatasets,
│ │ # exportData, exportXlsx, formatFile — puros, sem framework
│ └─ assets/css/ # main.css — tokens de design (cores, raios, fontes)
├─ test/ # specs Vitest (componentes, composables, serviços)
├─ public/ # logo.svg e estáticos servidos sem processamento
└─ docs/agents/ # documentação gerada para agentes de IA
Regra de arquitetura: lógica de domínio (parsing, estatísticas, filtros, diff, exportação) vive isolada em
app/services/, sem dependência de Vue — 100% testável em isolamento.
yarn testSuíte roda sobre happy-dom com IndexedDB simulado (fake-indexeddb) — nenhum navegador
real é necessário. Cobre componentes, composables e os serviços de parsing/estatística.
O produto principal (visualização, tipos/estatísticas, filtros, exportação, destaques, edição com desfazer/refazer, sessão persistida e comparação de arquivos) já está implementado. Em avaliação para os próximos ciclos:
- Consultas SQL — rodar SQL sobre o dataset via DuckDB WASM
- Gráficos e dashboards — visualizações automáticas por coluna, combináveis em painéis
- União de arquivos — merge de múltiplos CSVs
- Qualidade de dados — detecção automática de inconsistências
- Assistente de IA — explicar datasets, gerar filtros e identificar padrões em linguagem natural
- PWA offline e versão desktop (Tauri)
Projeto privado — todos os direitos reservados.