file-browser

Solid

Local HTTP server that renders markdown, code, text, JSON, CSV/TSV/XLSX tables, HTML, PDF, images, video, and audio in the browser. Persistent left tree sidebar with vim keybindings (j/k/h/l/gg/G/Enter/o), filter (/), theme toggle (T), and folder open/collapse persistence per tab. Markdown dispatches to a novel-theme reader (Mermaid, plan nav, ToC scroll-spy); code/text dispatches to a highlight.js view with line numbers + copy button; CSV/TSV/XLSX dispatches to a tabular view; HTML renders in a sandboxed iframe; PDF dispatches to a custom minimal viewer built on the pdfjs-dist PDFViewer component (toolbar: prev/next, page input, zoom, search, download); images/video/audio get a gallery + single-view with Range-aware streaming. One server, one port, one CLI.

Data & Documents 7 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 84/100

Stars 20%
30
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# file-browser One local HTTP server, one port, one CLI - handles markdown, images, video, and audio. Dispatches by file extension at the `/view` route: markdown goes to the novel-theme reader; image/video/audio go to the media viewer. ## Installation ```bash cd $HOME/skills/skills/file-browser && npm install ``` **Dependencies:** `marked`, `highlight.js`, `gray-matter` (markdown), `pdfjs-dist` (PDF viewer), `read-excel-file` (XLSX tables). Media rendering is zero-dep - browser does the work. `npm install` runs a `postinstall` hook that copies pdfjs-dist runtime deps (worker, cmaps, fonts, wasm helpers) from `node_modules/pdfjs-dist/` into `assets/pdfjs-viewer/`. If you ran `npm install --ignore-scripts`, populate the assets manually: ```bash node $HOME/skills/skills/file-browser/scripts/install-pdfjs-assets.cjs ``` ## Quick Start ```bash # Single file (auto-detects markdown vs media) node $HOME/skills/skills/file-browser/scripts/server.cjs --file ./plan.md --open node $HOME/skills/skills/file-browser/scripts/server.cjs --file ./photo.png --open node $HOME/skills/skills/file-browser/scripts/server.cjs --file ./demo.mp4 --open # Folder (gallery + Documents section) node $HOME/skills/skills/file-browser/scripts/server.cjs --dir ~/plans --open # Background mode (returns JSON envelope on stdout) node $HOME/skills/skills/file-browser/scripts/server.cjs --file ./README.md --background # Stop all running file-browser servers node $HOME/skills/skills/file-browser/scripts/s...

Details

Author
vanducng
Repository
vanducng/skills
Created
4 months ago
Last Updated
today
Language
HTML
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

html-canvas

Build rich, polished SINGLE-FILE HTML deliverables — explainers, reference pages, concept/architecture visualizations, use-case kits, multi-section documents — with a light/dark theme toggle, a DE/EN language toggle, tasteful animations, and DESIGN.md-driven tokens, all offline with zero dependencies. Use whenever the user wants content turned into a good-looking HTML page or kit, or says 'create an HTML page', 'visualize this as HTML', 'explainer', 'html kit', 'single-file html', 'html with light and dark', 'theme toggle', 'language toggle', 'analyze this repo as an explainer' — even if unnamed. Ships a copy-paste shell, a section-block catalog, an animation layer, optional JS behaviours, a DESIGN.md→CSS token generator, and a parallel-builder workflow. NOT for live Bridge ops dashboards (bridge-dashboard), repo/ecosystem maps (bridge-explorer), or slide decks / styled emails / PDFs / marketing landing pages (use the dedicated skills if your Bridge ships them).

8 Updated today
bks-lab
Data & Documents Listed

html-report

Parse data files of many formats — CSV/TSV, Excel (.xlsx), SQLite, JSONL/NDJSON, JSON, Markdown, plain text, and log files — and generate a stunning, self-contained, single-file HTML experience that visualizes the data: a Three.js animated hero, GSAP scroll animations, Tailwind styling, column-profiled data tables with search/sort/pagination, histograms and time-series charts, a markdown reading view with outline navigation, a filterable log viewer, and a collapsible tree explorer for arbitrary JSON. Use this skill whenever the user uploads or points at a data file (spreadsheet, export, database, document, log) and wants to "visualize", "explore", "browse", "display", or "turn into a webpage" that data, or asks for an interactive "report", "page", "dashboard", "viewer", or "UI" for it — even if they don't say "HTML" explicitly. Not for static image asks ("infographic", "poster image", "PNG I can share") — that is the separate infographic skill. Ships a five-style design bank (dark glass, editorial light, brut

7 Updated 3 weeks ago
costiash
Data & Documents Listed

eliviz

Parse data files of many formats — CSV/TSV, Excel (.xlsx), SQLite, JSONL/NDJSON, JSON, Markdown, plain text, and log files — and generate a stunning, self-contained, single-file HTML experience that visualizes the data: a Three.js animated hero, GSAP scroll animations, Tailwind styling, column-profiled data tables with search/sort/pagination, histograms and time-series charts, a markdown reading view with outline navigation, a filterable log viewer, and a collapsible tree explorer for arbitrary JSON. Use this skill whenever the user uploads or points at a data file (spreadsheet, export, database, document, log) and wants to "visualize", "explore", "browse", "display", "make a dashboard/report/viewer/UI for", or "turn into a webpage" that data — even if they don't say "HTML" explicitly. Ships a five-style design bank (dark glass, editorial light, brutalist, terminal CRT, neon cyberpunk) that is auto-picked per dataset, and pairs with the design-adapter agent for custom branding, new moods, or blended styles.

0 Updated today
Doreenperemptory25