PeekJSON

A powerful, offline-capable JSON and CSV visualization tool with multiple view modes. Built as a Progressive Web App for use anywhere, anytime.

Features

• Multiple View Modes

  • Tree View: Hierarchical visualization of nested data structures
  • Table View: Spreadsheet-like display with search and modal support
  • Code View: Syntax-highlighted JSON with line numbers
  • Compact View: Condensed display for quick overview

• Data Support

  • JSON file upload and parsing
  • CSV file import with automatic parsing
  • Paste JSON directly into the interface
  • Download data in JSON or CSV format

• Search & Navigation

  • Real-time search across all view modes
  • Highlight matching results
  • Navigate complex nested structures

• Document Management

  • Save and access recent documents
  • Session-based storage (no remote server required)
  • Rename documents inline
  • Quick access to recently viewed files

• Progressive Web App

  • Installable on desktop and mobile
  • Offline support with Service Worker
  • Works without internet connection
  • Responsive design for all screen sizes

Tech Stack

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Lucide React (icons)

Installation

Clone the repository and install dependencies:

git clone https://github.com/lucolvin/Data-Viewer-Pro.git
cd Data-Viewer-Pro
bun install

Usage

Development Server

Start the development server with hot module replacement:

bun run dev

The application will be available at http://localhost:5173

Build for Production

Create an optimized production build:

bun run build

The built files will be in the dist directory.

Preview Production Build

Preview the production build locally:

bun run preview

Linting

Run ESLint to check code quality:

bun run lint

Type Checking

Run TypeScript type checking without emitting files:

bun run typecheck

How to Use the Application

1. Load Data: Upload a JSON or CSV file, or paste JSON directly
2. Choose View: Select from Tree, Table, Code, or Compact view modes
3. Search: Use the search bar to find specific values in your data
4. Download: Export your data as JSON or CSV
5. Recent Documents: Access previously loaded files from the sidebar

Browser Support

Modern browsers with ES6+ support:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

License

This project is open source and available under the MIT License.