Avro Explorer

A professional Visual Studio Code extension for viewing and exploring Apache Avro files

📸 UI Preview

Avro Explorer Interface

A powerful Avro file viewer with interactive data table, schema display, and flexible view modes.

✨ Features

📊 Interactive Data Table

Sort records by any column (click column header)
Virtualized Table - Smooth scrolling of large datasets with @blueprintjs/table
Inline Column Filtering - Filter records directly from each table column header
Cell Preview Panel - Click any cell to preview full content in resizable panel with JSON syntax highlighting
Pagination with customizable page size
Row selection with Windows-style highlighting
Export selected or all data
🔍 Global Search - Search across all columns with Ctrl+F shortcut
📊 Column Charts - Visual distribution charts for column values
📐 Column Operations - Show/hide columns, drag to reorder

📋 Schema Display

Syntax-highlighted JSON schema view
Quick copy to clipboard
Shows type, name, and field count
🔄 Two Modes - Fields list and JSON view switching

↔️ Flexible View Modes

Split View - Schema and records side by side
Schema Only - Focus on schema definition
Records Only - Full-screen data exploration
Resizable panels for custom layouts

🎨 Theme Aware

Blueprint 6 Dark Mode - Automatic bp6-dark theme synchronization
Consistent styling with editor colors
Smooth hover and selection effects

💾 Export Capabilities

Export to CSV (comma-separated values)
Export to JSON (formatted with indentation)
System save dialog for file location

🚀 Getting Started

Quick Start

Double-click any .avro file in Explorer
Or right-click -> Open With... -> Avro Explorer
Or run command palette: Open in Avro Explorer

View Mode Switching

Icon	Mode	Description
⇆	Split	Schema and records side by side
📋	Schema	Full schema view
📊	Records	Full records table

Filtering Records

Use the search box to filter across all columns
Or select a specific column from the dropdown
Results update in real-time

Sorting Records

Click on any column header to sort ascending/descending.

Exporting Data

Click CSV or JSON button in the toolbar
Choose save location in the dialog
Data is exported in your chosen format

Previewing Cell Content

Click on any cell in the data table
A preview panel appears showing the full content
For JSON objects, syntax highlighting is applied
Drag the resizer to adjust panel height
Toggle preview visibility with the eye icon in toolbar

📋 Requirements

Visual Studio Code: 1.78.0 or higher
Operating System: Windows, macOS, Linux
Avro Files: Supports uncompressed and compressed Avro files (deflate, snappy)

Note: Supports both uncompressed and compressed Avro files. Long type values are automatically converted to strings for JavaScript compatibility.

⌨️ Commands

Command	Description
`avro-explorer.open`	Open current file in Avro Explorer

Access via Ctrl+Shift+P (or Cmd+Shift+P on Mac):

Type "Avro Explorer"
Select the command

🛠️ Development

Prerequisites

Node.js 18+
npm or yarn
VSCode for testing

Setup

# Clone the repository
git clone https://github.com/winse/data-viewer

git clone https://github.com/winse/avro-explorer.git
cd avro-explorer

# Install dependencies
npm install

# Start development watch mode
npm run watch

Build

# Compile and bundle (development)
npm run compile

# Production build (generates .vsix)
npm run package

Project Structure

data-viewer/           # Shared UI components library
avro-explorer/
├── src/                     # Extension source (TypeScript)
│   ├── commands/           # VSCode commands
│   ├── webview/            # Message handlers and providers
│   └── extension.ts        # Extension entry point
├── webview/                # React WebView application
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── styles/         # CSS styles
│   │   └── utils/          # Utility functions
│   └── package.json        # Web dependencies
├── images/                 # Icons and assets
├── esbuild.config.js       # Bundler configuration
├── tsconfig.json           # TypeScript config (extension)
├── webview/tsconfig.json   # TypeScript config (webview)
└── package.json            # Extension manifest

Tech Stack

Extension: TypeScript + esbuild
WebView: React 18 + TypeScript
UI Framework: Blueprint 6 (Section, SectionCard, Table2)
Virtualized Table: @blueprintjs/table
Syntax Highlighting: Prism.js
Linting: ESLint + Prettier
data-viewer: Shared UI components library (used by both Parquet and Avro explorers)

📝 Extension Manifest

{
  "name": "avro-explorer",
  "displayName": "Avro Explorer",
  "publisher": "winse",
  "version": "0.5.1",
  "engines": {
    "vscode": "^1.78.0"
  },
  "categories": ["Visualization"],
  "keywords": ["avro", "explorer", "viewer", "data", "schema"],
  "activationEvents": [
    "onCustomEditor:avro-explorer.avroEditor",
    "onCommand:avro-explorer.open"
  ],
  "main": "./dist/extension.js",
  "contributes": {
    "commands": [...],
    "customEditors": [...]
  }
}

🤝 Contributing

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

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

🙏 Acknowledgments

Apache Avro - Data serialization format
Blueprint 6 - React UI framework
Prism.js - Syntax highlighting
Original avro-viewer by Yasunari Ota

Made with ❤️ by winse