| Housing Loan — Desktop | Housing Loan — Mobile |
|---|---|
![]() |
![]() |
| Investment Analysis — Desktop | Investment Analysis — Mobile |
![]() |
![]() |
Japan Real Estate Studio is a compact, production-grade web tool for two closely related financial problems: mortgage planning and investment yield analysis — tailored to the Japanese real estate market.
It is a zero-build, zero-dependency static site that runs entirely in the browser, designed for Chinese, Japanese, and English-speaking users looking at Japan property.
| Feature | Description |
|---|---|
| Reverse Loan Calc | Estimate affordable property price from a monthly budget |
| Forward Loan Calc | Estimate monthly repayment from a given property price |
| Investment Analysis | Gross/net yield, NOI, CCR, DCR, FCR, K%, leverage judgment |
| Tax Simulation | Depreciation, loss offset, tax savings, after-tax cash flow |
| 5 Market Presets | Tokyo 23-ku, Yokohama, Tokyo suburbs, Osaka, regional properties |
| Quick / Advanced Mode | 5 basic inputs or expand to full 16-parameter analysis |
| Interactive Tooltips | Click any metric label for a plain-language explanation; mobile-friendly bottom sheet |
| Trilingual UI | Chinese, Japanese, English — switch in one click, ~300 i18n keys |
| Chart Breakdowns | Donut charts for principal/interest/fees composition with toggle controls |
| Local Persistence | Inputs, language, and active mode saved to localStorage |
No frameworks. No bundlers. No node_modules. Just vanilla HTML/CSS/JS served as static files.
graph TB
Browser["🌐 Browser"]
subgraph UI["UI Layer"]
LoanUI["🏠 script.js — Loan UI"]
InvestUI["📊 invest.js — Investment UI"]
Tooltip["💡 tooltip.js — Tooltip System"]
end
subgraph Engine["Calculation Engine"]
LoanCalc["🧮 calc.js — Mortgage Math"]
InvestCalc["📈 invest-calc.js — Investment Math"]
end
subgraph Shared["Shared Modules"]
I18n["🌍 i18n.js — ZH / JA / EN"]
Format["🔢 format.js — Formatting"]
end
Storage[("💾 localStorage")]
Browser --> LoanUI
Browser --> InvestUI
Browser --> Tooltip
LoanUI --> LoanCalc
InvestUI --> InvestCalc
InvestUI -.-> LoanCalc
LoanUI --> I18n
InvestUI --> I18n
Tooltip --> I18n
LoanUI --> Format
InvestUI --> Format
LoanUI --> Storage
InvestUI --> Storage
This project is zero-build — open it directly in a browser.
git clone https://github.com/hakupao/loan_simulation.git
cd loan_simulationThen open index.html, or serve it with any static server:
python -m http.server 8000
# visit http://localhost:8000loan_simulation/
├── index.html # Page layout, semantic structure, tab navigation
├── styles.css # Visual design, responsive layout, animations
├── script.js # Housing loan UI: form handling, charts, persistence
├── calc.js # Mortgage formulas & numeric helpers
├── format.js # Number formatting & display units
├── invest.js # Investment UI: presets, result rendering, state
├── invest-calc.js # Investment engine: yield, NOI, depreciation, tax, CF
├── tooltip.js # Interactive tooltip system with mobile bottom sheet
├── i18n.js # Translation dictionaries (~300 keys, 3 languages)
├── _headers # Cache-control for static deployment
└── assets/
├── preview-desktop.png
├── preview-mobile.png
├── preview-invest-desktop.png
└── preview-invest-mobile.png
How It Works
- Monthly budget minus fixed fees = amount available for loan repayment
- Annuity formula converts repayment amount back to loan principal
- Add down payment to estimate affordable property price
- Loan principal = property price - down payment
- Monthly repayment calculated from rate and term (annuity formula)
- Fixed monthly fees added to show true monthly outlay
- Revenue: Monthly rent x 12, minus vacancy loss = effective gross income
- Expenses: Management fee + repair reserve + PM fee + property tax + insurance
- NOI: Effective rent - operating expenses
- Debt service: Monthly loan payment x 12 (annuity formula)
- Cash flow (pre-tax): NOI - annual debt service
- Depreciation: Building value / remaining useful life. Remaining life calculated from building age and statutory life by structure type (RC: 47yr, Steel: 34yr, Light steel: 27yr, Wood: 22yr)
- Tax analysis: Rental income = NOI - depreciation - interest. If negative, loss offset applies against salary income, generating tax savings at marginal rate
- Cash flow (after-tax): Pre-tax CF + tax savings (or - tax liability)
- Key metrics: Gross/net yield, CCR, DCR, FCR, K%, yield gap (FCR - K%), leverage determination
Every financial metric label is clickable. On click, a tooltip popover explains the concept in the user's selected language.
- Desktop: Popover appears above the label with auto-positioning
- Mobile: Bottom sheet slides up with a drag handle, dimmed backdrop
The tooltip system is self-contained in tooltip.js and pulls translations from the tooltips namespace in i18n.js.
| Preset | Price | Rent | Rate | Term | Structure | Profile |
|---|---|---|---|---|---|---|
| Tokyo 23-ku | 2,800万 | 10.5万/mo | 1.65% | 35yr | RC 5yr | Stable low-risk |
| Yokohama Central | 2,200万 | 9.5万/mo | 1.80% | 30yr | RC 10yr | Balanced metro |
| Tokyo Suburbs | 1,500万 | 7.5万/mo | 2.20% | 25yr | RC 20yr | Value play |
| Osaka Central | 1,800万 | 8.5万/mo | 2.00% | 30yr | RC 15yr | Moderate |
| Regional Old | 600万 | 4.5万/mo | 3.50% | 15yr | Wood 25yr | High yield + tax offset |
- Housing loan calculator (forward + reverse)
- Investment analysis with 5 market presets
- Trilingual interface (ZH / JA / EN)
- Interactive tooltip explanations with mobile bottom sheet
- Responsive layout for all devices
- localStorage persistence
- PDF export for analysis results
- Dark mode / theme switching
- Multi-year cash flow projection chart
- Side-by-side property comparison mode
- Adjustable tax rate brackets
- Monetary inputs use
万円as the unit (1万円 = 10,000 JPY) - Investment tax calculations are first-year estimates; consult a tax professional for actual filing
- Housing loan mode is a simplified estimator for fast decision support
- Taxes, insurance, bank-specific screening, and edge-case fees are not included in housing loan mode
Built as a public product sample and portfolio-ready micro-tool by hakupao.



