<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: lsj</title>
    <description>The latest articles on DEV Community by lsj (@misterlsj).</description>
    <link>https://dev.to/misterlsj</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3874286%2F3f356153-589a-4495-9ce2-3d4676054ac4.jpeg</url>
      <title>DEV Community: lsj</title>
      <link>https://dev.to/misterlsj</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/misterlsj"/>
    <language>en</language>
    <item>
      <title>I built a FIRE calculator in a single HTML file. Here's the math.</title>
      <dc:creator>lsj</dc:creator>
      <pubDate>Sun, 12 Apr 2026 02:46:38 +0000</pubDate>
      <link>https://dev.to/misterlsj/i-built-a-fire-calculator-in-a-single-html-file-heres-the-math-dca</link>
      <guid>https://dev.to/misterlsj/i-built-a-fire-calculator-in-a-single-html-file-heres-the-math-dca</guid>
      <description>&lt;p&gt;Every FIRE calculator I found wanted my email. Or showed ads. Or tried to sell me a "personalized retirement plan" for $29/month.&lt;/p&gt;

&lt;p&gt;I just wanted the math.&lt;/p&gt;

&lt;p&gt;So I built one. Single HTML file, zero dependencies, 32KB. &lt;a href="https://github.com/coastfirehub/fire-calculator" rel="noopener noreferrer"&gt;Open source on GitHub&lt;/a&gt;, MIT license. &lt;a href="https://coastfirehub.com" rel="noopener noreferrer"&gt;Try it here&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The two formulas that matter
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FIRE Number = Annual Spending / Safe Withdrawal Rate
Coast FIRE Number = FIRE Number / (1 + Real Return Rate)^Years to Retirement
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it. The Trinity Study (1998) says you can safely withdraw 4% per year in retirement. The S&amp;amp;P 500 has returned ~10% nominally since 1926, inflation eats ~3%, so real return is ~7%.&lt;/p&gt;

&lt;p&gt;Run the numbers for a 30-year-old who spends $40K/year and wants to retire at 65:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;FIRE Number: $40,000 / 0.04 = $1,000,000&lt;/li&gt;
&lt;li&gt;Coast FIRE Number: $1,000,000 / (1.07)^35 = $93,676&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ninety-four thousand dollars. If you're 30 and have that much invested right now, you never need to save another dollar. Compound interest does the rest over 35 years.&lt;/p&gt;

&lt;p&gt;That number gets bigger the longer you wait. At 40, it's $244K. At 50, it's $453K. Time is the variable that costs the most when you waste it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why zero dependencies
&lt;/h2&gt;

&lt;p&gt;I wanted the calculator to be embeddable. Blogs, personal finance sites, forums — anyone should be able to drop it in with an iframe or just download the HTML file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;iframe&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"https://coastfirehub.com/embed/coast-fire-calculator.html"&lt;/span&gt;
        &lt;span class="na"&gt;width=&lt;/span&gt;&lt;span class="s"&gt;"100%"&lt;/span&gt; &lt;span class="na"&gt;height=&lt;/span&gt;&lt;span class="s"&gt;"600"&lt;/span&gt;
        &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"border:1px solid #E2E8F0;border-radius:12px;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/iframe&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That meant no build step, no npm, no framework. Vanilla JS with inline styles. The code isn't pretty. But it loads fast and runs anywhere.&lt;/p&gt;

&lt;p&gt;No CDN calls. No analytics. No tracking. Your financial data stays in your browser.&lt;/p&gt;

&lt;h2&gt;
  
  
  From one file to a full app
&lt;/h2&gt;

&lt;p&gt;The single HTML file is still maintained as an &lt;a href="https://github.com/coastfirehub/fire-calculator" rel="noopener noreferrer"&gt;open source repo&lt;/a&gt;. But it also grew into &lt;a href="https://coastfirehub.com" rel="noopener noreferrer"&gt;CoastFIRE Hub&lt;/a&gt; — a Next.js app with 5 calculator types (Coast, Barista, Fat, Lean, and a Grid lookup by age), projection charts, URL parameter sharing, and a Chrome extension.&lt;/p&gt;

&lt;p&gt;The math stays in one file (&lt;code&gt;lib/calculations.ts&lt;/code&gt;) and gets synced across the web app, the standalone HTML, and the Chrome extension. One source of truth.&lt;/p&gt;

&lt;p&gt;One thing I didn't expect: open-sourcing the calculator logic did more for user trust than any feature. People running their retirement numbers want to see the formula first. Reasonable.&lt;/p&gt;




&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://coastfirehub.com" rel="noopener noreferrer"&gt;CoastFIRE Hub&lt;/a&gt; — full web app&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/coastfirehub/fire-calculator" rel="noopener noreferrer"&gt;fire-calculator&lt;/a&gt; — the single HTML file, MIT license&lt;/li&gt;
&lt;li&gt;&lt;a href="https://chromewebstore.google.com/detail/agmdimecpccgnnicfdofjbnlhkehidkm" rel="noopener noreferrer"&gt;Chrome Extension&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>javascript</category>
      <category>finance</category>
      <category>opensource</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
