What is JSX? Why use it to render rich controls?

Typically, extensions that render rich controls use the canva.create method:

canva.create('button', { id: 'myButton', label: 'My Button' });

But it's also possible to render controls with JSX:

<button id="myButton" label="My Button" key="1" />

Functionally, there are no differences between either approach — the JSX is just syntactic sugar — but some developers prefer working with JSX because:

  • They're already familiar with the syntax.

  • The syntax is (arguably) easier to read.

By default though, a web browser can't understand JSX. You need to add a pragma to your source code and ensure that your build process can compile JSX into JavaScript.

What are pragmas?

A pragma is a directive that tells a compiler how the contents of a file should be compiled.

This comment, for instance, is the pragma that allows an extension to support JSX:

/** @jsx canva.create */

If you add this comment to the top of a JavaScript or TypeScript file that contains JSX elements and run it through a supported compiler, the JSX elements will be converted into their equivalent canva.create methods.

Compiling JSX into JavaScript

There are various tools for compiling JSX into JavaScript. The right tool for the job depends on whether you're developing an extension with JavaScript or TypeScript.

If you're developing an extension with JavaScript, we recommend the Babel compiler. If you're developing an extension with TypeScript, we recommend the TypeScript compiler.

To learn how to use these compilers, refer to the following tutorials:

These tutorials assume you've set up a Development URL.