Search

multiplayerCircles

@maxm

Multiplayer Circles Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .

HTTP (deprecated)

changes.push(row2);

return changes;

const clientCode = () => {

const height = 600;

const width = 600;

const circles = ${JSON.stringify(circles)};

(${clientCode.toString()})()

</script>

</body>

SocialMediaDashboardV1

@shawnbasquiat

// This approach will create a Tinder-like swiping interface for profiles.

HTTP

// This approach will create a Tinder-like swiping interface for profiles.

// We'll use React for the frontend, and Val Town's SQLite for persistence.

// The server will serve the initial HTML and handle API requests for fetching and updating profiles.

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

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import { motion, AnimatePresence } from "https://esm.sh/framer-motion";

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

surfboardDemoSchedule2

@keenanzucker

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { useEffect, useState } from "https://esm.sh/react";

import { renderToString } from "npm:react-dom/server";

async function getSchedule() {

<body>

<h1>Val Town React Client Demo</h1>

const scheduleData = await getSchedule();

const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");

const stream = await renderToReadableStream(<App data={scheduleData} />, { bootstrapModules: [import.meta.url] });

marineMoccasinLizard

@kaz

* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar. * It uses React for the frontend and SQLite for persistent storage on the backend. * The ranking system updates based on user choices and displays in the Answers tab. * A progress bar is added to show completion of 20 questions.

HTTP

* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar.

* It uses React for the frontend and SQLite for persistent storage on the backend.

* The ranking system updates based on user choices and displays in the Answers tab.

* A progress bar is added to show completion of 20 questions.

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

import React, { useCallback, useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import {

useNavigate,

} from "https://esm.sh/react-router-dom";

// Types

const [username, setUsername] = useState("");

const handleLogin = useCallback(async (e: React.FormEvent) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")!).render(<App />);

if (typeof document !== "undefined") {

client();

async function server(request: Request): Promise<Response> {

http_client

@stevekrouse

HTTP Client Attach a postman-like http client to your vals, with bookmarks and history support Usage Wrap your http handler in an the httpClient middleware. import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }) Go to https://<author>-<name>.web.val.run/http-client to view the http client UI. Adding bookmarks You might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option: import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { bookmarks: [ { "label": "Dummy Request", "request": new Request("https://dummyjson.com/products") } ]}) Customizing the client path import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { path: "/" // show the http client on the website root }) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request

HTTP (deprecated)

# HTTP Client

Attach a postman-like http client to your vals, with bookmarks and history support

Wrap your http handler in an the httpClient middleware.

import {httpClient} from "https://esm.town/v/pomdtr/http_client"

/** @jsxImportSource npm:preact **/

import { render } from "npm:preact-render-to-string";

<title>REST Client</title>

export function httpClient(next: (req: Request) => Response | Promise<Response>, options: {

} = { path: "/http-client", bookmarks: [] }) {

tiptapEditorExample

@nbbaier

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

import tiptapStyle from "https://esm.town/v/nbbaier/tiptapStyle";

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {

return new Response(

snakeclone

@parsadotsh

Snake clone with effects.

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";

const CANVAS_SIZE = 400;

VALLE

@pomdtr

Fork it and authenticate with your Val Town API token as the password. Needs an OPENAI_API_KEY env var to be set. WARNING: pollutes your homepage with lots of temporary vals!! https://x.com/JanPaul123/status/1812957150559211918

HTTP (deprecated)

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

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

repp

@maxm

repp

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

import { blob } from "https://esm.town/v/std/blob?v=12";

// The script we run within the worker. Don't reference anything

// outside of this function as it won't be available within the worker. We could even host this in a separate val and pass

const workerScript = () => {

// throw new Error("hi")

// evaluate("console.log(\"SIDE EFFECT\")");

// evaluate("let twenty = 20");

valle_tmp_50677281064121176482256801591227

@janpaul123

// Improvements Made:

HTTP (deprecated)

import _ from "npm:lodash";

import OpenAI from "npm:openai";

import { renderToString } from "npm:react-dom/server";

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

VALLErun

@cofsana

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

consider it part of the current conversation. The conversation below is your recent interaction with the user.

You can use React but you don't have to.

currentCode = `/** @jsxImportSource https://esm.sh/react */

import React from "npm:react";

import { renderToString } from "npm:react-dom/server";

You can use React but you don't have to.

DON'T respond with a preamble (aside from saying "Certainly", "Of course", "Let's do it", or something similar) or further ex

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

testWebsite

@willthereader

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { renderToString } from 'npm:react-dom/server';

export const testWebsite = (request: Request) => {

// convert to Response

greenWren

@deepfates

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {

if (req.method === "POST") {

reactDemo

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { addReactFromCDN } from "https://esm.town/v/liamdanielduffy/addReactFromCDN";

import { buildHtml } from "https://esm.town/v/liamdanielduffy/buildHtml";

export function reactDemo() {

return buildHtml(addReactFromCDN(), "");

squareroot

@gueejla

Get the square root of any number! React formatting borrowed from https://www.val.town/v/jdan/infoboxCrawler and https://www.val.town/v/roramigator/focusForestApp

HTTP

Get the square root of any number!

React formatting borrowed from https://www.val.town/v/jdan/infoboxCrawler and https://www.val.town/v/roramigator/focusForestA

/** @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() {

ctx.stroke();

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") {

client();

function server(req: Request): Promise<Response> {

…

15 16

18 19

…

184