Deno logoDeno
CLIBlogSign in

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.

/** @jsx h */
/// <reference no-default-lib="true"/>
/// <reference lib="dom" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { serve } from "https://deno.land/std@0.114.0/http/server.ts";
import { h, renderSSR } from "https://deno.land/x/nano_jsx@v0.0.20/mod.ts";

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

function handler(req) {
  const html = renderSSR(<App />);
  return new Response(html, {
    headers: {
      "content-type": "text/html",
    },
  });
}

console.log("Listening on http://localhost:8000");
serve(handler);

You can run the above example with deno run.

deno run --allow-net=:8000 https://deno.com/examples/hello.jsx

It is important that you use a .jsx or .tsx file extension, so Deno Deploy knows to interpret a given file as JSX/TSX.