The Chrome extension you wished existed. Drop in a
.md,.mdx,.json,.jsonc,.sql,.prisma, or.dbmlfile and watch it render exactly how you want — beautifully, instantly, and 100% on your machine. No cloud. No account. No tracking. No bloat.
Every existing markdown viewer for Chrome is either abandoned, buggy, Manifest V2-only, or limited to raw text with a few bullet points. Filemark is built by people who read markdown and JSON every day — and got tired of every alternative.
This is the file reader Chrome should have shipped with.
- Why Filemark
- What you can open
- Features that other viewers can't touch
- Install
- AI skill — teach your coding agent filemark syntax
- Usage
- Custom components in markdown
- Keyboard shortcuts
- Options & customization
- How Filemark compares
- Build from source
- Frequently asked questions
- Roadmap
Every markdown extension in the Chrome Web Store is stuck in 2018. Most of them:
- Can't render tables properly
- Silently drop task lists, math, or code blocks
- Have no search, no tabs, no library — every file is a one-off drag
- Haven't been updated since Manifest V2 (and will stop working soon)
- Bundle ads and trackers
- Break on anything that isn't
README.md
Filemark was built because reading beautifully formatted documents locally should be a solved problem. It renders every edge case correctly, treats your files as a library instead of disposable drops, and ships a design that stays out of your way.
One extension. Nine formats. Every format with its own first-class renderer — not a fallback to highlighted text.
| Format | Extensions | What you get |
|---|---|---|
| Markdown | .md, .markdown |
Full GitHub-flavored rendering — tables, task lists, math, syntax-highlighted code, Mermaid diagrams, callouts, tabs, collapsibles, a table of contents, and persistent task checkboxes |
| MDX | .mdx |
Markdown plus HTML-style components — Callouts, Tabs, Details, database diagrams — without any JavaScript evaluation trickery |
| JSON | .json |
A real, interactive tree viewer — not a prettified blob. Collapse, expand, click-to-copy, nine themes, handles multi-megabyte files |
| JSONC | .jsonc |
Like JSON but with comments and trailing commas. Parse errors pinpointed to the line and column |
| CSV | .csv |
An interactive sortable + filterable grid with type inference, delimiter autodetect, and copy-as-CSV/MD/JSON — not a wall of comma-separated text |
| TSV | .tsv |
Same engine as CSV, with tab as the default delimiter |
| SQL | .sql |
Drop any Postgres, MySQL, SQLite, Supabase, CockroachDB, ClickHouse, BigQuery, Snowflake, or MariaDB schema — get an interactive ER diagram |
| Prisma | .prisma |
Your Prisma schema, rendered as a live ER diagram. Models, enums, relations, indexes — all visible at a glance |
| DBML | .dbml |
The clean schema DSL from dbdiagram.io — now right in your browser |
Every file can also be viewed in a syntax-highlighted raw source mode (toggle with R) with soft-wrap and one-click copy.
- Real GitHub-flavored markdown — tables, task lists, strikethrough, autolinks, footnotes, and everything else you'd expect on GitHub.com
- Math — both inline (
$E=mc^2$) and block ($$…$$), with a typesetter that's as good as academic papers - Mermaid diagrams — flowcharts, sequences, state machines, class diagrams, gantt charts, pies, mindmaps. With pan, zoom, and fullscreen
- Interactive database schema diagrams — drop a SQL or Prisma file, get a zoomable ER diagram you can actually read
- Syntax-highlighted code blocks — thirty-plus languages with a theme that matches the rest of the UI
- Custom components — Callouts (five variants), Tabs, Collapsible details — all usable in your markdown with simple HTML-like syntax
- YAML frontmatter — rendered as a compact metadata card, not shown as raw text in the body
- Task-list checkboxes that actually toggle and persist — tick a box, reload, it's still ticked
- Drag & drop anything — one file, ten files, a whole folder with thousands of files, a folder dragged from Finder or Explorer
- Open Folder — pick a directory and Filemark walks it, builds a tree, and remembers permission so it auto-reconnects on reload
- Tabs — open multiple files, flip between them, reorder. Each tab has a stable URL you can share
- Full-text search — hit ⌘K, find any string across every loaded file in under 100 ms
- Per-folder filter — every folder in the sidebar has its own inline filter so you can drill into 500-file folders without losing your place
- Star & recents — pin the files you live in. Recents keep their order so muscle memory works
- Live file editing — turn on auto-refresh and the rendered view updates every two seconds as you edit the file in your editor
- Three themes — light (default), dark, sepia — plus typography controls: serif vs. sans vs. mono, font size, line height, content width
- Distraction-free fullscreen — one keypress hides the sidebar and tab bar
- Deep-linkable headings — click any Table of Contents entry, grab the URL, and it reopens right there on the same line
- Copy-pasteable state — every open file has a URL. Paste it in Slack; the recipient opens the exact same view
- Your files never leave your machine — there is no server. No telemetry. No analytics pixel. Not even a phone-home for updates
- Local-first by default — everything lives in your browser's own storage; settings sync through Chrome's own secure sync if you're signed in
- Manifest V3-native — built for Chrome's current extension platform, not the one that's being deprecated
- Hardened against strict CSP — honors the strictest content security policy Chrome enforces; no
unsafe-eval, no remote scripts - Fast cold-start — the viewer is open before other extensions finish loading
- Options page with sensible defaults and every knob exposed: theme, indent, collapse depth, font, shortcuts
- Per-format disable — don't want Filemark handling your
.jsonfiles? Flip a toggle, Chrome's default kicks back in - Per-shortcut disable — every keyboard shortcut individually togglable, plus a master off
- Reset to defaults — one click, no reinstall
One click. Then, to render local files, open chrome://extensions → Filemark → Details → enable Allow access to file URLs (see below).
Prefer to build it yourself? Loading the unpacked extension takes 30 seconds:
-
Clone and build
git clone https://github.com/thesatellite-ai/filemark.git cd filemark pnpm install pnpm build -
Open
chrome://extensions -
Toggle Developer mode on (top-right corner)
-
Click Load unpacked and select the folder
apps/chrome-ext/dist -
The Filemark icon appears in your toolbar. Click it — you're in.
To make Filemark take over when you navigate straight to a local file:
- On
chrome://extensions, click Details on Filemark - Flip on Allow access to file URLs
- Visit
file:///Users/you/notes/README.md— it renders automatically, and the URL becomes shareable
This toggle is OFF by default and there is no way around it.
file:///*access lets any extension read every file on your disk, so Chrome (and Chromium-based browsers like Edge, Brave, Opera) force a manual, per-extension opt-in. No manifest key or permission prompt can pre-enable it. Filemark declaresfile:///*in its manifest, but you still have to flip the switch once.Symptom if it's off: a local
.mdopens but shows only bare content — no toolbar, sidebar, or tabs — and the console logsUnsafe attempt to load URL file://… 'file:' URLs are treated as unique security origins. Enabling Allow access to file URLs fixes it.After updating Filemark from the store, fully quit and reopen the browser so the new version actually runs — the version number can update before the running bundle does.
Filemark ships an AI skill — a single Markdown file that teaches Claude Code, Cursor, Codex, or any SKILL.md-aware agent how to author filemark-rendered docs: the two HTML-in-markdown survival rules, every custom component (<Callout>, <Tabs>, <Details>, <Stats>, <ADR>, <Datagrid>, <Chart>, <Kanban>, <TaskList>, <TaskStats>, <TaskTimeline>), the full task-bullet sigil grammar, the filter DSL, and the gotchas that normally take a debugging session to discover.
Install into any project with skills.sh:
# From the root of the project you want the skill available in:
npx skills add thesatellite-ai/filemarkOr clone + symlink manually if you prefer:
# global Claude Code skill:
mkdir -p ~/.claude/skills
curl -sL https://raw.githubusercontent.com/thesatellite-ai/filemark/main/skills/filemark/SKILL.md \
-o ~/.claude/skills/filemark/SKILL.md
# or per-project:
mkdir -p .claude/skills/filemark
curl -sL https://raw.githubusercontent.com/thesatellite-ai/filemark/main/skills/filemark/SKILL.md \
-o .claude/skills/filemark/SKILL.mdOnce installed, the skill auto-loads the moment the agent is asked to edit a .md / .mdx file that will be viewed in filemark — no manual invocation needed.
Three ways to open a file. Pick whichever fits your habits.
Paste or click any file:///path/to/something.md. Filemark intercepts it, renders beautifully, and rewrites the URL into a copyable, shareable form. The fastest path for documentation you keep bookmarked.
Drop one file, many files, or a whole folder from Finder / Explorer onto the viewer. Filemark reads the folder's real absolute path automatically — so features like "Open in VS Code" and "Reveal in Finder" light up without you configuring anything.
Click Open Folder in the top-right. Pick a directory. Filemark walks it, collects every supported file, and keeps the folder remembered across browser restarts.
Rich components, in plain markdown, with zero build step on your end.
<Callout type="tip" title="Pro tip">
Use <kbd>⌘K</kbd> to search across every open file.
</Callout>Types: note, tip, info, warning, danger. Leave blank lines inside the
component so markdown inside still renders.
<Tabs>
<Tab label="npm">
npm install filemark
</Tab>
<Tab label="pnpm">
pnpm add filemark
</Tab>
</Tabs><Details summary="Click to expand">
Hidden content goes here. Markdown inside works with blank lines.
</Details>Fence a block with ```mermaid:
```mermaid
flowchart LR
Drop[Drop file] --> Render[Rendered view]
```Or fence a schema with ```schema, ```prisma, or ```dbml and get an interactive ER diagram in the middle of your docs.
Fence any block with ```csv or ```tsv and it renders as a sortable,
filterable, resizable grid:
```csv type:priority=status(P0:danger,P1:warn,P2:info) type:owner=avatar agg:revenue=sum title="Q2 roadmap" sort=priority row-numbers selection group-by=priority
id,title,priority,owner,revenue
T-1,Ship datagrid core,P0,Ada Lovelace,12500
T-2,Wire forms,P1,Grace Hopper,3400
T-3,Theme v2,P2,Margaret Hamilton,2200
```18+ rich column types (status, tags, avatar, checkbox, rating,
progress, currency(USD), percentage, filesize, date, relative,
url, email, phone, color, sparkline, icon, country, duration,
range, code-block, json, image, id). Multi-column sort
(shift-click), typed filter UIs per column, row selection + bulk copy
(CSV / MD / JSON to clipboard), column resize + auto-fit, pinned columns,
aggregation footer, row grouping, row-expansion detail panel, density
toggle, full-screen view, raw-source toggle, URL-sync for shareable views.
Prefer a component-style invocation:
<Datagrid src="./team.csv"
title="Team"
sort="name"
id-column="id"
row-numbers="true"
meta="type:status=status type:avatar=avatar" />src= accepts relative paths (resolved via the folder handle) or
absolute URLs (fetched directly — host_permissions: ["<all_urls>"]
in the manifest bypasses CORS). See examples/datagrid-full.md for the full
info-string grammar in worked examples.
---
title: My Document
description: A short summary
tags: [getting-started, tutorial]
---
# Body content starts hereRenders as a compact metadata card — title, subtitle, tag pills, and a grid for everything else.
<Chart src="./metrics.csv" type="line" x="month" y="revenue,expenses" title="Q1 burn" />Or fence a block with ```bar, ```line, ```pie, ```area, ```scatter, ```funnel, or ```radar. Inline data, recharts under the hood, formatters + by-pivot + tags supported. See examples/chart-full.md.
<Kanban src="./roadmap.csv" group-by="status" card-title="title" />Or feed it a markdown task list with <Kanban md group-by="status" /> — same data, no separate CSV. See examples/kanban-full.md.
Every - [ ] bullet picks up filemark's task DSL:
- [ ] Ship payments v2 @alice !p0 ~2026-05-10 (launch) #infra ^task-pay-v2
- [/] Refactor parser @grace !p1 &2h
- [x] Project kickoff @aman =2026-04-22Sigils: @owner !p0..p4 ~due ^stable-id (project) #tag &estimate every:weekly after:^id. Six statuses ([ ] [/] [x] [!] [?] [-]). Then project them into views:
<TaskStats md></TaskStats>
<TaskList filter="is:open AND priority<=p1" group-by="owner" sort="priority:asc"></TaskList>
<Kanban md group-by="status"></Kanban>
<TaskTimeline md lane="owner"></TaskTimeline>Plus a cross-file Task Panel in the chrome extension (⌘T) that aggregates tasks across every opened doc with filter / group / scope / search. See examples/tasks-full.md.
Fence any block with ```mindmap and get a real interactive mindmap — pan, zoom, fullscreen, KaTeX-in-nodes, frontmatter directives:
```mindmap height=560 Quarterly themes
- Q3 — Visualize
- Charts
- Kanban
- Q3 — Plan
- DocBlock
- OKRtree
```Mouse wheel zooms, click-drag pans, + / - / 0 / F keyboard shortcuts. See examples/mindmap-full.md for 13 worked patterns.
Single <DocBlock> with kind= smart presets covers PRFAQ / RFC / Pitch / PostMortem / MeetingNotes / DailyNote:
<DocBlock kind="rfc" status="proposed" id="RFC-0042" date="2026-04-25" title="Adopt filemark for all planning docs">
### Status
### Context
### Proposal
### Alternatives
### Risks
### Decision
</DocBlock>kind="prfaq" for press-release-first, kind="pitch" for Shape-Up, kind="postmortem" (with severity="sev2"), kind="meeting" (with attendees="alice,bob"), kind="daily" (with mood="focused"), or no kind= for a custom block. See examples/planning-v2-full.md.
<WeightedScore title="Pick the next infra investment">
<Criterion name="Effort" weight="2" inverse />
<Criterion name="Impact" weight="3" />
<Option name="Refactor parser" scores="3,4" />
<Option name="Cache layer" scores="2,3" />
<Option name="Rewrite from 0" scores="5,5" />
</WeightedScore>
<Matrix2x2 x-axis="Effort" y-axis="Impact" title="Roadmap candidates">
<Item x="0.2" y="0.9">Quick win</Item>
<Item x="0.85" y="0.85">Big bet</Item>
</Matrix2x2>
<DecisionTree question="Should we migrate?">
<Branch label="yes">…</Branch>
<Branch label="no">Stay on current platform.</Branch>
</DecisionTree>
<FiveWhys problem="The deploy on 2026-04-22 broke production">
<Why>The migration ran out of order.</Why>
<Why>The deploy script doesn't sequence migrations.</Why>
…
</FiveWhys>Plus <OKRtree> (with task-derived progress %), <Roadmap> (now/next/later columns), <Timeline> (date axis with lanes), <Backlinks> (inbound [[wikilink]] panel), <DocStatus> (inline status pill), and <ReadingTime> (auto-counted minutes chip). See examples/planning-v2-tier2.md and examples/planning-v2-tier3.md.
Every component above has a worked showcase in examples/. Open examples/INDEX.md for the per-component catalogue with one-line use cases — or open the live playground at https://khanakia.com/apps/filemark/demo and pick from the sidebar.
All bare keys, all gated against inputs so you can type freely in the search or filter boxes. All individually configurable on the options page.
| Action | Shortcut |
|---|---|
| Search | ⌘K |
| Toggle sidebar | ⌘B |
| Toggle Table of Contents | \ |
| Fullscreen viewer | F |
| Rendered ↔ Raw source | R |
| Next tab | ] |
| Previous tab | [ |
| Close tab | X |
| Jump to tab n | 1–9 |
| Focus folder filter | / |
| Close overlays / exit fullscreen | Esc |
Click the gear in the top-right, or visit
chrome://extensions → Filemark → Extension
options. Everything syncs across your Chrome profiles automatically.
- File formats — enable / disable each of the seven formats individually
- JSON viewer — theme (nine choices), collapse depth, long-string truncation, indentation, data-type badges, size hints, clipboard icons
- Keyboard shortcuts — per-shortcut on/off plus a master disable
- Appearance — light / dark / sepia, font family, size, line height, content width
| Filemark | Most markdown extensions | Online viewers | Obsidian / VS Code | |
|---|---|---|---|---|
| MV3-native | ✅ | — | — | |
| GitHub-flavored markdown | ✅ | ✅ | ✅ | |
| MDX custom components | ✅ | ❌ | ❌ | |
| KaTeX math | ✅ | ❌ | ✅ | |
| Mermaid diagrams | ✅ | ❌ | ✅ (plugin) | |
| Interactive JSON tree | ✅ | ❌ | ❌ | |
| JSONC with comments | ✅ | ❌ | ❌ | |
| SQL / Prisma → ER diagram | ✅ | ❌ | ❌ | |
| Tabs across files | ✅ | ❌ | ❌ | ✅ |
| URL-shareable state | ✅ | ❌ | ❌ | |
| Full-text search across files | ✅ | ❌ | ❌ | ✅ |
| 100% local, no cloud | ✅ | ❌ | ✅ | |
| No account needed | ✅ | ✅ | ❌ | ✅ |
| Zero-friction install | ✅ | ✅ | ✅ | ❌ |
| Auto-refresh while you edit | ✅ | ❌ | ❌ | ❌ |
Requirements: Node 20+, pnpm 9+, a recent Chrome.
git clone https://github.com/thesatellite-ai/filemark.git
cd filemark
pnpm install
# watch-rebuild while you edit
pnpm dev
# production build
pnpm buildThe output lives in apps/chrome-ext/dist/. Reload the Filemark card at
chrome://extensions after each production build.
Is any of my data sent anywhere?
No. Filemark runs entirely in your browser. No server, no telemetry, no analytics. Your settings sync through Chrome's own storage.sync, which Google end-to-end encrypts when you have sync enabled.
Does it work offline? Yes. Once installed there is zero network dependency for rendering.
Why doesn't Filemark edit files? Filemark is a reader — optimized for showing your content at its best. An opt-in editable raw mode is planned. For editing, use your editor; for reading, use Filemark. Turn on auto-refresh and you get the best of both: edit in your editor, watch it update here live.
Can I open really big files? Yes. JSON files up to 1 MB render with full expansion; above that, the tree renders collapsed for speed. Very large markdown files render fine — scroll and search both work on 500-page documents.
Can I customize the keyboard shortcuts? You can turn each shortcut on or off individually. Full chord rebinding (VS Code-style) is on the roadmap.
Will it replace VS Code / Obsidian? For editing, no. For reading local markdown and JSON, for most developers, yes — Filemark opens faster, looks better, handles schemas and JSON natively, has a real tabs + library UX, and doesn't need a separate app launch.
What about security?
Filemark is Manifest V3-native with the strictest content security policy Chrome enforces. It does not use unsafe-eval, does not run remote scripts, and does not require any permissions beyond storage. Folder access is governed by the browser's File System Access API and is revocable at any time.
How do I trust the code? Filemark is open source. Read the source, audit the manifest, watch the network traffic. What you see is what you get.
Can I use it in an air-gapped / offline environment?
Absolutely — install it from source, unpack the build, distribute the dist/ folder internally. No network calls are made after installation.
- Editable raw source mode — edit files straight from the viewer with full syntax highlighting
- Code-file renderer —
.ts,.tsx,.js,.jsx,.py,.rsand friends, with line anchors and copy-link - Standalone
.csv/.tsvviewer — reusing the datagrid (already shipped inside markdown) - YAML / TOML renderers — first-class structured viewers, not just syntax highlighting
- Image viewer — zoom, pan, pixel-peep for
.svg,.png,.jpg,.webp - ORM schema auto-detection — Drizzle, TypeORM, Sequelize, MikroORM, Kysely
- Link graph / backlinks between markdown files
- VS Code-style keyboard rebinding with chord capture and conflict detection
- Full MDX with JavaScript expressions via a sandboxed iframe
- VS Code extension — the same renderers inside a VS Code webview: live preview, open-to-the-side, two-way editor↔preview scroll sync, double-click-to-source, interactive task checkboxes that write back to the file, a GitHub-preview toggle, and a workspace task tree. See
apps/vscode. (Not yet on the Marketplace.)
Built for people who read a lot of markdown.
Local-first · MV3-native · The Satellite AI.