Table → Image Studio

Convert tables into beautiful, high-quality downloadable images. A premium developer tool built with Next.js, React, and TypeScript.

Features

• Smart Input System — Paste raw text (CSV, Markdown, HTML, TSV, JSON) or upload files (CSV, Excel, Markdown, HTML). Format is auto-detected with manual override.
• Live Preview — Real-time table rendering with debounced parsing. No "convert" button needed.
• 8 Theme Presets — Minimal, Notion, GitHub, Stripe, Dark, Presentation, Ocean, and Warm styles.
• Full Customization — Font family, font size, colors, borders, padding, alignment, title, footer, and transparent background.
• Image Export — Download as PNG or SVG at 1x, 2x, or 3x resolution. Copy to clipboard with one click.
• Share — Generate a shareable URL that encodes the table data and styling.
• History — Last 3 tables saved automatically to localStorage.
• Undo/Redo — Full undo/redo support with keyboard shortcuts.
• Keyboard Shortcuts — ⌘S to export, ⌘⇧C to copy, ⌘Z / ⌘⇧Z for undo/redo.
• Dark Mode — Toggle between light and dark themes.
• Drag & Drop — Drop files directly onto the upload area.
• Accessible — ARIA roles, keyboard navigation, semantic HTML.

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• State: Zustand
• Animations: Framer Motion
• Parsing: PapaParse (CSV), SheetJS (Excel)
• Export: html-to-image
• Icons: Lucide React
• Notifications: react-hot-toast

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 in your browser.

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with metadata and fonts
│   ├── page.tsx            # Main application page
│   └── globals.css         # Global styles and Tailwind config
├── components/
│   ├── Header.tsx          # App header with dark mode toggle
│   ├── Footer.tsx          # Developer branding footer
│   ├── InputPanel.tsx      # Text input, paste detection, history
│   ├── FileUpload.tsx      # Drag & drop file upload
│   ├── FormatBadge.tsx     # Format detection badge + override
│   ├── StyleControls.tsx   # Full styling customization panel
│   ├── PresetSelector.tsx  # Theme preset grid
│   ├── TableRenderer.tsx   # Live table preview (export target)
│   └── ExportControls.tsx  # Download, copy, share, save JSON
├── hooks/
│   ├── useTableParser.ts   # Debounced parsing with format detection
│   ├── useImageExport.ts   # Image export, copy, download
│   ├── useKeyboardShortcuts.ts
│   └── useHistory.ts       # localStorage history management
├── lib/
│   ├── store.ts            # Zustand global state
│   ├── types.ts            # TypeScript type definitions
│   ├── presets.ts          # Theme preset definitions
│   ├── export.ts           # Image export utilities
│   ├── history.ts          # localStorage helpers
│   ├── url.ts              # Shareable URL encoding/decoding
│   └── parsers/
│       ├── index.ts        # Parser dispatch + exports
│       ├── detect.ts       # Format auto-detection
│       ├── csv.ts          # CSV parser (PapaParse)
│       ├── tsv.ts          # TSV parser
│       ├── markdown.ts     # Markdown table parser
│       ├── html.ts         # HTML table parser
│       ├── json.ts         # JSON array parser
│       └── excel.ts        # Excel parser (SheetJS)

Deployment

Deploy to Vercel with zero configuration:

npx vercel

Or connect your Git repository to Vercel for automatic deployments.

License

MIT