Skip to main content

TSX

TSX is a syntax that allows using TypeScript in JSX. JSX is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript. It has been popularized by React, and then adopted by many other libraries/frameworks.

By default, when running JSX/TSX in LiveCodes, React runtime is used. However, other libraries like Preact, nano JSX and others can be used as well (see Custom JSX Runtimes).

Usage​

For usage and examples, see documentation for JSX and TypeScript support in LiveCodes.

Language Info​

Name​

tsx

Extension​

.tsx

Editor​

script

Compiler​

TypeScript compiler

Code Formatting​

Using Prettier.

Custom Settings​

Custom settings added to the property tsx are passed to the TypeScript compiler as compiler options while compiling TSX. In addition, the option disableAutoRender can be set to true to disable auto-rendering.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "tsx": {
    "disableAutoRender": true,
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

Starter Template​

https://livecodes.io/?template=react (uses JSX)

Sponsors