As an example of a JSX DSL, I won’t use anything related to web or React to give you a hint that TypeScript’s JSX is not limited anyhow to React components or rendering. I’ll implement DSL for type-checked rich Slack message templates.

For example, this is a Slack message template constructed with objects.

It looks OK, but here is a thing that we can improve — readability. For example, take a look at color property in the attachments or title_link along with those _ (italics in Slack) in the text . They mess with the content and make it harder to distinguish what’s important and what’s not. Our template DSL can solve this problem.

Next example describes exactly the same message but with the DSL we gonna implement.

Second example is much better — clear separation of content from styling.