DEV Community

Ekong Ikpe
Ekong Ikpe

Posted on

Gnoke Reader — A Universal Offline Document Viewer for Developers Who Work With Files

This is part of the Gnoke Suite — offline-first tools for developers.

The Problem

You open a .log → one app

A .env file → another

A .csv → Excel (slow for no reason)

A .diff → now you're stuck

Why are we still doing this in 2026?

Developers, writers, and technical people constantly deal with raw files — logs, configs, dumps, patches — but there’s no simple, offline-first, no-setup viewer that handles all of it cleanly in one place.

So I built one.

What I Built

Gnoke Reader — a universal offline document viewer that runs 100% in the browser.

Open it. Drop a file. Read instantly.

No upload. No account. No server.

If your file opens in a browser, Gnoke Reader should be able to read it.

Supported formats out of the box:

  • 📝 Markdown — rendered with syntax-highlighted code blocks
  • 📕 PDF — paged canvas renderer with keyboard navigation
  • 📘 Word Document (.docx) — clean HTML conversion
  • 📊 CSV / TSV — sortable table with row numbers and column count
  • { } JSON — collapsible tree viewer
  • 🖥️ Log files — level-aware colour coding (ERROR, WARN, INFO, DEBUG)
  • ⚙️ Config files (.ini, .cfg, .conf, .toml) — section + key/value colouring
  • 🔐 .env files — sensitive values masked by default, tap to reveal
  • 📋 Diff / Patch — added/removed line colouring with a stats bar
  • 🗄️ SQL — keyword syntax highlighting, zero runtime dependencies

Everything runs locally.

Search, font size control, dark/light mode, and recent files are built in.

Demo

🔗 Live: https://edmundsparrow.github.io/gnoke-reader

Drop a file → it opens instantly. No loading screens, no waiting.

On Android, you can share files directly into Gnoke Reader from your file manager — same way you’d share to WhatsApp or Drive.

Code

https://github.com/edmundsparrow/gnoke-reader

A universal offline document viewer — Portable. Private. Offline-first.

How I Built It

The entire app is vanilla HTML, CSS, and JavaScript — no framework, no build step.

The core is a plugin registry in reader-core.js.

Each format is a self-contained plugin that registers:

  • its file extensions
  • an icon
  • an optional CDN library (only if needed)
  • a render() function

When a file is opened, Gnoke Reader:

  1. Detects the extension
  2. Lazy-loads any required library (only once)
  3. Calls render()

That’s it. No framework gymnastics. No bundlers. Just the browser doing the work.

Interesting technical decisions

The most interesting parts were the zero-dependency formats:

  • SQL — custom character-by-character tokenizer handling strings, comments, and 150+ keywords across DDL, DML, functions, and types
  • .env — detects sensitive keys (PASSWORD, SECRET, TOKEN, API_KEY) and masks values by default with tap-to-reveal
  • Diff — parses unified diff format to generate a stats bar (files changed, additions, deletions) before rendering
  • Search — recursive DOM text-node walker; no indexing, no library, works across every format after render

Offline First, By Design

Files never leave the device.

Recent file metadata (name and date only — never content) is stored in localStorage.

The PWA share_target means Android users can send files directly into Gnoke Reader without installing anything beyond “Add to Home Screen.”


Gnoke Reader is basically a universal “open with…” for developers — but offline, private, and instant.

Top comments (0)