Custom JSX Runtime Starter

This starter demonstrates how to use a custom JSX runtime in Val Town.

View Demo

The http.tsx file is the main entry point and renders an HTML response on the server using React. This HTML includes a <script> tag to load the client.tsx file, which hydrates the React app.

The JSX pragma at the top of files is:

Create val
/** @jsxImportSource ./jsx */

This points to the jsx/jsx-runtime module (the jsx-runtime name is important), which wraps the default React JSX runtime with a function that extracts an sx prop and applies it as the style prop.

When the client module requests the App.tsx file from Val Town, the JSX is compiled to vanilla JavaScript to run in the browser.

See more starters