HTML & JSX

To use JSX, you’ll need to insert what TypeScript calls a “per-file pragma” - a comment that uses @jsxImportSource to specify where the JSX methods are going to come from. For example, if you’re implementing JSX with Preact, the pragma will look like this at the top of your file:

/** @jsxImportSource https://esm.sh/react */

React

We recommend using React:

View and run this example on Val Town

/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";

export const reactExample = () =>
  new Response(renderToString(<div>Test {1 + 1}</div>), {
    headers: {
      "Content-Type": "text/html",
    },
  });

Preact

Preact is a great alternative to React:

View and run this example on Val Town

/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";

export const preactExample = () =>
  new Response(render(<div>Test {1 + 1}</div>), {
    headers: {
      "Content-Type": "text/html",
    },
  });

Vue

View and run this example on Val Town

/** @jsxImportSource https://esm.sh/vue */
import { renderToString } from "npm:vue/server-renderer";

export const vueExample = async () =>
  new Response(await renderToString(<div>Test {1 + 1}</div>), {
    headers: {
      "Content-Type": "text/html",
    },
  });

Solid

View and run this example on Val Town

/** @jsxImportSource https://esm.sh/solid-jsx */
import { renderToString } from "npm:solid-js/web";

export const solidExample = async () =>
  new Response(await renderToString(() => <div>Test {1 + 1}</div>), {
    headers: {
      "Content-Type": "text/html",
    },
  });

Hono

View and run this example on Val Town

/** @jsxImportSource npm:hono@3/jsx */

export const honoExample = () => {
  const jsx = <div>Test {1 + 1}</div>;

  return new Response(jsx.toString(), {
    headers: {
      "Content-Type": "text/html",
    },
  });
};