Search
Techstore
@aneesimran
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
class ErrorBoundary extends React.Component {
function Sidebar() {
<div className="sidebar">
const [isClient, setIsClient] = useState(false);
setIsClient(true);
if (!isClient) {
<Sidebar />
randoDisc
@stevekrouse
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { AnimatePresence, motion } from "https://esm.sh/framer-motion?deps=react@18.2.0,react-dom@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0";
console.log(AnimatePresence);
<div className="relative flex items-start w-full max-w-lg justify-center">
{/* Navigation buttons outside AnimatePresence */}
{backHistory.length > 0 && (
</div>
class ErrorBoundary extends React.Component {
constructor(props) {
return this.props.children;
function client() {
const rootElement = document.getElementById("root");
</ErrorBoundary>,
// Ensure client() runs after the DOM is fully loaded
if (typeof document !== "undefined") {
document.addEventListener("DOMContentLoaded", client);
export default async function server(request: Request): Promise<Response> {
mdtort
@prashamtrivedi
@jsxImportSource https://esm.sh/react
HTTP
/** @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";
</p>
<ol className="list-decimal list-inside text-gray-600 dark:text-gray-300">
<li>Enter your Markdown in the left textarea</li>
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
blob_admin
@stevekrouse
Blob Admin This is a lightweight Blob Admin interface to view and debug your Blob data. Versions 0-17 of this val were done with Hono and server-rendering.
Versions 18+ were generated with Townie and use client-side React. To use this val, fork it to your account.
Authentication is handled by @stevekrouse/lastlogin,
so only the owner of the val will be able to see and edit their own blobs.
HTTP
Versions 18+ were generated with Townie and use client-side React.
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";
import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
children: ReactNode;
const handleClickOutside = (event: MouseEvent) => {
document.addEventListener("mousedown", handleClickOutside);
document.removeEventListener("mousedown", handleClickOutside);
function handleClickOutside(event) {
document.addEventListener("mousedown", handleClickOutside);
bikeInventory
@all
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { init, tx, id } from "https://esm.sh/@instantdb/core@0.12.12";
</div>
function client() {
console.log("Client function called");
const root = document.getElementById("root");
if (typeof document !== "undefined") {
console.log("Document is defined, calling client function");
client();
} else {
console.log("Document is undefined, skipping client-side rendering");
async function server(request: Request): Promise<Response> {
server
@andreterron
* @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
* @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/andreterron/react_tldraw_client"></script/>
</body>
react_example_client
@pomdtr
// JSX can be used in the client val thanks to this magic comment
Script
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
function Counter() {
const [counter, setCounter] = React.useState(0);
return (
return (
<h1>React Example</h1>
<Counter />
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
reflective_qa
@stevekrouse
Reflective AI Ask me about r's in strawberry
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import {
XCircleIcon,
} from "https://esm.sh/@heroicons/react/24/solid?deps=react@18.2.0&react-dom@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
function App() {
displayNotification("An error occurred while trying to use speech recognition.", "error");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
<strong className="text-green-800 dark:text-green-200 text-sm sm:text-base">Resources</strong>
<ul className="list-inside list-disc hover:list-inside p-2 text-xs sm:text-sm">
<li>
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
content:
`I want to act as an AI assistant designed to provide detailed, step-by-step responses to questions I pose to you. Your outputs should follow this structure: 1. Begin with a <thinking> section. Everything in this section is invisible to the user. 2. Inside the thinking section: a. Briefly analyze the question I have posed to you '[QUESTION]' and outline your approach. b. Present a clear plan of steps to answer the question I posed to you. c. Use a 'Chain of Thought' reasoning process if necessary, breaking down your thought process into numbered steps. 3. Include a <reflection> section for each idea where you: a. Review your reasoning for your answer. b. Check for potential errors or oversights. c. Confirm or adjust your conclusion if necessary. 4. Be sure to close all reflection sections. 5. Close the thinking section with </thinking>. 6. Provide your final answer in an <answer> section. Always use these tags in your responses. Be thorough in your explanations and answer, showing each step of your reasoning process. Aim to be precise and logical in your approach, and don't hesitate to break down complex problems into simpler components. Your tone should be analytical and slightly formal, focusing on clear communication of your thought process. Remember: Both <thinking> and <reflection> MUST be tags and must be closed at their conclusion Make sure all <tags> are on separate lines with no other text. Do not include other text on a line containing a tag.`,
role: "user",
justpost
@d4x3d
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useCallback, useEffect, useState } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import ReactMarkdown from "https://esm.sh/react-markdown";
<ReactMarkdown
</ReactMarkdown>
className="tags-sidebar"
function client() {
if (typeof document !== "undefined") { client(); }
// Rest of the server-side code remains the same as in the previous implementation
reflective_qa
@spinningideas
Reflective AI Ask me about r's in strawberry
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import {
XCircleIcon,
} from "https://esm.sh/@heroicons/react/24/solid?deps=react@18.2.0&react-dom@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
function App() {
displayNotification("An error occurred while trying to use speech recognition.", "error");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
<strong className="text-green-800 dark:text-green-200 text-sm sm:text-base">Resources</strong>
<ul className="list-inside list-disc hover:list-inside p-2 text-xs sm:text-sm">
<li>
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
content:
`I want to act as an AI assistant designed to provide detailed, step-by-step responses to questions I pose to you. Your outputs should follow this structure: 1. Begin with a <thinking> section. Everything in this section is invisible to the user. 2. Inside the thinking section: a. Briefly analyze the question I have posed to you '[QUESTION]' and outline your approach. b. Present a clear plan of steps to answer the question I posed to you. c. Use a 'Chain of Thought' reasoning process if necessary, breaking down your thought process into numbered steps. 3. Include a <reflection> section for each idea where you: a. Review your reasoning for your answer. b. Check for potential errors or oversights. c. Confirm or adjust your conclusion if necessary. 4. Be sure to close all reflection sections. 5. Close the thinking section with </thinking>. 6. Provide your final answer in an <answer> section. Always use these tags in your responses. Be thorough in your explanations and answer, showing each step of your reasoning process. Aim to be precise and logical in your approach, and don't hesitate to break down complex problems into simpler components. Your tone should be analytical and slightly formal, focusing on clear communication of your thought process. Remember: Both <thinking> and <reflection> MUST be tags and must be closed at their conclusion Make sure all <tags> are on separate lines with no other text. Do not include other text on a line containing a tag.`,
role: "user",
smallAndCuteSnakeGame
@jake
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
<aside>
<h3>Unnecessary Sidebar</h3>
</aside>
function client() {
client();
aside {
aside:hover {
StripeDemo
@vawogbemi
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import confetti from "https://esm.sh/canvas-confetti";
import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
<h2 className="font-bold mb-4">Stripe Test Mode Instructions</h2>
<ol className="list-decimal list-inside space-y-1 text-sm">
<li>Use card number: 4242 4242 4242 4242</li>
</div>
function client() {
const root = document.getElementById("root");
createRoot(root).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
pageSpeedAPI
@eligosmlytics
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
function Popup({ isOpen, onClose, content }) {
</form>
<p className="note">Note: This tool uses the PageSpeed Insights API without authentication, which has usage limits. For higher quotas, consider using an API key.</p>
<div className="content-wrapper">
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
export default 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 : {};
tldraw_react_client
@andreterron
// JSX can be used in the client val thanks to this magic comment
Script
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { Tldraw } from "https://esm.sh/tldraw";
</div>
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);