✦ Embeddable · v1

An embeddable retirement calculator that answers one question.

What will my retirement taxes be? in retirement? Drop a single script tag into your site, then use <retirement-calc-tax> as a custom HTML element anywhere on the page.

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

Live demos

Default (single, defaults)

Themed (orange accent, 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-tax {
  --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/tax.js"></script>

<retirement-calc-tax></retirement-calc-tax>

Or pre-seed values relevant to your audience:

<retirement-calc-tax
  plan-type="household"
  current-age="48"
  current-savings="1200000"
  contrib-annual="35000"
  retirement-age="62"
  ss-amount="2700"
  return-pct="7.0">
</retirement-calc-tax>

Attributes

Attribute	Default	Range
`plan-type`	single	`single` or `household`
`state`	FL	2-letter US state code (50 states + DC; matches engine's STATE_PROFILES)
`current-age`	67	55 – 90 (gates IRMAA at 65+)
`ss-annual`	30000	0 – 100,000 (total household SS, annual, today's $)
`pension-annual`	0	0 – 150,000 (total household pension, annual, today's $)
`trad-draw-annual`	40000	0 – 300,000 (401(k) / Trad IRA withdrawal, taxed as ordinary income)
`brokerage-draw-annual`	20000	0 – 300,000 (taxable brokerage withdrawal, taxed at LTCG rates)

Theming

Override CSS custom properties on the host:

retirement-calc-tax {
  --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-tax')
  .addEventListener('rc-calculated', (e) => {
    console.log('Total annual tax:', e.detail.totalTax);
    console.log('Effective rate:', e.detail.effectiveRate.toFixed(1) + '%');
    console.log('Breakdown:', e.detail.breakdown);
  });

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