Search
valle_tmp_140068690648343496787358158586876
@janpaul123
@jsxImportSource https://esm.sh/react
HTTP
/** @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 = "jsherfavr"; // Replace with your Val Town username
honoExample
@willthereader
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP
change my understanding. I really like{" "}
<a className="text-blue-500 hover:underline" href="https://www.readtangle.com">Tangle</a>{" "}
because it offers perspectives from all sides. I dislike when people assume the worst of their opponents and
when I can't tell who's right because no one addresses the best arguments from their opponents.
</p>
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> {
weatherDashboard
@oioioi
@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";
const API_BASE_URL = "https://api.open-meteo.com/v1/forecast";
</div>
function client() {
createRoot(document.getElementById("root")).render(<WeatherDashboard />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
reactTodoListWebsite
@root
// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite
Script
import { REACT_TODO_LIST_CONTENTS } from "https://esm.town/v/root/REACT_TODO_LIST_CONTENTS";
import { addReactFromValCDN } from "https://esm.town/v/root/addReactFromValCDN";
import { buildHtml } from "https://esm.town/v/root/buildHtml";
// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite
export function reactTodoListWebsite(req, res) {
console.log(res);
res.send(buildHtml({
scripts: [addReactFromValCDN()],
styles: REACT_TODO_LIST_CONTENTS.styles,
body: REACT_TODO_LIST_CONTENTS.body,
// Forked from @liamdanielduffy.reactTodoListWebsite
usefulGreenPenguin
@erhardik
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
// Utility for generating unique IDs
role: "intern",
skills: "Web Development, React, Node.js"
id: generateId(),
secretsanta
@jesi_rgb
@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";
function App() {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
loanCalculatorApp
@thecybergenius
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function LoanCalculator() {
return <LoanCalculator />;
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
linkInBioTemplate
@gigmx
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
export default async function(req: Request) {
return new Response(
infoboxCrawler
@stevekrouse
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import cheerio from "https://esm.sh/cheerio@1.0.0-rc.12";
import cytoscape from "https://esm.sh/cytoscape@3.23.0";
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
cytoscape.use(dagre);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
async function server(req: Request): Promise<Response> {
dialog
@jdan
dialog Renders windows 98 dialog boxes as SVGs. Using satori and styles from 98.css Usage https://jdan-dialog.web.val.run/? w =200& h =110& title =Hello& caption =World w (default: 200): the width of the dialog h (default: 110): the height of the dialog title (default: "{title}"): the text in the title bar caption (default: "{caption}"): the caption text
HTTP
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
import { Hono } from "npm:hono";
import satori from "npm:satori";
threeJsTorus
@yawnxyz
playing around with townie during a meeting >.>
HTTP
// This approach creates an interactive 3D scene using Three.js to display particles in a rotating donut shape.
// The scene is rendered client-side using WebGL.
export default async function server(request: Request): Promise<Response> {
previousMousePosition = {
x: event.clientX,
y: event.clientY
function onMouseMove(event) {
const deltaMove = {
x: event.clientX - previousMousePosition.x,
y: event.clientY - previousMousePosition.y
instancedMesh.rotation.y += deltaMove.x * 0.005;
instancedMesh.rotation.x += deltaMove.y * 0.005;
previousMousePosition = { x: event.clientX, y: event.clientY };
function onMouseUp(event) {
diplomaticApricotHeron
@gigmx
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
interface TokenLaunch {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
snakeclone
@veddevv
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;
selfEmbeddedNoFramework
@liamdanielduffy
// https://www.val.town/embed/liamdanielduffy.selfEmbedded
Script
function initResize(e) {
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(element).width, 10);
function resize(e) {
const width = startWidth + e.clientX - startX;
const height = startHeight + e.clientY - startY;
element.style.width = width + 'px';
e.preventDefault();
let startY = e.clientY;
const startTop = parseInt(document.defaultView.getComputedStyle(element).top, 10);
function drag(e) {
const deltaY = e.clientY - startY;
const newTop = startTop + deltaY;