Search

status

@adrianmg

Uptime Status Page This val is the status page for the data generated by this uptime cron: @stevekrouse/uptime

HTTP (deprecated)

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

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

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

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

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

function StatusRow({ rows }) {

todoListScript

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

HTTP (deprecated)

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

import { jsx as _jsx } from "https://esm.sh/react/jsx-runtime";

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

const root = createRoot(document.getElementById("app"));

stitchVal

@yawnxyz

inspired by https://x.com/dankuntz/status/1813283813881225625 written by Sonnet-3.5 with ~12 prompts and some final manual tweaks

HTTP (deprecated)

window.addEventListener('resize', onWindowResize);

function onMouseMove(event) {

currentPoint.set(event.clientX, window.innerHeight - event.clientY);

if (isPressed) {

dragVector.subVectors(currentPoint, clickPoint);

function onMouseDown(event) {

isPressed = true;

clickPoint.set(event.clientX, window.innerHeight - event.clientY);

currentPoint.copy(clickPoint);

dragVector.set(0, 0);

calendlyThisWeekEvents

@ejfox

* This API integrates with Calendly to fetch personal events for the current week. * It returns the events as raw JSON. * * Note: This requires a Calendly Personal Access Token to be set as an environment variable.

HTTP

* It returns the events as raw JSON.

* Note: This requires a Calendly Personal Access Token to be set as an environment variable.

// Server-side code

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

const calendlyToken = Deno.env.get('CALENDLY_TOKEN');

template

@liam

Starter template for Substrate demos

HTTP (deprecated)

const startup_name = new ComputeText({

prompt:

`Give me a unique startup name inside <name></name> tags related to ${prompt}. Example: <name>Hyphae</name><description

const haiku = new ComputeText({

prompt: sb.concat(

spanishLesson

@substrate

Generates spanish flashcards on a topic, including generated images and speech. 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits

HTTP (deprecated)

The page should start with the topic in a centered heading: ${input}.

Then it should have two "flash cards" for the two phrases.

The flashcards should be positioned in a single row, side by side horizontally.

The text in the cards should be black, and the background should be white.

The flash cards should start with the spanish example.

VALLEDRAW

@heaversm

VALL-E-DRAW LLM code generation for vals, on a canvas! Make apps with a frontend, backend, and database. First you need a working version of VALL-E. Follow the steps here . Fork this val, and update the iframeSrc to point to your working version of VALL-E. Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!

HTTP

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

export default valledrawclient({

iframeSrc: "https://janpaul123-valle.web.val.run",

@zzz

// https://api.val.town/v1/express/zzz.IP

Script

// https://api.val.town/v1/express/zzz.IP

export async function IP(req, res) {

const ip = req.get("true-client-ip") ??

req.get("x-forwarded-for")?.split(",")[0];

res.send(ip);

htmlTags

@xkonti

// CONTENT SECTIONING

Script

export function articleTag(content: HtmlContents | undefined = undefined): Tag {

return basicTag("article", content);

export function asideTag(content: HtmlContents | undefined = undefined): Tag {

return basicTag("aside", content);

export function footerTag(content: HtmlContents | undefined = undefined): Tag {

return basicTag("footer", content);

twitterAuthHandler

@andreterron

An interactive, runnable TypeScript val by andreterron

Script

{ client_id, client_secret, redirect_uri, scopes, storage }: {

client_id: string;

client_secret: string;

const { Client, auth } = await import("npm:twitter-api-sdk");

const authClient = new auth.OAuth2User({

client_id,

client_secret,

const client = new Client(authClient);

const authUrl = authClient.generateAuthURL({

client_id,

invoice_basic_theme

@pomdtr

@jsxImportSource npm:preact

Script

/** @jsxImportSource npm:preact */

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

import clsx from "npm:clsx";

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

export const render: RenderFunc = ({ title, table, to, from, details }) => {

return preactRender(

<html>

freshChartsExample

@maxm

Deno Fresh Charts Example Cobbled together from here: https://github.com/denoland/fresh_charts/tree/main/examples Render charts as HTML or as images. This image is rendered by the val below:

HTTP (deprecated)

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

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

// fresh_charts expects React to be available on globalThis/window, not sure why!

globalThis.React = React;

import { Chart, renderChart } from "https://deno.land/x/fresh_charts/mod.ts";

import { ChartColors, transparentize } from "https://deno.land/x/fresh_charts/utils.ts";

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

const chart = () => ({

beckerBarley

@fil

Becker’s Barley trellis SSR chart with Observable Plot This chart is rendered server-side by val.town, using Observable Plot, from data loaded from the GitHub API. For a more complete example, see https://www.val.town/v/fil.earthquakes. For information on this chart, see https://observablehq.com/@observablehq/plot-barley-trellis.

HTTP

## SSR chart with Observable Plot

This chart is rendered server-side by val.town, using Observable Plot, from data loaded from the GitHub API. For a more compl

![chart](https://fil-beckerBarley.web.val.run/)

valleGetValsContextWindow

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

HTTP

prompt: "Generate a val that uses React to render HTML",

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

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

export const reactExample = (request: Request) =>

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

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

export const preactExample = (request: Request) =>

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

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

sidebar:

arithmeticseries

@gueejla

Visualize sum of an entered arithmetic progression

HTTP (deprecated)

/** @jsxImportSource npm:react **/

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

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

return new Response(

…

47 48

50 51

…

184