✦ Embeddable · v1

An embeddable retirement calculator that answers one question.

What's your honest safe withdrawal rate? Drop a single script tag into your site, then use <retirement-calc-swr> as a custom HTML element anywhere on the page. Compare your plan's actual sustainable rate against the static 4% rule — at FIRE-length horizons the 4% rule is too aggressive; at shorter horizons it's too conservative.

Sibling of <retirement-calc-age> — same engine, different question.

Live demos

Default (single, defaults)

Themed (orange accent, FIRE-leaning household, pre-seeded)

Preview your theme

Pick colors that match your site, then copy the CSS snippet at the bottom.

Theme colors

Accent color Big number, slider thumb, CTA button

#4f8ec9

Card background Outer surface of the calc

#ffffff

Inner surface Result area + toggle background

#f7f9fc

Text color Title, slider values, result subline

#1a1f2e

retirement-calc-swr {
  --rc-accent: #4f8ec9;
  --rc-bg: #ffffff;
  --rc-surf: #f7f9fc;
  --rc-text: #1a1f2e;
}

Integration code

Drop this into your HTML:

<script src="https://app.retirementscenario.com/embed/v1/swr.js"></script>

<retirement-calc-swr></retirement-calc-swr>

Or pre-seed values relevant to your audience:

<retirement-calc-swr
  plan-type="household"
  current-age="45"
  retirement-age="50"
  nest-egg="2000000"
  life-expectancy="95"
  spouse-current-age="43"
  spouse-retirement-age="50"
  spouse-life-expectancy="97">
</retirement-calc-swr>

Attributes

Attribute	Default	Range
`plan-type`	single	`single` or `household`
`current-age`	65	35 – 80
`retirement-age`	65	currentAge – 80 (retiring today valid)
`nest-egg`	1000000	100,000 – 10,000,000 (portfolio at retirement)
`life-expectancy`	90	retirementAge + 5 – 100 (defines retirement horizon)
`spouse-current-age`	63	35 – 80 (household only)
`spouse-retirement-age`	63	spouseCurrentAge – 80 (household only)
`spouse-life-expectancy`	92	spouseRetirementAge + 5 – 100 (household only)
`refsrc`	(none)	partner attribution tag

Honest scope: Portfolio-only — Social Security and other guaranteed income would let you spend more. The portfolio-only framing matches the original Trinity Study + Bengen 4% rule assumption, so the comparison is apples-to-apples. 85% confidence target over your actual retirement horizon (retirementAge to lifeExpectancy). Engine assumes 3% inflation. Compare to the static 4% rule's 95%-confidence-over-30-years framing.

Theming

Override CSS custom properties on the host:

retirement-calc-swr {
  --rc-accent: #ff6b35;    /* primary color */
  --rc-bg: #ffffff;        /* card background */
  --rc-surf: #f7f9fc;      /* sub-surface (result area) */
  --rc-text: #1a1f2e;
  --rc-muted: #6a7280;
  --rc-border: rgba(20,30,50,0.10);
  --rc-radius: 12px;
}

Events

The element emits two custom events you can listen to:

document.querySelector('retirement-calc-swr')
  .addEventListener('rc-calculated', (e) => {
    console.log('Honest SWR:', e.detail.swrPct + '%');
    console.log('Monthly at SWR:', e.detail.monthlyAtSwr);
    console.log('4% rule monthly:', e.detail.fourPctMonthly);
    console.log('Verdict copy:', e.detail.verdict);
  });

document.querySelector('retirement-calc-swr')
  .addEventListener('rc-cta-clicked', (e) => {
    console.log('User clicked CTA to:', e.detail.url);
  });