You can verify that feeding my original piece of JSX to translateForBrowser will produce the “browser JSX” that only refers to concepts like p and i.

const originalJSX =[Greeting person={alice}/] ; console.log(originalJSX.type); // Greeting console.log(originalJSX.props); // { firstName: ‘Alice’, birthYear: 1970 }

const browserJSX = translateForBrowser(originalJSX); console.log(browserJSX.type); // ‘p’ console.log(browserJSX.props); // { className: ‘text-2xl font-sans text-purple-400 dark:text-purple-500’, children: [‘Hello’, { type: ‘i’, props: { children: ‘Alice’ }, ‘!’] }*