JSX

Built-in JSX and TSX support in Bun with configurable transpilation options

Bun supports .jsx and .tsx files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.

function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

Configuration

Bun reads your tsconfig.json or jsconfig.json configuration files to determines how to perform the JSX transform internally. To avoid using either of these, the following options can also be defined in bunfig.toml.

The following compiler options are respected.

`jsx`

How JSX constructs are transformed into vanilla JavaScript internally. The table below lists the possible values of jsx, along with their transpilation of the following simple JSX component:

<Box width={5}>Hello</Box>

| Compiler options | Transpiled output | | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | json { "jsx": "react" }  | tsx import { createElement } from "react"; createElement("Box", { width: 5 }, "Hello");  | | json { "jsx": "react-jsx" }  | tsx import { jsx } from "react/jsx-runtime"; jsx("Box", { width: 5 }, "Hello");  | | json { "jsx": "react-jsxdev" }  | tsx import { jsxDEV } from "react/jsx-dev-runtime"; jsxDEV( "Box", { width: 5, children: "Hello" }, undefined, false, undefined, this, );  The jsxDEV variable name is a convention used by React. The DEV suffix is a visible way to indicate that the code is intended for use in development. The development version of React is slower and includes additional validity checks & debugging tools. | | json { "jsx": "preserve" }  | tsx // JSX is not transpiled // "preserve" is not supported by Bun currently <Box width={5}>Hello</Box>  |

`jsxFactory`

<Note>Note — Only applicable when jsx is react.</Note>

The function name used to represent JSX constructs. Default value is "createElement". This is useful for libraries like Preact that use a different function name ("h").

| Compiler options | Transpiled output | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | json { "jsx": "react", "jsxFactory": "h" }  | tsx import { h } from "react"; h("Box", { width: 5 }, "Hello");  |

`jsxFragmentFactory`

<Note>Note — Only applicable when jsx is react.</Note>

The function name used to represent JSX fragments such as <>Hello</>; only applicable when jsx is react. Default value is "Fragment".

| Compiler options | Transpiled output | | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | json { "jsx": "react", "jsxFactory": "myjsx", "jsxFragmentFactory": "MyFragment" }  | tsx // input <>Hello</>; // output import { myjsx, MyFragment } from "react"; myjsx(MyFragment, null, "Hello");  |

`jsxImportSource`

<Note>Note — Only applicable when jsx is react-jsx or react-jsxdev.</Note>

The module from which the component factory function (createElement, jsx, jsxDEV, etc) will be imported. Default value is "react". This will typically be necessary when using a component library like Preact.

| Compiler options | Transpiled output | | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | jsonc { "jsx": "react", // jsxImportSource is not defined // default to "react" }  | tsx import { jsx } from "react/jsx-runtime"; jsx("Box", { width: 5, children: "Hello" });  | | jsonc { "jsx": "react-jsx", "jsxImportSource": "preact", }  | tsx import { jsx } from "preact/jsx-runtime"; jsx("Box", { width: 5, children: "Hello" });  | | jsonc { "jsx": "react-jsxdev", "jsxImportSource": "preact", }  | tsx // /jsx-runtime is automatically appended import { jsxDEV } from "preact/jsx-dev-runtime"; jsxDEV( "Box", { width: 5, children: "Hello" }, undefined, false, undefined, this, );  |

JSX pragma

All of these values can be set on a per-file basis using pragmas. A pragma is a special comment that sets a compiler option in a particular file.

| Pragma | Equivalent config | | ---------------------------------------- | ------------------------------------------------------------------ | | ts // @jsx h  | jsonc { "jsxFactory": "h", }  | | ts // @jsxFrag MyFragment  | jsonc { "jsxFragmentFactory": "MyFragment", }  | | ts // @jsxImportSource preact  | jsonc { "jsxImportSource": "preact", }  |

Logging

Bun implements special logging for JSX to make debugging easier. Given the following file:

import { Stack, UserCard } from "./components";

console.log(
  <Stack>
    <UserCard name="Dom" bio="Street racer and Corona lover" />
    <UserCard name="Jakob" bio="Super spy and Dom's secret brother" />
  </Stack>,
);

Bun will pretty-print the component tree when logged:

<Frame>![JSX logging output](https://github.com/oven-sh/bun/assets/3084745/d29db51d-6837-44e2-b8be-84fc1b9e9d97)</Frame>

Prop punning

The Bun runtime also supports "prop punning" for JSX. This is a shorthand syntax useful for assigning a variable to a prop with the same name.

function Div(props: {className: string;}) {
  const {className} = props;

  // without punning
  return <div className={className} />;
  // with punning
  return <div {className} />;
}

JSX

Built-in JSX and TSX support in Bun with configurable transpilation options

Bun supports .jsx and .tsx files out of the box. Bun's internal transpiler converts JSX syntax into vanilla JavaScript before execution.

function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

Configuration

The following compiler options are respected.

`jsx`

How JSX constructs are transformed into vanilla JavaScript internally. The table below lists the possible values of jsx, along with their transpilation of the following simple JSX component:

<Box width={5}>Hello</Box>

`jsxFactory`

<Note>Note — Only applicable when jsx is react.</Note>

The function name used to represent JSX constructs. Default value is "createElement". This is useful for libraries like Preact that use a different function name ("h").

`jsxFragmentFactory`

<Note>Note — Only applicable when jsx is react.</Note>

The function name used to represent JSX fragments such as <>Hello</>; only applicable when jsx is react. Default value is "Fragment".

`jsxImportSource`

<Note>Note — Only applicable when jsx is react-jsx or react-jsxdev.</Note>

JSX pragma

All of these values can be set on a per-file basis using pragmas. A pragma is a special comment that sets a compiler option in a particular file.

Logging

Bun implements special logging for JSX to make debugging easier. Given the following file:

import { Stack, UserCard } from "./components";

console.log(
  <Stack>
    <UserCard name="Dom" bio="Street racer and Corona lover" />
    <UserCard name="Jakob" bio="Super spy and Dom's secret brother" />
  </Stack>,
);

Bun will pretty-print the component tree when logged:

<Frame>![JSX logging output](https://github.com/oven-sh/bun/assets/3084745/d29db51d-6837-44e2-b8be-84fc1b9e9d97)</Frame>

Prop punning

The Bun runtime also supports "prop punning" for JSX. This is a shorthand syntax useful for assigning a variable to a prop with the same name.

function Div(props: {className: string;}) {
  const {className} = props;

  // without punning
  return <div className={className} />;
  // with punning
  return <div {className} />;
}

Adoption

jarle/Bun JSX

$ install --global

Security Scan Results

SKILL.md

JSX

Configuration

`jsx`

`jsxFactory`

`jsxFragmentFactory`

`jsxImportSource`

JSX pragma

Logging

Prop punning

Related Skills

jarle/Bun TypeScript

jarle/Bun Writing tests

jarle/Bun Snapshots

jarle/Bun Runtime behavior

jarle/Bun JSX

$ install --global

Security Scan Results

SKILL.md

JSX

Configuration

`jsx`

`jsxFactory`

`jsxFragmentFactory`

`jsxImportSource`

JSX pragma

Logging

Prop punning

Related Skills

jarle/Bun TypeScript

jarle/Bun Writing tests

jarle/Bun Snapshots

jarle/Bun Runtime behavior