Vite + React + Webflow Cloud — Mortgage Calculator

A minimal mortgage calculator template: a Vite + React + TypeScript app served by a Hono worker on Cloudflare, configured for Webflow Cloud. Estimate your monthly payment, total interest, and amortization schedule with adjustable down payment, term, rate, taxes, insurance, and PMI.

Project structure

.
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.tsx
│   ├── globals.d.ts
│   ├── index.css
│   ├── main.tsx
│   ├── mortgage/
│   │   ├── AmortizationTable.tsx
│   │   ├── Chrome.tsx
│   │   ├── MortgageCalculator.tsx
│   │   ├── calc.ts
│   │   ├── defaults.ts
│   │   ├── format.ts
│   │   ├── mortgage.css
│   │   ├── types.ts
│   │   ├── webflowLogo.ts
│   │   └── __tests__/calc.test.ts
│   └── worker.ts
├── tsconfig.json
├── vite.config.ts
├── vitest.config.ts
├── webflow.json
├── worker-configuration.d.ts
└── wrangler.json

Commands

Command	Action
npm install	Install dependencies.
npm run dev	Start the Vite dev server at http://localhost:5173.
npm run build	Production-build the app to dist/.
npm run preview	Serve the production build locally.
npm run test	Run the Vitest unit tests for the mortgage logic.
npm run deploy	Deploys with webflow cloud deploy.

What's modeled

• Loan inputs: home price, down payment, term (10–30y), interest rate
• Recurring costs: yearly property tax, yearly home insurance
• PMI automatically applied when down payment is less than 20% of home price
• Amortization schedule: month-by-month breakdown of principal vs. interest, paginated by year
• Pure-function logic in src/mortgage/calc.ts with Vitest tests covering known textbook values, edge cases, and PMI rules

A small Hono worker (src/worker.ts) serves the built React app via the Cloudflare ASSETS binding.

Learn more

• Vite documentation
• Webflow Cloud