Search

Results include substring matches and semantically similar vals. Learn more
rozek avatar
Authorization_from_SQLite
@rozek
Some tests can be found in val Authorization_from_SQLite_Test
Script
expectStringMatching, expectInstanceOf
} from 'https://rozek.github.io/javascript-interface-library/dist/javascript-interface-library.esm.js'
export async function RequestIsAuthorized(
ValRequest:Request, TableName:string
):Promise<boolean> {
steveb1313 avatar
spellCheck
@steveb1313
An interactive, runnable TypeScript val by steveb1313
Express (deprecated)
import { fetch } from "https://esm.town/v/std/fetch";
export async function spellCheck(req: express.Request, res: express.Response) {
let response = await fetch("https://www.dnd5eapi.co/api/spells");
<h3>Description: ${spell["desc"][0]}</h3>
<button onclick="myFunction()">Reveal Spell</button><br>
<div id="myDIV"></div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
shreyasmakes avatar
aqi
@shreyasmakes
AQI Alerts Get email alerts when AQI is unhealthy near you. Set up Click Fork Change location (Line 4) to describe your location. It accepts fairly flexible English descriptions which it turns into locations via nominatim's geocoder API . Click Run Background This val uses nominatim's geocoder to get your lat, lon, and air quality data from OpenAQ. It uses EPA's NowCast AQI Index calculation and severity levels. Learn more: https://www.val.town/v/stevekrouse.easyAQI
Cron
import { email } from "https://esm.town/v/std/email?v=9";
import { easyAQI } from "https://esm.town/v/stevekrouse/easyAQI?v=5";
export async function aqi(interval: Interval) {
const location = "Camden, London"; // <-- change to place, city, or zip code
const data = await easyAQI({ location });
jxnblk avatar
ReactStream
@jxnblk
React SSR and client-side hydration for Val Town Usage /** @jsxImportSource https://esm.sh/react */ import { render, React } from "https://esm.town/v/jxnblk/ReactStream"; function App() { const [count, setCount] = React.useState(0); return ( <html> <body> <h1>ReactStream</h1> <p>React SSR with client-side hydration in Val Town</p> <pre>{count}</pre> <button onClick={() => setCount(count - 1)}>-</button> <button onClick={() => setCount(count + 1)}>+</button> </body> </html> ); } export default render(App, import.meta.url); Live example To render static HTML without hydration, pass false as the second argument. export default render(App, false); Middleware Custom middleware can be added in an array as the third argument. Middleware can add data to the req.data object or return a response for things like API endpoints. export default render(App, import.meta.url, [ analytics, robots("User-agent: *\nAllow: /"), getInitialProps ]) robots.txt ReactStream has a built-in middleware to handle request to /robots.txt import { render, robots } from "https://esm.town/v/jxnblk/ReactStream"; // ... export default render(App, import.meta.url, [ robots("User-agent: *\nAllow: /"), ]) Add a backend request handler // example middleware async function api (req: Request, res: Response, next): Promise<Response> { if (req.pathname !== "/api") return next(); if (req.method === "POST") { return Repsonse.json({ message: "Hello POST request" }); } return Response.json({ ok: true }); } export default render(App, import.meta.url, [ api ]); Fetch data on the server to set initial props // example middleware async function getInitialProps (req: Request, res: Response, next) { // fetch data or do async work to pass as props to the component req.data = { hello: "props", }; return next(); } export default render(App, import.meta.url, [ getInitialProps ]); Starter template /** @jsxImportSource https://esm.sh/react */ import { render } from "https://esm.town/v/jxnblk/ReactStream"; function App () { return ( <html> <head> <title>ReactStream</title> </head> <body> hello </body> </html> ); } export default render(App, import.meta.url, []); React requires matching versions for SSR and hydration. Import React from https://esm.town/v/jxnblk/ReactStream to ensure your component uses the same version as this library (currently react@18.3.1). Inspired by https://www.val.town/v/stevekrouse/react_http & https://www.val.town/v/stevekrouse/reactClientDemo
Script
import { render, React } from "https://esm.town/v/jxnblk/ReactStream";
function App() {
const [count, setCount] = React.useState(0);
// example middleware
async function api (req: Request, res: Response, next): Promise<Response> {
if (req.pathname !== "/api") return next();
// example middleware
async function getInitialProps (req: Request, res: Response, next) {
// fetch data or do async work to pass as props to the component
import { render } from "https://esm.town/v/jxnblk/ReactStream";
function App () {
return (
cookie: string;
export function render<T>(
/** Root-level React component that renders an entire <html> element
hydrateRoot(document, <Component {...props} />);
return async function handler(request: Request): Promise<Response> {
const main = reactStream(Component, module);
): Middleware =>
async function(req: DataRequest, res: Response): Promise<Response> {
const { renderToReadableStream } = await import("https://esm.sh/react-dom@18.3.1/server");
pomdtr avatar
article
@pomdtr
Use readme as website Usage import {article} from "https://esm.town/v/pomdtr/article" export default article() See this val http endpoint as an example: https://pomdtr-article.web.val.run
HTTP
import { gfm } from "https://esm.town/v/pomdtr/gfm";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export function article({
val,
title,
jamiedubs avatar
syntheticLoot
@jamiedubs
dark greetings cryptoadventurers. This val will print the contents of a given Ethereum wallet's Synthetic Loot , which is procedurally generated from your wallet address. To look at your sLoot in a browser with some fun pixel art, check out timshel's Synthetic Loot Viewer to use this endpoint, pass ?address=0x... e.g. https://jamiedubs-syntheticloot.web.val.run/?account=0xf296178d553c8ec21a2fbd2c5dda8ca9ac905a00 the default response type is JSON. You can also get a simple list of the loot bag contents using ?format=text . e.g. https://jamiedubs-syntheticloot.web.val.run/?account=0xf296178d553c8ec21a2fbd2c5dda8ca9ac905a00&format=text
HTTP
// const svg = `<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 350 350"><style>.bas
async function fetchAndParseSvgFromJson(account: string) {
try {
class: string;
function parseElementsFromSvg(svgString: string): SvgTextElement[] {
const parser = new DOMParser();
return parsedElements;
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
faseeu avatar
ampleIndigoJunglefowl
@faseeu
@jsxImportSource https://esm.sh/react
HTTP
import anime from "https://esm.sh/animejs@3.2.1";
function App() {
return (
</div>
function BackgroundAnimation() {
const svgRef = useRef(null);
</svg>
function Header() {
const headerRef = useRef(null);
</header>
function Hero() {
const heroRef = useRef(null);
</section>
function Features() {
const featuresRef = useRef(null);
</section>
function Footer() {
return (
</footer>
function client() {
createRoot(document.getElementById("root")).render(<App />);
client();
export default async function server(request: Request): Promise<Response> {
return new Response(`
pomdtr avatar
getVal
@pomdtr
GET /v1/vals/{val_id} Gets information about a specific val. To access private vals, pass your API token as a secret to the function. Read more about authentication to understand how to generate a token and save it as a secret.
Script
Gets information about a specific val.
To access private vals, pass your API token as a secret to the function. Read more about [authentication](https://docs.val.to
postpostscript avatar
authIdUserGuide
@postpostscript
authIdUserGuide: steps necessary to sign in as you to HTTP vals which support this pattern Required Val: @[your username/authId Fork @postpostscript/authId Required Val: @[your username/jwks Setup Fork @postpostscript/jwks Set JWKS Environment Variables Go to https://postpostscript-generatejwksenv.web.val.run/?prefix=JWKS Follow the steps there with the prefix "JWKS" Test it out! Go to this val's endpoint Enter your username and click "Go to Your Sign In Page" You are now on your sign in page that you completely control ! Click "Send Sign In Link to My Email" Check for an email with the subject line "Sign In Request" and click the "Sign In" link Review the permissions that the val has asked for. The only token scope that is currently required is "@[your username]/authId/id". If a val has requested any others, you may optionally accept them here Click "Provide Access" You are now signed in!
HTTP
const app = new Hono();
const name = getValNameFromUrl(import.meta.url);
async function createPage(content: unknown) {
const [
footer,
Moh2025 avatar
lovingCoffeeSalamander
@Moh2025
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function App() {
const [count, setCount] = useState(0);
</div>
function client(youths aged15-25) {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "Financial Literacy") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(`
nunnyu avatar
responsibleFuchsiaImpala
@nunnyu
// Fetches a random joke.
Script
import { email } from "https://esm.town/v/std/email?v=9";
// Fetches a random joke.
async function fetchRandomJoke() {
const response = await fetch(
"https://official-joke-api.appspot.com/random_joke",
mickey_24 avatar
fantasticEmeraldSquid
@mickey_24
An interactive, runnable TypeScript val by mickey_24
HTTP
export default async function (req: Request): Promise<Response> {
return Response.json({ ok: true })
stevekrouse avatar
devNull
@stevekrouse
Dev Null A JS function and API inspired by /dev/null that will throw away whatever you send it and return null . Function usage @stevekrouse.devNull("useless data") API Usage https://api.val.town/v1/run/stevekrouse.devNull?args=[%22useless%20data%22] Why? Honestly I don't know why you'd use this function. I just made it as a joke to link to it from @stevekrouse.dm . I guess you could also use it a joke to send data you want to call attention to the fact that you very much don't care about it, ie I really don't care about the price of bitcoin: @stevekrouse.devNull(await @stevekrouse.currency("usd", "btc"))
Script
# Dev Null
A JS function and API inspired by `/dev/null` that will throw away whatever you send it and return `null`.
## Function usage
@stevekrouse.devNull("useless data")
## Why?
Honestly I don't know why you'd use this function. I just made it as a joke to link to it from [@stevekrouse.dm](https://www.
@stevekrouse.devNull(await @stevekrouse.currency("usd", "btc"))
export function devNull(...args: any[]) {
return null;
rustyb avatar
getTelAvivMobilitySpots
@rustyb
An interactive, runnable TypeScript val by rustyb
Script
crs: unknown;
features: unknown[];
export async function getTelAvivMobilitySpots() {
// const url =
// "https://gisn.tel-aviv.gov.il/arcgis/rest/services/IView2/MapServer/860/query?where=1=1&outFields=*&f=geojson";
suhaasy avatar
azureNewt
@suhaasy
// Fetches a random joke.
Cron
import { email } from "https://esm.town/v/std/email?v=9";
// Fetches a random joke.
async function fetchRandomJoke() {
const response = await fetch(
"https://official-joke-api.appspot.com/random_joke",