We use this "terms" page to showcase what's achievable using Markdown + HTML + JSX.
The English version is locked, but you can play around using the French version using the "Go to CMS" nav link.

Using Markdown

Heading 2 Heading 3

Bold

Italic

Strikethrough

Link in new tab

Using HTML

Heading 4

Heading 5

Heading 6

Text in div

Bold
Italic
Link (same tab)
Link (new tab)

Using JSX (React components)

Note: Only a small subset of components are made available. It works based on a whitelist. You can see the full list here.

Components from Reactstrap

An Alert "info"

An Alert "success"

Col 1 in a Row (with custom CSS)

Col 2 in a Row

Custom components

Help tooltips, using Tooltip component:
Some complex stuff (click/hover me!)

Localised links, using I18nLink component:
Link to homepage, keeping current locale

Button to change the current locale, using I18nBtnChangeLocale component:

Note: All links always open in a new tab with "noopener" to ensure proper security defaults. This only work when used from the app (not from Stacker)

Note: Stacker can preview Markdown but not HTML/JSX. The behaviour between Stacker Markdown preview and real rendering can be different.

As you can see above, using JSX brings quite a few interesting capabilities. But it isn't all-powerful though.

It's not possible to use JavaScript, so forget about using an onClick event for instance. You'll need to find workarounds for this kinds of things.

Also, it's not possible to provide non-scalar props. Forget about providing a component with an object, or array, for instance.

Nevertheless, it brings quite a few possibilities to your app. The secret is to keep things simple, using simple JSX components that rely on few props. The I18nBtnChangeLocale is a great example of that. No props, but changes the language for the whole app anyway, it's quite a powerful integration and very simple to use.