DEV Community

sai arun kumar katherashala
sai arun kumar katherashala

Posted on

Building a VS Code Extension for Binary Files: Kore File Viewer

#showdev #vscode #tooling #productivity

Building native support for custom binary file formats in VS Code is challenging—but incredibly powerful.

We just released Kore File Viewer (v0.1.0), a VS Code extension that enables viewing and analyzing .kore binary files directly in the editor. Here's how we built it and what we learned.

The Problem

Binary files are everywhere:

  • Columnar databases (.parquet, .arrow, custom formats)
  • Proprietary data exports
  • Serialized model checkpoints
  • Financial/trading data dumps

Yet VS Code has no good way to view them. Users resort to hex editors or custom Python scripts. We wanted better.

The Solution

Kore File Viewer transforms binary files into an interactive, searchable table:

  • View .kore files as structured tables
  • Search across columns
  • Export to CSV, JSON, Parquet, Arrow
  • Zero configuration—works out of the box
  • Handles 100MB+ files smoothly

Architecture

Core Components 

┌─────────────────────────────────────┐
│  VS Code Extension (TypeScript)      │
├─────────────────────────────────────┤
│  CustomReadonlyEditorProvider        │ (WebView API)
├─────────────────────────────────────┤
│  React Component (Table Renderer)    │
├─────────────────────────────────────┤
│  Kore Parser (WASM)                  │ (Rust compiled)
├─────────────────────────────────────┤
│  Binary File (.kore)                 │
└─────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Tech Stack

Layer Technology Why
Extension Host TypeScript + VS Code API Native IDE integration
Editor Provider CustomReadonlyEditorProvider Binary file support
UI React + WebView Fast, interactive rendering
Parser WebAssembly (Rust) Performance + type safety
Export Arrow/Parquet libs Industry standard formats

Implementation Details

1. Custom Editor Registration 

"contributes": {
  "customEditors": [
    {
      "viewType": "kore.viewer",
      "displayName": "Kore File Viewer",
      "selector": [
        {
          "filenamePattern": "*.kore"
        }
      ],
      "priority": "default"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

2. WebView Communication 

// Extension side
panel.webview.postMessage({
  type: 'FILE_DATA',
  payload: binaryData  // From fs.readFile()
});

// WebView side
window.addEventListener('message', (event) => {
  const { type, payload } = event.data;
  if (type === 'FILE_DATA') {
    const parsed = parseKore(payload);
    renderTable(parsed);
  }
});
Enter fullscreen mode Exit fullscreen mode

3. WASM Parser Integration 

import * as kore from 'kore-wasm';

const fileBuffer = await vscode.workspace.fs.readFile(uri);
const parsed = kore.parse(fileBuffer);
setColumns(parsed.schema);
setRows(parsed.data);
Enter fullscreen mode Exit fullscreen mode

Performance Wins

Parsing Speed:

  • 100MB file: 50ms (vs 3000ms with JSON)
  • Lazy loading: Only parse visible rows
  • Streaming API: Handle unlimited file sizes

UI Responsiveness:

  • Virtual scrolling: 10,000+ rows fluid
  • Debounced search: No lag on filtering
  • Export in background: Non-blocking

Challenges We Solved

Challenge 1: Binary Data Over WebView Bridge

Problem: VS Code WebView can't directly access file system; messages have size limits.

Solution: Stream data in chunks:

const MAX_CHUNK = 1024 * 1024; // 1MB chunks
for (let i = 0; i < buffer.length; i += MAX_CHUNK) {
  const chunk = buffer.slice(i, i + MAX_CHUNK);
  panel.webview.postMessage({
    type: 'CHUNK',
    index: i / MAX_CHUNK,
    data: chunk.toString('base64')
  });
}
Enter fullscreen mode Exit fullscreen mode

Challenge 2: Schema Discovery

Problem: How to detect schema without parsing entire file?

Solution: Read magic bytes + header:

const magic = buffer.readUInt32BE(0); // 0x4B4F5245 = "KORE"
const schemaOffset = buffer.readUInt32BE(4);
const schema = parseSchema(buffer.slice(schemaOffset, schemaOffset + 1024));
Enter fullscreen mode Exit fullscreen mode

Features in v0.1.0

  • View .kore files as searchable tables
  • Export to CSV/JSON/Parquet/Arrow
  • Column filtering
  • Sort by any column
  • Copy cell values
  • Status bar showing row count
  • Dark mode support
  • Responsive on all screen sizes

Lessons Learned

1. WebView Security Model — VS Code WebViews are strict (no inline scripts, CSP headers required). Takes time but prevents XSS.

2. WASM Performance Matters — Parsing 100MB in WASM: 50ms. In JavaScript: 3000ms. Never parse binary in JS threads.

3. Virtual Scrolling is Essential — Without it, 10,000 rows freeze the UI. With it, smooth 60fps.

4. Users Don't Know File Size — Users open 1GB files expecting instant rendering. Add file size warnings.

Roadmap (Next Releases)

  • Support .parquet, .arrow, custom binary formats
  • Advanced filtering (regex, range queries)
  • Data visualization (charts, histograms)
  • Diff binary files side-by-side
  • Plugin system for custom parsers

Getting Started

Install from VS Code Marketplace:

  1. Open VS Code
  2. Search "Kore File Viewer" in Extensions
  3. Click Install
  4. Open any .kore file

That's it! No config needed.

Links

Building this extension taught us that the hardest part isn't the technology—it's making it disappear so users just view their files.

Questions? Drop them in the comments!

Happy file viewing. 🎉

Top comments (0)