The Smallest Shippable Tool

Most side projects die in setup: install this, configure that, deploy something, fix the deployment. The tool in this article skips all of it. It is one HTML file. It runs in a browser tab. It needs no server, no install, and no account — and it is genuinely useful: a notes app with live markdown preview and a share link.

That constraint is the point. When a tool is one file, there is nothing between a stranger and trying it. No signup wall, no download, no “works on my machine.” You send a link, they open it, it works. That zero-friction opening is the whole reason small browser tools travel further than bigger apps: the cost of trying is zero, so the cost of passing it on is zero too.

The Full Code — Copy It, Run It, Share It

Paste this into a new browser editor and open it. Type in the left box, watch the preview update, click “Copy share link,” and send that link to someone. They will see your note — and the tool itself.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick Notes</title>
<style> body { font-family: system-ui, sans-serif; max-width: 720px; margin: 2rem auto; padding: 0 1rem; } textarea { width: 100%; height: 160px; font: 1rem/1.5 monospace; } #preview { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; margin-top: 1rem; } button { padding: 0.5rem 1rem; margin-top: 0.5rem; cursor: pointer; }
</style>
</head>
<body>
<h1>Quick Notes</h1>
<textarea id="notes" placeholder="Write markdown: # heading, **bold**, - list item"></textarea>
<div id="preview"></div>
<button id="share">Copy share link</button>
<p id="status"></p>
<script> var box = document.getElementById('notes'); var preview = document.getElementById('preview'); var status = document.getElementById('status'); function render() { var html = box.value.replace(/&/g, '&').replace(/</g, '<'); html = html.replace(/^### (.*)$/gm, '<h3>$1</h3>'); html = html.replace(/^## (.*)$/gm, '<h2>$1</h2>'); html = html.replace(/^# (.*)$/gm, '<h1>$1</h1>'); html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>'); html = html.replace(/^- (.*)$/gm, '<li>$1</li>'); html = html.replace(/\n/g, '<br>'); preview.innerHTML = html; try { localStorage.setItem('quick-notes', box.value); } catch (e) {} } box.addEventListener('input', render); document.getElementById('share').addEventListener('click', function () { var link = location.origin + location.pathname + '#n=' + btoa(encodeURIComponent(box.value)); navigator.clipboard.writeText(link).then(function () { status.textContent = 'Share link copied. Send it to anyone.'; }); }); if (location.hash.indexOf('#n=') === 0) { try { box.value = decodeURIComponent(atob(location.hash.slice(3))); } catch (e) {} } else { box.value = localStorage.getItem('quick-notes') || '# Welcome
Type **markdown** here.'; } render();
</script>
</body>
</html>

Read it once and you understand the whole app. The textarea holds the note. The render function escapes HTML first (so a pasted tag cannot break the page), then converts headings, bold, and list lines with small replacements. localStorage keeps your own note between visits. The share button encodes the note into the URL hash, so the link itself carries the content — no database, no account, no backend.

Why This Spreads (and What “Viral” Honestly Means)

Let us be honest: sharing a tool does not guarantee it goes viral. Most things do not. What the share-link pattern gives you is a loop instead of a lottery ticket. Every person who receives a note also receives the tool. If they like it, they write their own note and share it, and now two people are distributing it. The tool is the message and the medium at the same time.

That loop only works if three things are true. First, the tool must work on first open — no setup, no broken state, no empty screen that needs instructions. Second, it must solve one job a stranger recognises instantly: notes with preview, not “a productivity platform.” Third, sharing must be one click, not an export workflow. This app passes all three, which is why it is a good first tool even though it is small. Small is the feature.

Test the Share Before You Post It

Before you send the link anywhere, open it yourself in a fresh browser window — ideally a private window, where you are not logged into anything. Does the note appear? Does the preview render? Does the page work when the note is long, or when it contains characters like quotes and ampersands? The escaping step in the render function exists precisely for that last case: without it, a pasted snippet containing a tag could break the preview or, worse, run as page markup. Test with an ugly note, not a pretty one. A tool that survives a messy first open is a tool strangers will trust, and trust is what makes someone forward a link instead of closing the tab.

Also check the link on a phone. Most shares happen on mobile, and a tool that is unreadable on a small screen will not travel no matter how clever the idea is. The stylesheet here is deliberately plain — a readable font, a sensible width, no layout tricks — because plain renders everywhere. Fancy can come later, after people actually use it.

Make It Yours in an Afternoon

  • Change the job. Swap notes for a grocery list, a workout log, or a snippet collector. The structure stays the same; only the placeholder text and the heading change.
  • Add one feature, not ten. A word count, a dark mode toggle, or a download button. Each addition is a reason to share it again — “now with word count” is a post, not just an update.
  • Share the tool, not a screenshot. A screenshot asks people to imagine using it. A link lets them use it. Post the link where people already share notes and snippets, with one sentence about what it does.
  • Keep the file single. The moment you split it into a build step and a deployment, you have raised the cost of every future share. Stay boring until the tool earns complexity.

CoderFile is built for exactly this loop: code that runs in the browser across 34+ executable languages and 120+ syntax-highlighted languages, with shareable snippet links. Paste the app into the editor, run it, then share your version — and remember the free tier covers 10 saved snippets and 20 executions a day, which is plenty for a tool this size. The next person who opens your link is not just a reader. They are your distribution.