@xystack/preview

A beautiful CLI tool to preview JSONL (JSON Lines) files in your browser with syntax highlighting and interactive exploration.

Features

• 🚀 Zero Configuration - Built with Bun's fullstack bundler, no complex setup needed
• 🎨 Beautiful UI - Modern dark theme with Tailwind CSS
• 📝 Syntax Highlighting - Powered by Monaco Editor (VS Code's editor)
• 🔍 Interactive Exploration - Click any line to view detailed JSON with folding support
• ⚡ Performance - Efficient pagination for large JSONL files
• 🛠️ Error Handling - Invalid JSON lines are clearly marked
• 🔥 Hot Module Reload - Development mode with instant updates

Installation

# Using Bun (recommended)
bun add -g @xystack/preview

# Using npm
npm install -g @xystack/preview

# Using pnpm
pnpm add -g @xystack/preview

Usage

Basic Usage

# Preview a JSONL file
preview data.jsonl

# Specify a custom port
preview data.jsonl --port 8080

# Short form
preview data.jsonl -p 8080

Development Mode

For development with hot module reload:

preview data.jsonl --dev

Examples

# Preview logs
preview ./logs/access.jsonl

# Preview API responses
preview ./data/api-responses.jsonl

# Preview with custom port
preview ./data/users.jsonl --port 3001

Development

Prerequisites

• Bun >= 1.0.0

Setup

# Clone the repository
git clone https://github.com/xinyao27/preview.git
cd preview

# Install dependencies
bun install

# Run in development mode
bun run dev

# Build for production
bun run build

# Run tests
bun test

Project Structure

preview/
├── src/
│   ├── index.ts           # Server entry point & CLI
│   ├── parser.ts          # JSONL parser with streaming
│   ├── app.tsx            # Main React component
│   ├── frontend.tsx       # React entry point
│   ├── index.html         # HTML template
│   ├── index.css          # Global styles with design system
│   └── components/
│       ├── json-viewer.tsx  # Monaco editor modal
│       └── ui/            # shadcn/ui component library
│           ├── badge.tsx
│           ├── button.tsx
│           ├── card.tsx
│           └── ...        # 59 UI components
├── .claude/
│   └── skills/
│       └── brand-guidelines/  # Design system documentation
├── bunfig.toml            # Bun configuration
└── example.jsonl          # Sample JSONL file

Technology Stack

• Runtime: Bun - Fast JavaScript runtime with native TypeScript support
• Frontend: React - UI framework
• Editor: modern-monaco - Monaco Editor (VS Code)
• Styling: Tailwind CSS - Utility-first CSS framework
• Bundler: Bun's built-in fullstack bundler with HMR

How It Works

1. CLI: Parses command-line arguments and starts the server
2. Backend: Bun serves both API endpoints and the frontend
3. API: Provides metadata and paginated JSONL data
4. Frontend: React app with Monaco Editor for JSON visualization
5. Bundling: Bun automatically bundles the frontend with Tailwind CSS

Performance Considerations

• Pagination: Only loads 50 lines at a time
• Lazy Loading: More lines load automatically as you scroll
• Efficient Parsing: Streams large files without loading entirely into memory
• Monaco Editor: Provides code folding for deeply nested JSON

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License © 2025 xinyao27