Edit Fallback Language

Name

Also known as (comma separated)

Brief definition Language used when a translation is missing.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "requestedLocale", "type": "select", "label": "Requested locale", "default": "de", "options": [ "en", "fr", "de" ] }, { "id": "stringKey", "type": "text", "label": "String key", "default": "welcome_message" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showNote", "type": "toggle", "label": "Explain the fallback", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"fbl fbl--{{requestedLocale}}\">\n <p class=\"fbl__key\">t(&quot;{{stringKey}}&quot;, locale: &quot;{{requestedLocale}}&quot;)</p>\n <p class=\"fbl__result fbl__result--en\" lang=\"en\">Welcome back</p>\n <p class=\"fbl__result fbl__result--fr\" lang=\"fr\">Content de vous revoir</p>\n {{#if showNote}}\n <p class=\"fbl__note fbl__note--en\">de has no translation for this key &mdash; falling back to <strong style=\"color:{{accent}};\">en</strong>.</p>\n <p class=\"fbl__note fbl__note--fr\">fr has its own translation, no fallback needed.</p>\n <p class=\"fbl__note fbl__note--de\">en has its own translation, no fallback needed.</p>\n {{/if}}\n</div>\n<style>\n.fbl { font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.fbl__key { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.fbl__result { display: none; font-weight: 700; font-size: 18px; margin: 0 0 8px; }\n.fbl--en .fbl__result--en, .fbl--de .fbl__result--en, .fbl--fr .fbl__result--fr { display: block; }\n.fbl__note { display: none; margin: 0; font-size: 11px; color: #24143099; }\n.fbl--en .fbl__note--en, .fbl--fr .fbl__note--fr, .fbl--de .fbl__note--de { display: block; }\n</style>", "tailwind": "<div class=\"fbltw fbltw--{{requestedLocale}} font-sans text-base text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">t(&quot;{{stringKey}}&quot;, locale: &quot;{{requestedLocale}}&quot;)</p>\n <p class=\"fbltw__result fbltw__result--en hidden font-bold text-lg m-0 mb-2\" lang=\"en\">Welcome back</p>\n <p class=\"fbltw__result fbltw__result--fr hidden font-bold text-lg m-0 mb-2\" lang=\"fr\">Content de vous revoir</p>\n {{#if showNote}}\n <p class=\"fbltw__note fbltw__note--en hidden m-0 text-[11px] text-[#24143099]\">de has no translation for this key &mdash; falling back to <strong style=\"color:{{accent}};\">en</strong>.</p>\n <p class=\"fbltw__note fbltw__note--fr hidden m-0 text-[11px] text-[#24143099]\">fr has its own translation, no fallback needed.</p>\n <p class=\"fbltw__note fbltw__note--de hidden m-0 text-[11px] text-[#24143099]\">en has its own translation, no fallback needed.</p>\n {{/if}}\n</div>\n<style>\n.fbltw--en .fbltw__result--en, .fbltw--de .fbltw__result--en, .fbltw--fr .fbltw__result--fr { display: block; }\n.fbltw--en .fbltw__note--en, .fbltw--fr .fbltw__note--fr, .fbltw--de .fbltw__note--de { display: block; }\n</style>", "react": "export function FallbackLanguage({\n requestedLocale = \"{{requestedLocale}}\",\n stringKey = \"{{stringKey}}\",\n accent = \"{{accent}}\",\n showNote = {{showNote}},\n}) {\n const resolved = requestedLocale === \"fr\" ? \"fr\" : \"en\";\n const text = resolved === \"fr\" ? \"Content de vous revoir\" : \"Welcome back\";\n const note = requestedLocale === \"de\"\n ? <>de has no translation for this key &mdash; falling back to <strong style={{ color: accent }}>en</strong>.</>\n : `${requestedLocale} has its own translation, no fallback needed.`;\n return (\n <div style={{ font: \"15px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>t(\"{stringKey}\", locale: \"{requestedLocale}\")</p>\n <p lang={resolved} style={{ fontWeight: 700, fontSize: 18, margin: \"0 0 8px\" }}>{text}</p>\n {showNote && <p style={{ margin: 0, fontSize: 11, color: \"#24143099\" }}>{note}</p>}\n </div>\n );\n}" }