For most people over 50, the house is the biggest asset they own — and the one no ordinary calculator connects to the money they'll actually live on. This one does. It takes the choice you're weighing — keep it, downsize, or sell and rent — and shows the monthly retirement income each one really supports, after the mortgage, the selling costs, and the capital-gains tax. Drop it into your own article in one script tag, and it carries its own identity into your page.
Sibling of <retirement-calc-pension> — the same "turn one big asset into income for life" question, applied to a pension instead of a house.
See it in context
Here's exactly what that looks like — a live instance embedded inside a sample article, using someone else's fonts and colors, not ours. Themed light to blend into a light blog (it ships dark, on-brand, by default).
That's the exact <retirement-calc-home> widget, unmodified — same script tag, same engine as the full app. See the full picture → · Jump to the embed code ↓
A 60-year-old couple with $500K invested owns a $600K home carrying a $150K mortgage at a $1,500/mo payment, planning to retire at 62 and through 90. All the figures below are in today's dollars — real spending power, on top of Social Security, not inflated future numbers. Both the home and the savings are carried forward to retirement (the home appreciates, the nest egg grows at its real return). Keeping the house supports about $1,389/mo (a level average — the mortgage takes a bite until it pays off around age 72, then frees up, so it costs less than paying it for all of retirement). Downsizing to a ~$300K place frees about $134K of equity into the invested pool and drops the mortgage, lifting income to about $2,545/mo — the winner here. Selling and renting at $2,500/mo frees the full $437K of proceeds but the rent takes a chunk back, landing near $1,224/mo. With a low cost basis the gain sits under the $500K married exclusion, so there's no capital-gains tax on the sale. Those are the exact figures this calculator's engine returns for that plan — an illustration of the tradeoff, not a prediction.
Everything below is for embedding this calculator on your own site — integration code, theming, and events.
Pick colors that match your site, then copy the CSS snippet at the bottom. (Starts on a light palette — the calculator ships dark, so this previews the most common override.)
retirement-calc-home {
--rc-accent: #4f8ec9;
--rc-bg: #ffffff;
--rc-surf: #f7f9fc;
--rc-text: #1a1f2e;
}Drop this into your HTML:
<script src="https://app.retirementscenario.com/embed/v1/home.js"></script>
<retirement-calc-home></retirement-calc-home>Or pre-seed values relevant to your audience:
<retirement-calc-home
current-age="58"
retirement-age="65"
nest-egg="450000"
home-value="700000"
mortgage-balance="180000"
mortgage-monthly="1800"
repl-today="350000"
rent-monthly="2600">
</retirement-calc-home>| Attribute | Default | Range |
|---|---|---|
current-age | 60 | 45 – 74 |
retirement-age | 62 | current-age+1 – 85 |
life-expectancy | 90 | retirement-age+1 – 105 (plan-through age) |
nest-egg | 500000 | 0 – 20,000,000 (investable savings) |
return-pct | 5 | 0 – 12 (expected % return in retirement) |
home-value | 600000 | 0 – 20,000,000 (what the home is worth today) |
home-cost-basis | 0 | 0 – 20,000,000 (original price; 0 = skip, no capital-gains tax) |
mortgage-balance | 150000 | 0 – 20,000,000 (still owed) |
mortgage-monthly | 1500 | 0 – 50,000 (monthly payment) |
mortgage-rate | 6.5 | 0 – 15 (interest rate %) |
appreciation | 3.5 | 0 – 15 (home appreciation %/yr) |
repl-today | 300000 | 0 – 20,000,000 (downsize replacement price, today's $) |
rent-monthly | 2500 | 0 – 50,000 (monthly rent if you sell & rent) |
filing | married | married | single |
refsrc | (none) | partner attribution tag |
Set in the widget header: the married vs single toggle — it sets the Section 121 capital-gains exclusion applied to the sale ($500K married, $250K single). Everything else lives on the sliders, grouped into Your home, If you downsize, If you sell & rent, and Your retirement.
Honest scope: a focused single-person model, all in today's dollars — the monthly income figures are real spending power on top of Social Security and any pension (not your whole retirement income), and the home is grown at its real rate (appreciation above inflation) to its value around retirement, with the mortgage paid down to what's left by then. Property tax, insurance, and upkeep are excluded (they belong in general spending and are similar across the three choices); a plan through age 90 by default. Doesn't model Social Security, a spouse's separate income, taxes beyond the home-sale gain, ACA subsidies, or moving costs — the full app handles households, Social Security, real taxes, and ACA. A projection, not a prediction. No data leaves the browser.
The widget ships dark (on-brand for our own articles). Override CSS custom properties on the host to match your site — for a light blog, set the surface/text vars:
retirement-calc-home {
--rc-accent: #4f8ec9; /* primary — slider thumb, CTA, winning card */
--rc-accent2: #3dd68c; /* positive/secondary accent (most-income winner) */
--rc-bg: #ffffff; /* card background */
--rc-surf: #f7f9fc; /* sub-surface (result area, slider track) */
--rc-border: rgba(20,30,50,0.10);
--rc-text: #1a1f2e;
--rc-muted: #6a7280;
--rc-red: #f05c5c; /* reserved accent */
--rc-amber: #f59e0b; /* reserved accent */
--rc-font: inherit; /* pick up your page's font */
}The element emits two custom events you can listen to (both bubble + composed, so they cross the shadow boundary):
document.querySelector('retirement-calc-home')
.addEventListener('rc-calculated', (e) => {
console.log('Best choice:', e.detail.best); // 'keep' | 'downsize' | 'sell'
console.log('Best income ($/mo):', e.detail.bestIncome);
console.log('Keep income ($/mo):', e.detail.keepIncome);
console.log('Downsize income ($/mo):', e.detail.downsizeIncome);
console.log('Sell & rent income ($/mo):', e.detail.sellIncome);
console.log('Net sale proceeds ($):', e.detail.netProceeds);
console.log('Inputs:', e.detail.inputs);
});
document.querySelector('retirement-calc-home')
.addEventListener('rc-cta-clicked', (e) => {
console.log('User clicked CTA to:', e.detail.url);
});