Search
scientificCyanHarrier
@stevekrouse
Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
<div className="sidebar">
function client() {
client();
.sidebar {
.sidebar h2 {
.sidebar ul {
.sidebar li {
bulletinBoard
@roramigator
// This app creates a community bulletin board where users can post messages with titles and view all posts.
HTTP (deprecated)
// Posts are automatically deleted after 24 hours. A basic spam filter is implemented to prevent abuse.
// The app uses SQLite for data storage and includes both server-side and client-side components.
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
async function server(request: Request): Promise<Response> {
leaderboardApp
@guillermodoghel
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
</ul>
<button onClick={handleGoBack}>Reconsider Bid 🔄</button>
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
async function server(request: Request): Promise<Response> {
ForestryFinancialModel
@jbwinters
// Interactive forestry financial model simulator.
HTTP
// Interactive forestry financial model simulator.
// It will use React for the UI, recharts for data visualization, and custom slider components.
// The server will render the initial HTML, and the client-side JavaScript will handle the interactivity.
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "https://esm.sh/recharts";
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="year" label={{ value: 'Year', position: 'insideBottom', offset: -5 }} />
<YAxis label={{ value: 'Amount ($)', angle: -90, position: 'insideLeft' }} />
<Tooltip />
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
egoBooster
@stevekrouse
* This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis,
* and streams funny, specific compliments about the user's appearance.
* We use the WebRTC API for camera access, the OpenAI API for image analysis,
* and server-sent events for real-time streaming of compliments.
HTTP (deprecated)
* and server-sent events for real-time streaming of compliments.
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect, useRef } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { marked } from "https://esm.sh/marked";
</div>
function client() {
console.log("Client-side rendering started");
createRoot(document.getElementById("root")!).render(<App />);
if (typeof document !== "undefined") {
console.log("Document is defined, calling client()");
client();
} else {
console.log("Document is undefined, not calling client()");
async function server(request: Request): Promise<Response> {
ReactStream
@jxnblk
React SSR and client-side hydration for Val Town Usage /** @jsxImportSource https://esm.sh/react */
import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
function App() {
const [count, setCount] = React.useState(0);
return (
<html>
<body>
<h1>ReactStream</h1>
<p>React SSR with client-side hydration in Val Town</p>
<pre>{count}</pre>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</body>
</html>
);
}
export default render(App, import.meta.url); Live example To render static HTML without hydration, pass false as the second argument. export default render(App, false); Middleware Custom middleware can be added in an array as the third argument.
Middleware can add data to the req.data object or return a response for things like API endpoints. export default render(App, import.meta.url, [
analytics,
robots("User-agent: *\nAllow: /"),
getInitialProps
]) robots.txt ReactStream has a built-in middleware to handle request to /robots.txt import { render, robots } from "https://esm.town/v/jxnblk/ReactStream";
// ...
export default render(App, import.meta.url, [
robots("User-agent: *\nAllow: /"),
]) Add a backend request handler // example middleware
async function api (req: Request, res: Response, next): Promise<Response> {
if (req.pathname !== "/api") return next();
if (req.method === "POST") {
return Repsonse.json({ message: "Hello POST request" });
}
return Response.json({ ok: true });
}
export default render(App, import.meta.url, [ api ]); Fetch data on the server to set initial props // example middleware
async function getInitialProps (req: Request, res: Response, next) {
// fetch data or do async work to pass as props to the component
req.data = {
hello: "props",
};
return next();
}
export default render(App, import.meta.url, [ getInitialProps ]); Starter template /** @jsxImportSource https://esm.sh/react */
import { render } from "https://esm.town/v/jxnblk/ReactStream";
function App () {
return (
<html>
<head>
<title>ReactStream</title>
</head>
<body>
hello
</body>
</html>
);
}
export default render(App, import.meta.url, []); React requires matching versions for SSR and hydration.
Import React from https://esm.town/v/jxnblk/ReactStream to ensure your component uses the same version as this library (currently react@18.3.1). Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
Script
React SSR and client-side hydration for Val Town
/** @jsxImportSource https://esm.sh/react */
import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
/** @jsxImportSource https://esm.sh/react */
import { hydrateRoot } from "https://esm.sh/react-dom@18.3.1/client";
import * as React from "https://esm.sh/react@18.3.1";
export { React };
export interface ReactStreamProps {
/** Root-level React component that renders an entire <html> element
Component: React.ComponentType<ReactStreamProps>,
/** On Val Town, use `import.meta.url` for client-side hydration */
opts: ReactStreamOptions | Middleware[] = [],
const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
webcamEffects
@kian
* This app will create a webcam-based image processing application.
* It will request webcam permissions, display the video feed, and prepare for applying effects.
* We'll use React for the UI, the browser's MediaDevices API for webcam access,
* and later we'll incorporate P5.js for image processing.
HTTP
* It will request webcam permissions, display the video feed, and prepare for applying effects.
* We'll use React for the UI, the browser's MediaDevices API for webcam access,
* and later we'll incorporate P5.js for image processing.
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
</div>
// client-side only code
function client() {
createRoot(document.getElementById("root")!).render(<App />);
if (typeof document !== "undefined") { client(); }
// server-side only code
export default async function server(request: Request): Promise<Response> {
techstackinventory
@ejfox
* This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.
* It allows users to select technologies for different categories and displays the chosen stack.
HTTP
* This val creates a tech stack inventory chooser using React and Tailwind CSS for styling.
* It allows users to select technologies for different categories and displays the chosen stack.
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const techCategories = {
frontend: ["React", "Vue", "Angular", "Svelte"],
backend: ["Node.js", "Python", "Ruby", "Java"],
<h2 className="text-xl font-semibold mb-2 text-gray-800">Your Chosen Stack:</h2>
<ul className="list-disc list-inside">
{Object.entries(selectedTech).map(([category, tech]) => (
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
async function server(request: Request): Promise<Response> {
zhangxiaoke
@webup
// This approach will create a personal card using React and Lucide React icons.
HTTP
// This approach will create a personal card using React and Lucide React icons.
// We'll use ESM imports for React and Lucide icons.
/** @jsxImportSource https://esm.sh/react */
import React from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";
<ul className="text-sm text-gray-600 list-disc list-inside">
// client-side only code
function client() {
if (typeof document !== "undefined") { client(); }
sqliteAdminDashboard
@stevekrouse
Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325
HTTP
// This val creates a SQLite dashboard admin panel with a sidebar for table names
// It uses React for the frontend and the Val Town SQLite API for database operations
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
<div className="sidebar">
function client() {
client();
.sidebar {
.sidebar h2 {
dateme_router_hydrated
@stevekrouse
@jsxImportSource https://esm.sh/react@18.2.0
Script
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import * as ReactDOM from "https://esm.sh/react-dom@18.2.0/client";
} from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";
import * as React from "https://esm.sh/react@18.2.0";
function makeClientSide(routes) {
children: route.children ? makeClientSide(route.children) : undefined,
const router = createBrowserRouter(makeClientSide(routes), {
ReactDOM.hydrateRoot(
<React.StrictMode>
</React.StrictMode>,
react_example
@pomdtr
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://pomdtr-react_example_server.web.val.run
* @include pomdtr/react_example_client
* @resource [React - Quick Start](https://react.dev/learn)
HTTP (deprecated)
* @title Running React on the Client
* @description Vals can also be used to host client-side code!
* @preview https://pomdtr-react_example_server.web.val.run
* @include pomdtr/react_example_client
* @resource [React - Quick Start](https://react.dev/learn)
// The server response includes a script referencing the client val
export const server = (req) =>
<head>
<title>React Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<main id="root"></main>
<script type="module" src="https://esm.town/v/pomdtr/react_example_client"></script/>
</body>
homepage
@csl_
Got a domain for vals; needs a homepage; minimal effort
HTTP
* The front of the card displays Carl's name and an animated subheading, while the back shows a humorous message and links.
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
"hey, this isn't a bouldering gym!",
"should be outside",
"an AI wrote these",
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
async function server(request: Request): Promise<Response> {
colorRequestSender
@magistris
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
// Client-side React Component
function App() {
</div>
// Client-side rendering function
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
// Server-side function for handling requests
async function server(request: Request): Promise<Response> {
reacttldrawclient
@iamseeley
@jsxImportSource https://esm.sh/react
Script
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import ReactDOM from "https://esm.sh/react-dom";
import React, { useState, useEffect } from "https://esm.sh/react@18.0.0";
function TestComponent() {
</div>
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);