This recipe demonstrates how to configure your Dojo 2 application to use JSX templating. Note, TSX is the TypeScript version of JSX.


  1. Rename your Widget.ts/Widget.js file to Widget.tsx.

  2. Add the following configuration to your tsconfig.json file:

"include": [
  1. Add the tsx import into your file:
import { tsx } from '@dojo/widget-core/tsx';
  1. Convert your v() virtual DOM node function calls to use JSX:

Change this:

render() {
  return (
    v('div', [ 'Hello' ])

Into this:

render() {
  return (

Additional resources

  • The JSX Support section in the widget core documentation also covers how to use JSX templating in your Dojo 2 app
  • JSX Documentation in the TypeScript handbook