Most Roth conversion advice stops at "it depends." This calculator doesn't — it checks your MAGI against three real constraints at once (your federal bracket, IRMAA Tier 1, the ACA subsidy cliff) and tells you the exact dollar amount where the first one starts costing you money. 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-spend> — same engine, different question.
Full explanation: The Roth Conversion Sweet Spot →
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-roth> 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-roth {
--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/roth.js"></script>
<retirement-calc-roth></retirement-calc-roth>
Or pre-seed values relevant to your audience:
<retirement-calc-roth
plan-type="household"
current-age="62"
annual-magi="75000">
</retirement-calc-roth>
| Attribute | Default | Range |
|---|---|---|
plan-type | household | single or household (= MFJ) |
current-age | 67 | 50 – 85 (under 65 = ACA cliff applies; 65+ = IRMAA Tier 1 applies) |
annual-magi | 100000 | 30,000 – 1,000,000 (your MAGI before any Roth conversion) |
refsrc | (none) | partner attribution tag |
Honest scope: 2026 IRS brackets + standard deduction (refresh annually with the engine's IRS-limits refresh slice). Auto-detects your current federal bracket from your MAGI; conversion stays within current bracket (conservative). For FIRE-community strategies that fill higher brackets (e.g. "fill 22% bracket" or "fill 24% bracket"), use the full app's Roth Strategies card. Doesn't model SS taxability provisional income shifts from conversions; doesn't model state taxes; doesn't model itemized deductions. Single-year answer — for multi-year optimization across the bridge period, use the full app.
Override CSS custom properties on the host:
retirement-calc-roth {
--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-roth')
.addEventListener('rc-calculated', (e) => {
console.log('Sweet spot conversion:', e.detail.sweetSpot); // dollars, null if no constraints apply
console.log('Binding constraint:', e.detail.bindingConstraint); // 'Federal X% bracket' | 'IRMAA Tier 1' | 'ACA subsidy cliff'
console.log('All constraints:', e.detail.constraints); // array of { name, threshold, headroom, impact, applicable }
console.log('Current bracket:', e.detail.bracket); // { top, rate, bracketNum }
console.log('Medicare-eligible?', e.detail.medicareEligible);
});
document.querySelector('retirement-calc-roth')
.addEventListener('rc-cta-clicked', (e) => {
console.log('User clicked CTA to:', e.detail.url);
});