# Browser Libraries
Libraries that unlock advanced capabilities without a server. Load from CDN, use immediately.
## Data Processing
### Papa Parse — CSV
```html
```
```javascript
// Parse CSV string or file
const result = Papa.parse(csvString, { header: true, dynamicTyping: true });
// result.data = [{col1: val1, ...}, ...]
// Generate CSV
const csv = Papa.unparse([{ name: 'Alice', score: 95 }, { name: 'Bob', score: 87 }]);
```
Best for: CSV viewers, data importers, spreadsheet tools, log analyzers.
### SheetJS — Excel Files
```html
```
```javascript
// Read Excel file from input/drop
const workbook = XLSX.read(arrayBuffer, { type: 'array' });
const sheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(sheet);
// Write Excel
const ws = XLSX.utils.json_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, 'output.xlsx');
```
Best for: Excel converters, data export tools, report generators.
### sql.js — SQLite in Browser
```html
```
```javascript
const SQL = await initSqlJs({ locateFile: f => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.10.3/${f}` });
const db = new SQL.Database();
db.run('CREATE TABLE t (id INTEGER PRIMARY KEY, name TEXT)');
db.run('INSERT INTO t VALUES (1, ?)', ['Alice']);
const results = db.exec('SELECT * FROM t');
// results[0].columns = ['id', 'name'], results[0].values = [[1, 'Alice']]
```
Best for: SQL playgrounds, data explorers, offline databases, query tools.
## Text & Documents
### Marked — Markdown
```html
```
```javascript
document.getElementById('output').innerHTML = marked.parse('# Hello\n**bold** text');
```
Best for: Markdown editors, note apps, documentation viewers.
### KaTeX — Math Rendering
```html
```
```javascript
katex.render('E = mc^2', element);
// Or for inline: katex.renderToString('\\frac{a}{b}')
```
Best for: Math editors, equation renderers, educational tools, scientific calculators.
### PDF.js — PDF Rendering
```html
```
```javascript
const pdf = await pdfjsLib.getDocument(arrayBuffer).promise;
const page = await pdf.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.getElementById('pdf-canvas');
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
```
Best for: PDF viewers, document previews, page extractors.
## Vision & Media
### Tesseract.js — OCR
```html
```
```javascript
const { data: { text } } = await Tesseract.recognize(imageOrCanvas, 'eng');
```
Best for: Image-to-text tools, receipt scanners, screenshot readers. Note: first run downloads ~15MB language data (cached after).
### Tone.js — Audio Synthesis
```html
```
```javascript
const synth = new Tone.Synth().toDestination();
await Tone.start(); // must be triggered by user gesture
synth.triggerAttackRelease('C4', '8n');
```
Best for: Music apps, synthesizers, sound toys, audio visualizers, metronomes.
## Visualization
### Chart.js — Charts
```html
```
```javascript
new Chart(canvas, {
type: 'bar', // line, pie, doughnut, radar, scatter, bubble
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{ label: 'Sales', data: [12, 19, 3] }]
}
});
```
Best for: Dashboards, data visualizers, analytics tools, survey results.
### Mermaid — Diagrams from Text
```html
```
```javascript
mermaid.initialize({ startOnLoad: true });
// Then use flowchart TD\n A-->B
```
Best for: Flowchart editors, architecture diagram tools, process visualizers.
## Canvas & Graphics
### Fabric.js — Canvas Editor
```html
```
```javascript
const canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({ left: 100, top: 100, width: 50, height: 50, fill: 'red' }));
// Objects are selectable, draggable, resizable by default
```
Best for: Image editors, design tools, annotation apps, meme makers.
## Security
### DOMPurify — HTML Sanitization
```html
```
```javascript
const clean = DOMPurify.sanitize(userHTML);
```
**Always use when rendering user-provided HTML** (markdown output, pasted content, API responses).
## Choosing Libraries
- **Data in, data out**: Papa Parse (CSV), SheetJS (Excel), sql.js (queries)
- **Text rendering**: Marked (markdown), KaTeX (math), PDF.js (PDFs)
- **Visual output**: Chart.js (charts), Mermaid (diagrams), Fabric.js (canvas editor)
- **Input processing**: Tesseract.js (OCR from images)
- **Audio**: Tone.js (synthesis and playback)
- **Security**: DOMPurify (always sanitize user HTML)