The 4% rule is a 30-year-horizon shortcut treated like universal law. This calculator doesn't repeat it — it runs a real 1,000-scenario simulation against your own portfolio and horizon, and shows you the withdrawal rate that actually holds up. Drop it into your own article in one script tag, and it looks like it was built for your site, not bolted onto it.
Sibling of <retirement-calc-age> — same engine, different question.
Full explanation: Is the 4% Rule Still Safe? →
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.
That's the exact <retirement-calc-swr> widget, unmodified — same script tag, same math as the full app. See the full picture → · Jump to the embed code ↓
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.
retirement-calc-swr {
--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/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>
| 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.
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;
}
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);
});