/ concept-collection / mdshare
Sign in
concept-collection / mdshare
main
Branches
main
mdshare
Go to fileHistoryFork
Code
Clone with HTTP

Anyone can clone. Pushing asks for a username and a token.

Download main
Source as zipSource as tar.gz
Jeremy Magland mdshare: markdown editor with the document stored in the URL 3e0fff3 1 Commits
.githubmdshare: markdown editor with the document stored in the URL
publicmdshare: markdown editor with the document stored in the URL
srcmdshare: markdown editor with the document stored in the URL
.gitignoremdshare: markdown editor with the document stored in the URL
.oxlintrc.jsonmdshare: markdown editor with the document stored in the URL
index.htmlmdshare: markdown editor with the document stored in the URL
package-lock.jsonmdshare: markdown editor with the document stored in the URL
package.jsonmdshare: markdown editor with the document stored in the URL
README.mdmdshare: markdown editor with the document stored in the URL
tsconfig.app.jsonmdshare: markdown editor with the document stored in the URL
tsconfig.jsonmdshare: markdown editor with the document stored in the URL
tsconfig.node.jsonmdshare: markdown editor with the document stored in the URL
vite.config.tsmdshare: markdown editor with the document stored in the URL
README.md

mdshare#

A markdown editor whose document lives entirely in the URL. Type markdown on the left, see it rendered on the right, and share the page by copying the link: the text is compressed and encoded into the URL fragment, so there is no server, no account, and nothing is uploaded.

Live: https://concept-collection.github.io/mdshare/

What it renders#

  • LaTeX math, inline ($...$) and display ($$...$$), via remark-math and KaTeX
  • Fenced code blocks with per-language syntax highlighting (highlight.js) and a copy button
  • GitHub-flavored markdown: tables, task lists, strikethrough, footnotes, autolinks
  • Mermaid diagrams in ```mermaid fences (the mermaid library is loaded lazily, only when a document uses one)

Raw HTML in the document is deliberately rendered as text rather than passed through. Since any document can arrive via a shared link, HTML passthrough would let a link author run script in the viewer's browser.

How the URL encoding works#

The document is stored in the hash fragment as

#base64url( version byte + DEFLATE(utf8 text) )

The fragment is never sent to any server, and base64url needs no percent-escaping, so links survive copy and paste through chat clients and email. A one-byte version header leaves room to change the encoding later without breaking old links. Editing updates the URL in place (via replaceState, debounced) so the address bar always holds a shareable link; the length of the current URL is shown in the top bar.

A typical page of prose with a few equations compresses to a URL of roughly one to two thousand characters. Browsers handle URLs far longer than that, but some other software truncates very long links, so the length indicator is worth a glance before sharing a large document.

Development#

npm install
npm run dev     # local dev server
npm run build   # typecheck + production build to dist/

Deployment to GitHub Pages is automatic on push to main via .github/workflows/deploy.yml.