An embeddable retirement calculator that answers one question.

Constant 4% rule vs Guyton-Klinger guardrails — which wins for your plan? Drop a single script tag into your site, then use <retirement-calc-withdrawal> as a custom HTML element anywhere on the page. Runs both strategies through the same Monte Carlo sim with your plan inputs. Surfaces the trade-off in plain terms: GK trades stable spending for plan longevity AND (surprisingly) often higher average real spending.

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

Live demos

Preview your theme

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

retirement-calc-withdrawal {
  --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/withdrawal.js"></script>

<retirement-calc-withdrawal></retirement-calc-withdrawal>

Or pre-seed values relevant to your audience:

<retirement-calc-withdrawal
  plan-type="household"
  retirement-age="50"
  nest-egg="2000000"
  life-expectancy="95"
  initial-wr-pct="4.5">
</retirement-calc-withdrawal>

Attributes

Honest scope: Portfolio-only (no Social Security, no pension). The comparison is apples-to-apples with the original Trinity Study + Bengen 4% rule framing. Constant strategy holds spending at initialWRpct × nestEgg / 12 per month (inflation-adjusted). Guyton-Klinger uses ±20% band (engine default) and ±10% spending adjustment when triggered — the FIRE-community canonical GK setup. Both run at 750-sim Monte Carlo (same fidelity as the Spend / SWR embeds). Engine assumes 3% inflation; returns 7% nominal pre/post-retirement. For multi-event plans (staggered retirement, lump sums, real estate), use the full app.

Theming

Override CSS custom properties on the host:

retirement-calc-withdrawal {
  --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-withdrawal')
  .addEventListener('rc-calculated', (e) => {
    console.log('Constant strategy:', e.detail.constant);   // { successRate, p10End, p50End, p90End, avgRealSpend }
    console.log('GK strategy:', e.detail.gk);              // same + gkPerSimStats { medianCutCount, medianRaiseCount, ... }
    console.log('Monthly starting spend:', e.detail.monthlyStartingSpend);
    console.log('Initial WR:', e.detail.initialWRpct + '%');
  });

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