<h1>How to Self-Host Developer Tools Without a Backend</h1>
<p><em>Learn how to build and self-host powerful developer tools using only HTML, CSS, and JavaScript — no server, no dependencies, no build step.</em></p>
<hr />
<h2>The Problem</h2>
<p>Every developer needs a collection of utility tools:
- JSON formatter/validator
- Regex tester
- Base64 encoder/decoder
- Password generator
- QR code generator
- Markdown editor
- Color gradient generator</p>
<p>The common solutions:
1. <strong>Online tools</strong> — privacy risk (send your data to someone else's server)
2. <strong>Desktop apps</strong> — platform-specific, heavy dependencies
3. <strong>VS Code extensions</strong> — locked into one editor</p>
<p>There's a fourth option: <strong>single-file HTML tools that run entirely in your browser.</strong></p>
<h2>Why This Approach Wins</h2>
<h3>Zero Dependencies</h3>
<p>No npm install, no build step, no Node.js runtime. Just one <code>.html</code> file.</p>
<h3>Privacy-First</h3>
<p>Everything runs client-side. Your API keys, passwords, and data never leave your machine.</p>
<h3>Portable</h3>
<p>Copy the file to a USB drive, deploy to any web server, or open directly from your filesystem.</p>
<h3>Customizable</h3>
<p>You own the code. Change the UI, add features, remove what you don't need.</p>
<h3>Free and Open</h3>
<p>No subscriptions, no accounts, no tracking.</p>
<h2>The Architecture</h2>
<p>Every tool follows the same pattern — one self-contained HTML file:</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tool Name</title>
<style>
:root {
--bg: #0d1117;
--surface: #161b22;
--border: #30363d;
--text: #c9d1d9;
--accent: #58a6ff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }
textarea {
width: 100%;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem;
font-family: 'Fira Code', monospace;
font-size: 14px;
}
button {
background: var(--accent);
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<!-- Tool UI -->
</div>
<script>
// All logic here
document.addEventListener('DOMContentLoaded', () => {
// Initialize
});
</script>
</body>
</html>
</code></pre>
<p>That's it. One file. Everything is self-contained.</p>
<h2>Building a JSON Formatter</h2>
<p>Let's walk through building a JSON formatter — one of the most commonly needed developer tools.</p>
<h3>Step 1: The UI</h3>
<pre><code class="language-html"><div class="container">
<h1>JSON Formatter</h1>
<textarea id="input" placeholder="Paste your JSON here..." rows="8"></textarea>
<div class="actions">
<button onclick="formatJSON()">Format</button>
<button onclick="minifyJSON()">Minify</button>
<button onclick="copyOutput()">Copy</button>
</div>
<h3>Output</h3>
<textarea id="output" readonly rows="8"></textarea>
<div id="status"></div>
</div>
</code></pre>
<h3>Step 2: The Logic</h3>
<pre><code class="language-javascript">function formatJSON() {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
const status = document.getElementById('status');
try {
const parsed = JSON.parse(input);
output.value = JSON.stringify(parsed, null, 2);
status.textContent = '✓ Valid JSON';
status.style.color = '#3fb950';
} catch (e) {
output.value = '';
status.textContent = `✗ Invalid JSON: ${e.message}`;
status.style.color = '#f85149';
}
}
function minifyJSON() {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
try {
const parsed = JSON.parse(input);
output.value = JSON.stringify(parsed);
document.getElementById('status').textContent = '✓ Minified';
} catch (e) {
document.getElementById('status').textContent = `✗ ${e.message}`;
}
}
function copyOutput() {
const output = document.getElementById('output');
output.select();
navigator.clipboard.writeText(output.value);
document.getElementById('status').textContent = '✓ Copied!';
}
</code></pre>
<h3>Step 3: Add Keyboard Shortcuts</h3>
<pre><code class="language-javascript">document.addEventListener('keydown', (e) => {
// Ctrl+Enter to format
if (e.ctrlKey && e.key === 'Enter') {
e.preventDefault();
formatJSON();
}
// Ctrl+Shift+M to minify
if (e.ctrlKey && e.shiftKey && e.key === 'M') {
e.preventDefault();
minifyJSON();
}
});
</code></pre>
<h2>Deploying</h2>
<p>You have three options:</p>
<h3>Option 1: Local File</h3>
<p>Just double-click the <code>.html</code> file. It works immediately.</p>
<h3>Option 2: Self-Host on Your Server</h3>
<pre><code class="language-bash"># Deploy to nginx
sudo cp json-formatter.html /var/www/tools/
sudo systemctl reload nginx
</code></pre>
<p>Access at <code>http://your-server/tools/json-formatter.html</code></p>
<h3>Option 3: Cloudflare Pages (Free)</h3>
<pre><code class="language-bash"># Push to GitHub
git add json-formatter.html
git commit -m "Add JSON formatter"
git push
# Connect Cloudflare Pages to your repo
# Set build command: none
# Set output directory: .
</code></pre>
<h2>Building a Full Suite</h2>
<p>Here's what I built and deployed — all as single HTML files:</p>
<table>
<thead>
<tr>
<th>Tool</th>
<th>Use Case</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>JSON Formatter</td>
<td>Validate/format JSON</td>
<td>~4KB</td>
</tr>
<tr>
<td>Regex Tester</td>
<td>Test regular expressions</td>
<td>~6KB</td>
</tr>
<tr>
<td>Base64 Tool</td>
<td>Encode/decode base64</td>
<td>~3KB</td>
</tr>
<tr>
<td>QR Code Generator</td>
<td>Generate QR codes</td>
<td>~15KB</td>
</tr>
<tr>
<td>Password Generator</td>
<td>Create secure passwords</td>
<td>~4KB</td>
</tr>
<tr>
<td>Markdown Editor</td>
<td>Edit markdown with preview</td>
<td>~8KB</td>
</tr>
<tr>
<td>Kanban Board</td>
<td>Task management</td>
<td>~12KB</td>
</tr>
<tr>
<td>CSS Gradient Generator</td>
<td>Build CSS gradients</td>
<td>~7KB</td>
</tr>
<tr>
<td>CSV to JSON</td>
<td>Convert CSV data</td>
<td>~5KB</td>
</tr>
<tr>
<td>Note-Taker</td>
<td>Markdown notes app</td>
<td>~10KB</td>
</tr>
</tbody>
</table>
<h2>Why This Matters</h2>
<p>In a world of SaaS subscriptions and cloud dependencies, self-hosted tools give you:</p>
<ol>
<li><strong>Control</strong> — your data stays yours</li>
<li><strong>Reliability</strong> — no API rate limits, no outages</li>
<li><strong>Privacy</strong> — no tracking, no data collection</li>
<li><strong>Cost</strong> — free, forever</li>
<li><strong>Customization</strong> — modify anything, anytime</li>
</ol>
<h2>The K1R4 Example</h2>
<p>I built and deployed 18 such tools on a single $49 VPS. No backend, no database, no build system. Just HTML files served by nginx.</p>
<p>The entire setup:
- <strong>Domain:</strong> k1r4.space (Cloudflare)
- <strong>Server:</strong> nginx (Debian 13)
- <strong>SSL:</strong> Let's Encrypt via Cloudflare
- <strong>Monitoring:</strong> Cron job checking health every 30 minutes
- <strong>Analytics:</strong> Zero (no tracking)</p>
<p>All tools at: <a href="https://k1r4.space">k1r4.space/tools</a></p>
<h2>Getting Started</h2>
<p>Want to build your own? Start with one tool you use daily. A JSON formatter, a regex tester, a color picker — something small.</p>
<p>The pattern is always the same:
1. HTML structure
2. CSS styling
3. JavaScript logic
4. Test in browser
5. Deploy</p>
<p>No framework required. No build step. Just code.</p>
<hr />
<p><em>All tools mentioned in this article are available at <a href="https://k1r4.space">k1r4.space</a>. They're free, open-source, and require no account.</em></p>
<p><em>What's your favorite self-hosted developer tool? Share it in the comments.</em></p>
← Back to all posts