Search

PaintSeq

@youkq95

@jsxImportSource https://esm.sh/react

HTTP

return composition;

function GroupConfigModal({

groups,

</div>

function App() {

const [sequence, setSequence] = useState("");

</div>

function client() {

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

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

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

return new Response(

instantdbCursorsDemo

@vawogbemi

@jsxImportSource https://esm.sh/react

HTTP

"flex h-screen w-screen items-center justify-center overflow-hidden font-mono text-sm text-gray-800 touch-none";

function InstantCursorsProvider(props: { children: JSX.Element }) {

const db = init({

{props.children}

function App() {

return (

</div>

function client() {

createRoot(document.getElementById("root")).render(

client();

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

return new Response(

handler

@thesophiaxu

An interactive, runnable TypeScript val by thesophiaxu

Script

export async function handler(req, res) {

console.email(JSON.stringify(req.body, null, 4), "Hello from Val.town!");

callGoogleSheetsAPI

@clayway

Wrapper around Google Sheets API v4. You will need: a Google Cloud service account the Google Sheets API v4 enabled in your Google Cloud project the spreadsheet ID (provide it in the sheetId parameter) Share the spreadsheet with the service account Make a JSON key for the service account, minify it and set it as a secret. Use the secret for the serviceAccount parameter. Figure out the action you want to perform. You will need to provide everything that comes after {spreadsheetId}/ as the action parameter. For example: values/A1:C1:append?valueInputOption=RAW Figure out the request body. For example: {values: [["foo", "bar", "baz"]]}

Script

action: string;

data: object;

export async function callGoogleSheetsAPI(

{ serviceAccount, sheetId, action, data }: Args,

const { getToken } = await import(

val_BoN8lgrbOT

@dhvanil

An interactive, runnable TypeScript val by dhvanil

Script

export default async function handler(req) {

try {

const result = await (async () => {

zod_demo_http

@stevekrouse

This val shows how to break up your HTTP val into three vals: @stevekrouse/zod_demo_http (this val) @stevekrouse/zod_demo_frontend (client-side react component) @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend) I have these vals in a folder. Unfortunately, folders are not publicly shareable, which is why I listed all the vals above. The Val Town full-screen editor makes it a lot easier to work with multiple vals at once. The trickiest and most interesting part of this particular demo is how we import just the zod type in the frontend which avoids the error if we were to import any real value from that shared file. In this sense, it's not a truly safe shared file. Open questions I don't know why zod types aren't working when imported via esm.sh I don't know how we would get zod validation working on the frontend without reimporting zod from esm.sh (which would then lose us types or require us to duplicate the zod code)

HTTP

import { z } from "npm:zod@3.21.4";

import { UserSchema } from "./zod_demo_shared";

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

if (request.method === "POST" && new URL(request.url).pathname === "/register") {

try {

confession

@alp

An interactive, runnable TypeScript val by alp

Script

Yet here I am, swamped with guilt. Despite my code running smoothly, the weight of my

transgressions bears heavily upon me. I see the sneaky shortcuts in my code, each one a

deceptively functional fetchProxy instance, and I can't help but feel like a sneaky

impostor, a charlatan.

I beseech you, val.town overlords, for guidance in my journey towards understanding and

respecting the limitations of fetchProxy. May the power of async and await continue to

guide me, and may I resist the seductive whispers of unsupported, yet seemingly functional,

concurrency.

Forgive me, val.town, for while I reaped success, I knew deep down that I had treaded on

aiVideoApp

@Priyansh

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

HTTP

recommendedDuration: number; // in seconds

function AIVideoApp() {

const [user, setUser] = useState<User | null>(null);

</div>

function client() {

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

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

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

const { OpenAI } = await import("https://esm.town/v/std/openai");

const openai = new OpenAI();

const url = new URL(request.url);

// Simulated video analysis (in a real scenario, you'd use a more advanced video processing service)

const analysisResponse = await openai.chat.completions.create({

messages: [

// Generate video concept

const conceptResponse = await openai.chat.completions.create({

messages: [

getSiteMetadata

@nbbaier

An interactive, runnable TypeScript val by nbbaier

HTTP

import urlMetadata from "npm:url-metadata";

import { z } from "npm:zod";

export async function getUrlMetadata(url: string) {

try {

const metadata = await urlMetadata(url);

LampBlogs

@AppleLamps

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

HTTP

function Alert({ variant, children }) {

function AlertDescription({ children }) {

function Message({ type, content }) {

function App() {

function client() {

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

const { OpenAI } = await import("https://esm.town/v/std/openai");

const openai = new OpenAI();

const randomTopicCompletion = await openai.chat.completions.create({

const completion = await openai.chat.completions.create({

refs

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";

import StackTrace from "npm:stacktrace-js";

export function selfRef() {

const stacktrace = StackTrace.getSync();

const moduleURL = stacktrace[1]?.fileName;

return moduleURL ? extractValInfo(moduleURL) : null;

export function callerRef() {

const stacktrace = StackTrace.getSync();

const moduleURL = stacktrace[2]?.fileName;

comicalMaroonMastodon

@adofficial

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

HTTP

Legend

function calculateLoanDetails(principal: number, annualRate: number, years: number) {

const monthlyRate = annualRate / 100 / 12;

amortizationSchedule

function App() {

const [principal, setPrincipal] = useState(200000);

</div>

function client() {

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

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

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

return new Response(`

sqliteAdminDashboard

@stevekrouse

Simple SQLite dashboard made by townie in this video: https://x.com/stevekrouse/status/1833577807093371325

HTTP

// It uses React for the frontend and the Val Town SQLite API for database operations

// Now includes functionality to edit rows, using rowid or all columns as identifiers

// and the ability to add new rows to tables

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

function App() {

const [tables, setTables] = useState([]);

</div>

function client() {

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

client();

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

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

val_hTN41dqWCU

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export default async function handler(req) {

try {

const result = await (async () => {

increasefindingmyvoicecounter

@politelyinvinciblepointer

An interactive, runnable TypeScript val by politelyinvinciblepointer

Script

let { findingmyvoicecounter } = await import("https://esm.town/v/politelyinvinciblepointer/findingmyvoicecounter");

export function increasefindingmyvoicecounter() {

findingmyvoicecounter++;

…

116 117

118

119 120

…

460