Search

multiplayerCircles

@lisardo

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>

dateme_form_react

@stevekrouse

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

Script

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

import date_me_doc_locations from "https://esm.town/v/stevekrouse/date_me_doc_locations";

const Link = ({ href, children }) => {

counterTown

@stevekrouse

@jsxImportSource npm:hono@3/jsx

HTTP

</div>

{/* We'll need to implement a server-side chart solution or use a simple HTML table for now */}

<thead>

getValsContextWindowDebug

@janpaul123

// This val renders the output of "janpaul123/getValsContextWindow" as HTML

HTTP

// This val renders the output of "janpaul123/getValsContextWindow" as HTML

// It uses React for rendering and includes a <select> for the "model" option

// The approach is to fetch the context window data, then render it as an interactive HTML page

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

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

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

resizeImageError

@shawnbasquiat

// This val creates an image resizing service using the Cloudinary API.

HTTP

// It provides a form for users to input the image URL and size, and displays the resized image.

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

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

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

function App() {

const [resizedImageUrl, setResizedImageUrl] = useState("");

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

e.preventDefault();

</div>

function client() {

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

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

async function testEndpoint() {

multiplayerCircles

@Llad

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>

ssr

@pomdtr

Todo [x] extract params from request paths using urlpatterns [ ] add a Form component [ ] add support for Layouts [ ] support other types url in router ("https://val.town/v/user/val" or "owner/val")

Script

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

import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";

import { html } from "https://esm.town/v/stevekrouse/html";

export type PageProps<T = {}> = T & {

whoIsHiring

@vawogbemi

WIP Searcher for HN whos hiring posts HonoJs doesn't support render for async components so the style is off for the home page. And the state changes don't register in html rendering so thinking of using react instead.

HTTP

HonoJs doesn't support render for async components so the style is off for the home page.

And the state changes don't register in html rendering so thinking of using react instead.

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

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

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

import { renderToString } from "https://esm.sh/react-dom/server";

import { hnSearch } from "https://esm.town/v/stevekrouse/hnSearch";

vibe_playground

@ryanguill

An interactive, runnable TypeScript val by ryanguill

Script

<body>

</div>

whiteNewt

@maxm

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

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

return new Response(

addReactFromCDN

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

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

export function addReactFromCDN(): string {

const reactDom = scriptTag({

src: "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",

const react = scriptTag({

src: "https://unpkg.com/react@18/umd/react.production.min.js",

return [react, reactDom].join(" ");

reactExample

@richardkaplan

Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>

HTTP (deprecated)

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

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

const genSVG = (request: Request): string => {

</svg>,

export const reactExample = (request: Request) =>

new Response(

REACT_CDN_VAL

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

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

export function REACT_CDN_VAL(req, res) {

res.set("Content-Type", "text/javascript");

res.send(REACT_MINIFIED);

valle_tmp_9571549127942918010434925760972602

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

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

// Set these to your own

const username = "janpaul123";

mathemagic

@gueejla

UI for mathematical visualizations and calculations

HTTP (deprecated)

/** @jsxImportSource npm:react **/

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

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

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

const spell_list = await blob.list();

…

19 20

22 23

…

184