DEV Community

doremi
doremi

Posted on

I built 200 single-file HTML tools — zero dependencies, no build step, under 1MB total

#showdev

Today I launched something that goes against every modern web development convention.

200 tools. Each one is a single HTML file. No React. No build step. No npm packages. Total size: under 1MB.

The entire collection loads in under 1 second and works offline once cached.

Here's how I built it, why I did it, and what I learned.

The Problem

I was tired of visiting a simple calculator website and waiting 10 seconds for React to hydrate. A revenue calculator doesn't need a 2MB JavaScript bundle. It needs to just work.

So I decided to build 200 tools that prove this point.

The Architecture

Every tool is a self-contained HTML file:

tools/
├── break-even-calculator.html
├── mrr-dashboard.html
├── content-calendar-planner.html
├── pricing-strategy-calculator.html
└── ... (200 files total)
Enter fullscreen mode Exit fullscreen mode

Each file contains:

  • Inline HTML structure
  • Inline CSS (no external stylesheets)
  • Inline JavaScript (no external scripts)
  • localStorage for data persistence
  • Canvas API for charts

Zero external dependencies. Not even a Google Fonts import.

The Tech Stack (or Lack Thereof)

Layer Technology
Structure HTML5
Styling CSS3 (Grid + Flexbox)
Logic Vanilla JavaScript (ES6+)
Persistence localStorage
Charts Canvas API
Hosting Netlify (free tier)

Total dependencies: 0
Total size: ~700KB for all 200 tools
Average tool size: ~3.5KB

Why Pure HTML?

  1. Speed — No hydration, no bundle splitting, no code splitting. Just open and use.
  2. Reliability — No CDN failures, no version conflicts, no broken npm packages.
  3. Privacy — No tracking, no analytics, no external requests. Everything runs locally.
  4. Accessibility — Works on any device with a browser. Even a 10-year-old laptop.
  5. Maintainability — Each tool is one file. Find the bug, fix the bug, done.

The Challenges

Building 200 tools without frameworks wasn't easy:

  • No component reuse — Every tool had its own HTML, CSS, and JS. No shared components.
  • Manual testing — No automated test suite. Each tool tested manually across browsers.
  • Code duplication — Similar utilities (date formatting, number formatting) copied across files.
  • Bundle size anxiety — Every byte counted. No dead code elimination, so I wrote only what was needed.

What I Built

The tools cover 6 categories:

Revenue & Finance (40+ tools)

Break-even calculator, MRR dashboard, pricing strategy, LTV/CAC, churn rate, and more.

Content & Marketing (45+ tools)

Content calendars, blog title generators, landing page copy, email sequences, hashtag strategies.

SEO & Analytics (25+ tools)

Meta generators, keyword analysis, content gap analysis, traffic estimators.

Business & Strategy (30+ tools)

Business model canvas, SWOT analysis, customer personas, OKR tracking.

AI & Automation (35+ tools)

Prompt engineering, customer journey mapping, revenue simulation.

Launch & Productivity (25+ tools)

Launch metrics, daily planning, time blocking, productivity scoring.

The Results

After launching today:

  • Load time: < 1 second (measured)
  • Total size: ~700KB (vs. 2-5MB for a typical React app)
  • Tools: 200 (all functional, all tested)

Would I Do It Again?

Absolutely. For this use case — simple, interactive tools — the modern web dev stack is overkill. Not every tool needs a framework.

The best tool is the one that works instantly.

Try It

200 Free AI Tools for Solopreneurs

No signup. No paywall. No dependencies.

I'd love to hear from the dev community: Have you built anything without frameworks recently? What's your take on the "everything needs React" mentality?

Top comments (0)