Cassi Lup 🐺

Posted on Mar 31

I Built 31 Free Financial Calculators with Embeddable Widgets — Here's How

#showdev #webdev #javascript #nextjs

I recently built FinCruncher — a collection of 31 free financial calculators. No accounts, no tracking, no ads. Just calculators.

I wanted to share the technical approach, especially the embeddable widget system that lets anyone add these calculators to their own site with a single line of HTML.

The Stack

Next.js with static export (output: 'export')
Tailwind CSS for styling
jsPDF for client-side PDF generation
Cloudflare Workers for IP-based geolocation
Hosted on a Linode VPS behind Cloudflare CDN

Everything runs client-side. Your financial data never leaves your browser.

The Calculators

31 calculators covering mortgage, compound interest, credit card payoff, retirement savings, debt payoff, ROI, income tax, car insurance, and more. Three of them (mortgage, income tax, car insurance) have state-specific versions for all 50 US states + DC — that's 153 additional pages with localized data.

Each calculator includes:

Interactive visualizations (charts, amortization tables)
PDF download of results (Letter/A4 format toggle)
Mobile-friendly responsive design
Structured data for SEO

The Embeddable Widget System

This is the part I'm most proud of. Any calculator can be embedded on any website with one line:

<iframe 
  src="https://fincruncher.com/embed/tariff-impact-calculator/" 
  width="100%" height="700" frameborder="0"
  style="border:none;border-radius:12px;max-width:680px;" 
  loading="lazy">
</iframe>

How it works architecturally

Next.js route groups made this clean. The main site lives under (main)/ and the widgets live under (widgets)/:

src/app/
├── (main)/           ← Full site with header, footer, analytics
│   ├── layout.tsx    ← robots: index, follow
│   └── calculators/
│       └── mortgage-calculator/
└── (widgets)/        ← Minimal wrapper, no chrome
    ├── layout.tsx    ← robots: noindex (don't index iframes)
    └── embed/
        └── mortgage-calculator/

The (widgets) layout strips everything — no header, no footer, no analytics. Just the calculator component with a small "Powered by FinCruncher" link at the bottom. Both route groups share the same calculator components, so there's zero code duplication.

The "Powered by" backlink

Every embed includes a subtle footer link back to FinCruncher. This is the growth flywheel — every site that embeds a calculator gives us a permanent backlink. Calculator.net grew significantly through this exact strategy.

The Tariff Impact Calculator

The most timely one: it estimates how 2025-2026 US tariffs affect household budgets, using Yale Budget Lab data. You can adjust by income level and spending category (groceries, electronics, automotive, etc.).

Try it: fincruncher.com/calculators/tariff-impact-calculator

State Detection with Cloudflare Workers

For the state-specific calculators, I built a tiny Cloudflare Worker that returns the visitor's US state from their IP:

export default {
  async fetch(request) {
    const cf = request.cf || {};
    return new Response(JSON.stringify({
      region: cf.region || null,
      country: cf.country || null,
      city: cf.city || null,
    }), {
      headers: { "Content-Type": "application/json" }
    });
  },
};

The StateSelector component calls this on mount and auto-selects the user's state. Simple, fast, no third-party API needed.

Want to embed a calculator?

All embed codes are at fincruncher.com/embed. The source code for the embed examples is on GitHub: github.com/cassilup/fincruncher-embeds.

If you're building a personal finance blog, real estate site, or anything where a mortgage/compound interest/tariff calculator would be useful — feel free to embed them. No API key, no signup, completely free.

Happy to answer questions about the architecture, the static export approach, or the embed system!

DEV Community