Tiny templating libraries like mustache are ideal for that. https://mustache.github.io/
I wonder how many XSS vulns this decision has caused in the wild.
You can grep for {{{ without false positives matching {{. Conversely, it's harder to find places where == was used when === should have been used (although I'll concede it's not much harder). In general I'd prefer to go the extra mile to be unsafe than accidentally miss something out.
You shouldn't have to squint at your templating code to see if there's an XSS vector or not, or defensively/neurotically grep for "{{{" just in case you didn't trust your team to squint sufficiently.
For comparison, here's JSX: <div dangerouslySetInnerHTML={{__html: username}} />.
vs. Mustache: {{{username}}} in a file of 1000 other { and } glyphs.
Mustache's hey-dey is long over thankfully.
I've never seen JSX before (I haven't learned anything new in front-end later than ES5). In your example, it looks more like an attribute than an inner tag, the former of which I'd almost always escape. Is that how you set inner HTML as well?