Deno LandDeno

Deploy Docs

Using JSX

Deno Deploy supports JSX (and TSX) out of the box. You don't need an additional transform step to use JSX with Deno Deploy.

The example below demonstrates the usage of JSX on Deno Deploy.

// You need to import `h` factory function as Deno Deploy
// uses it instead of `React.createElement`
import { h } from "https://x.lcas.dev/[email protected]/mod.js";
import { renderToString } from "https://x.lcas.dev/[email protected]/ssr.js";

function App() {
  return (
    <html>
      <head>
        <title>Hello from JSX</title>
      </head>
      <body>
        <h1>Hello world</h1>
      </body>
    </html>
  );
}

addEventListener("fetch", (event) => {
  // renderToString generates html string from JSX components.
  const response = new Response(renderToString(<App />), {
    headers: { "content-type": "text/html; charset=utf-8" },
  });

  event.respondWith(response);
});

You can run the above example with deployctl.

deployctl run --libs=ns,fetchevent https://deno.com/examples/hello.jsx

It is important that you use .jsx or .tsx as file extension for Deno Deploy to transform JSX code.

For reference, the following config is used by Deno Deploy to transform JSX.

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment"
  }
}

In future, Deno Deploy will support the new JSX transform.


Please file an issue in our feedback repository if you find any problem in Deploy service or documentation.