FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
jxnblk

jxnblk

custom-jsx-runtime-starter

Example of setting up a custom JSX runtime in Val Town
Public
Like
2
custom-jsx-runtime-starter
Home
Code
5
jsx
1
App.tsx
README.md
client.tsx
H
http.tsx
Branches
2
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
http.tsx
https://jxnblk--d561862221d011f0a559569c3dd06744.web.val.run
README.md

Custom JSX Runtime Starter

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

View Demo

How it works

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

HTTP
  • http.tsx
    jxnblk--d5…44.web.val.run
Code
jsxApp.tsxREADME.mdclient.tsx
H
http.tsx
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareersBrandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.