HaveInsights FlowCraft
FlowCraft · Live demo

FlowCraft Mortgage Calculator

A monthly payment broken into principal and interest, property tax, insurance, PMI and HOA fees, with total interest, the payoff date and a year-by-year schedule. It runs the same app.js that comes with the paid component.

Sample figures. The 6.5% rate, tax and insurance are example values for this demo, not a loan offer or financial advice. Nothing you enter here is saved or sent.

Try it

  1. Set the price and down payment. Type dollars or a percent; the other box keeps in step.
  2. Pick a term and rate. Try 10% down to see PMI appear, and when it drops off.
  3. Read the breakdown. Then open the year-by-year schedule to see the balance fall to $0.
A family home with a For Sale sign, next to a home loan document with checked items

Mortgage calculator

What would your monthly payment be?

Change any number and the payment updates as you type. (Sample figures.)

$450,000
$
Down payment
$
%
Loan term
%

Example rate, not a quote. Your rate depends on your credit, the lender and the market.

Taxes, insurance & fees

Estimated monthly payment

$2,838

on a 30-year loan of $360,000

  • Principal & interest$2,275
  • Property tax$413
  • Home insurance$150

Total interest

$459,160

Paid off

Sep 2056

Total of payments

$819,160

Down payment

$90,000

No PMI: the down payment is 20% or more.

Year-by-year schedule
YearPrincipalInterestBalance

We'll reply with a personalized quote based on the numbers above. No spam.

Estimates only, for illustration. The interest rate is an example, not a loan offer.

How it works

The same math lenders use

All of the logic lives in app.js, written in plain JavaScript and commented so a junior developer can follow every step.

  1. Principal and interestThe standard fixed-rate formula. A $400,000 loan at 6.5% over 30 years gives $2,528.27 a month, the same as any bank calculator.
  2. Everything else in the paymentProperty tax, insurance and HOA fees are added, and PMI when the down payment is under 20%.
  3. Month by monthThe loan is walked payment by payment to find the total interest, the payoff date and the exact month PMI drops off at 78% of the price.

Honest by design: the rate is an example you set, and the calculator says so next to the rate box and under the results. Live rates would need a paid data feed and a server, and presenting a rate as an offer can bring lending-ad disclosure rules into play.

<section data-mortgage
  data-mode="mortgage"
  data-currency="USD"
  data-locale="en-US"
  data-pmi-threshold="20"
  data-pmi-cancel-ltv="78">

<!-- car or personal loan: no tax, PMI or HOA -->
<section data-mortgage data-mode="loan">
Starting values are just the value on each input, so changing a default is a one-number edit. Any currency and number format works through Intl.

What the full version includes

Delivered as a ZIP download through Payhip.

  • index.htmlCalculator, results panel, year-by-year schedule and quote form, styled with Tailwind CSS
  • app.jsThe payment math, PMI drop-off, amortization schedule, loan mode and quote form, heavily commented
  • style.cssPrice slider, term buttons, payment bar and number flash
  • assets/images/A sample house illustration, plus README.txt and an optional .htaccess

Requirements

  • Your own example figures. Set a typical rate, tax and insurance for your area, and keep the "example rate, not a quote" notes visible.
  • Any web host, or none. The page also works when index.html is opened directly from your computer. No server code, database or API key.
  • A form endpoint to receive leads (optional). Any service that accepts a JSON POST, for example Formspree, Make or Zapier. Until you add one, the quote form sends nothing and says so.
  • An internet connection for visitors. Tailwind CSS loads from its public CDN. No npm install or build step.

Get the Mortgage Calculator

Start with the free static shell to check the layout, or get the full version with the working calculator you just tried.

Free

Free Static HTML Shell

The layout: header image, inputs, payment breakdown, schedule and quote form, so you can review the design and markup.

  • Complete visual layout with the sample image
  • Sample structure and markup
  • Does not include the calculation or form logic
Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Mortgage Calculator — $97

The working calculator you just tried, ready for your own figures.

  • Payment split into principal and interest, tax, insurance, PMI and HOA
  • PMI that drops off at 78% of the price, plus total interest and payoff date
  • Year-by-year schedule, loan mode for car and personal loans, any currency
  • Quote form sends each visitor's email and numbers to your form service
Buy the Full Mortgage Calculator — $97

Checkout and download are handled by Payhip.

Back to the FlowCraft catalogue to see the other components.