HTML & JSX

Val Town supports server-rendered JSX. This lets you use JSX syntax to construct your HTML string. It does not include any client-side JSX framework features, such as re-rendering on the client, but you can string that together yourself by writing client-side vals.

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 val:

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

Preact

A good default is Preact, which provides a nice preact-render-to-string module that lets you quickly turn that JSX object into a string that you can use for a response.

React

Vue

Solid

Hono

Interoperability

Deno has JSX and TypeScript support, but browsers do not. But you can still use your vals in browsers and systems that don’t support these technologies when you use the esm.town module endpoint because we automatically transpile their code.