Search

circles

@pomdtr

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

changes.push(row2);

return changes;

const clientCode = () => {

const height = 600;

const width = 600;

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

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

</script>

</body>

SupabaseAuthExample

@tkneisly

An interactive, runnable TypeScript val by tkneisly

HTTP

headers: {

"content-type": "text/html",

const { createClient } = await import("https://esm.sh/@supabase/supabase-js@2");

const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);

const url = new URL(request.url);

if (url.pathname === "/auth/signup" && request.method === "POST") {

slogan_history

@timqian

@jsxImportSource https://esm.sh/react

HTTP

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

import { ArrowDownIcon, ChevronRightIcon } from "npm:@heroicons/react/20/solid";

import { Hono } from "npm:hono@3";

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

const timeline = [

reactExample

@tmcw

@jsxImportSource https://esm.sh/react

HTTP

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

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

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

infiniteSVGGraph

@maxm

Infinite SVG Graph A connected graph of AI-generated SVG images. Ask it to make any kind of SVG. Add your contribution to the graph. Make it POP!

HTTP

await sqlite.execute(`SELECT * FROM ${tableName} ORDER BY heart_count DESC, RANDOM() LIMIT 100`),

// Client side javascript and template functions.

const clientJavascript = async () => {

window.switchTab = (event, tabName) => {

const buttonContainer = button.closest(".heart-button-container");

const buttonRect = button.getBoundingClientRect();

fetch(`/${button.attributes["data-id"].value}/heart`, { method: "POST" });

</body>

JxnblkApp

@jxnblk

React components for https://val.town/v/jxnblk/dotcom – https://jxnblk.com

Script

React components for <https://val.town/v/jxnblk/dotcom> – <https://jxnblk.com>

// core react component for jxnblkio

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

// import { MdContrast } from "https://esm.sh/react-icons/md";

import React from "https://esm.sh/react@18.3.1";

import { useMemo, useState } from "https://esm.sh/react@18.3.1";

import { Avatar } from "https://esm.town/v/jxnblk/avatar";

import { colors, css } from "https://esm.town/v/jxnblk/JxnblkCSS";

import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts";

import { Vantom } from "https://esm.town/v/jxnblk/vantom";

color?: number;

export const routes: Record<Route, React.FunctionComponent> = {

[Route.Home]: Home,

manage_users

@kajgod

@jsxImportSource https://esm.sh/preact

HTTP

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

import css from "https://esm.town/v/kajgod/manage_users_css";

import { getDatabaseStructure, getFormData, getUsersList } from "https://esm.town/v/kajgod/manage_users_db";

import js from "https://esm.town/v/kajgod/manage_users_js";

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

const UserRow = ({ user }) => {

const [id, name, surname, email, timestamp] = user;

sqliteExplorerApp

@aanand700

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

HTTP

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

wordclock

@manyone

this clock updates the time every 5 minutes at the 5 minute marks and displays the time by highlighting the letters on the board that spells the time.

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 BOARD = [

</div>

function client() {

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

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

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

WebSiteReact

@vyatka

Simple HTML page with react-dom/server

HTTP

# Simple HTML page

with react-dom/server

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

import React from "https://esm.sh/react@18.2.0";

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

export default function(_req: Request) {

period: "2021 - Present",

description: "Led development of scalable web applications using React, TypeScript, and microservices architecture."

company: "WebCraft Agency",

"React", "TypeScript", "Node.js",

"Tailwind CSS", "GraphQL", "Docker"

excaliVal

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP

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

import confetti from "https://esm.sh/canvas-confetti@1.6.0";

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

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

const NAMING_OPTIONS = {

const fireConfetti = (event) => {

const rect = event.target.getBoundingClientRect();

const x = (rect.left + rect.right) / 2 / window.innerWidth;

</div>

function client() {

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

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

client();

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

linkInBioTemplate

@shreyasmakes

@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(

Badge_Generator

@muhammad_owais_warsi

val.town Badge Generator Generate your own val.town badge to embed onto your websites.

HTTP

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

import React from "https://esm.sh/react";

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

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

function Badge({ username, title }) {

function App() {

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

const [title, setTitle] = React.useState("");

const [embedCode, setEmbedCode] = React.useState("");

const generateEmbedCode = () => {

preactTest

@tmcw

An interactive, runnable TypeScript val by tmcw

Script

export const preactTest = (async () => {

const { useState, h, htm, renderToString } = await import(

"https://npm.reversehttp.com/preact,htm,preact/hooks,preact-render-to-string"

const html = htm.bind(h);

function Component() {

reactExample

@stevekrouse

@jsxImportSource https://esm.sh/react

2 1

HTTP

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

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

export const reactExample = () =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

…

49 50

52 53

…

252