Taffrail Var

When you request HTML advice content, the API returns HTML strings containing <taffrail-var> Web Components, each one referencing a single Variable. The component's data attributes carry everything you need to render an interactive UI.

👍
Requesting HTML
Use the +html modifier on the Accept header:
Accept: application/vnd.taffrail.json+html

In an ADVICE item from the advice[] list, the headline_html field contains the <taffrail-var> markup:

{
  "headline": "Because your income is above $198,000, you are not eligible for a Roth IRA and should consider a Traditional IRA instead."
  "headline_html": "Because <a href=\"#Roth_Eligibility\" data-variable-id=\"EbAx0DxX9Bm490AALrEPV\" class=\"taffrail-var\"><taffrail-var data-variable-type=\"Freetext\" data-variable-name=\"Roth_Eligibility\" data-variable-id=\"EbAx0DxX9Bm490AALrEPV\" data-variable-raw-value=\"Income too high for a Roth\">your income is above <taffrail-var data-variable-type=\"Number\" data-variable-format=\"$0,0\" data-variable-name=\"IRS_Limit_Roth_MFJ_Income_Low\" data-variable-id=\"Bj09EXCZkhOiKxdsa4UaL\" data-variable-raw-value=\"198000\">$198,000<\/taffrail-var><\/taffrail-var><\/a>, you are not eligible for a Roth IRA and should consider a Traditional IRA instead.\n"
}

📘
Demo
Try this on the Advice Content Types page.

In HTML mode, every Variable is wrapped in a <taffrail-var> element. The data attributes below mirror the Variable meta on the response.

Attribute	Meaning
`data-variable-type`	The data type of the Variable
`data-variable-name`	The canonical name of the Variable
`data-variable-id`	The unique Variable ID — use to look up the entry in the response's `variables` array
`data-variable-raw-value`	The unformatted value
`data-variable-format`	The format string. See Variables: Format
`data-variable-is-undefined`	Present only when an Unknown Variable Reference error occurs (e.g. `#VARIABLE_NAME!`)
`data-variable-system`	Present and `true` for a system Variable
`data-variable-constant`	Present and `true` for a constant Variable (a value that should not change)
`data-variable-is-toggleable`	Present and `true` when the Variable is toggleable
`data-backlink-name`	The canonical name of the Backlink
`data-backlink-required`	Present when the renderer should attach a Backlink chip

Handling Taffrail Vars in JavaScript

To attach click handlers to <taffrail-var> elements with Backlinks:

document.querySelectorAll("taffrail-var[data-backlink-required]").forEach(el => {
  el.addEventListener("click", () => {
    const variableName = el.getAttribute("data-backlink-name");
    // Open a popup or form to let the user modify this variable
    console.log("Edit:", variableName);
  });
});