Search
GDI_HelloWorldService
@rozek
This val is part of a series of examples to introduce "val.town" in my computer science course at
Stuttgart University of Applied Sciences . The idea is to motivate even first-semester students not to wait but to put their
ideas into practice from the very beginning and implement web apps with
frontend and backend. It contains a very simple HTTP end point responding with a static "Hello, World!".
To make it less boring, the response is rendered as ASCII art. In order to use it, send a request similar to the following https://rozek-gdi_helloworldservice.web.val.run/ The code was created using Townie - with only very few small manual corrections. This val is licensed under the MIT License.
HTTP
export default async function (req: Request): Promise<Response> {
const asciiArt = `
| _ | __/ | | (_) | \\ V V / (_) | | | | (_| |_|
valleGetValsContextWindow
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP
export default async function getValsContextWindow(model: any) {
prompt: "Write a val that uses OpenAI",
code: `import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
export default async function(req: Request) {
function tsResponse(code) {
Our Blob SDK also includes some utility functions to make working with blobs easier.
"\n```ts\nexport default async function (req: Request): Promise<Response> {\n return Response.json(\"Hello world\")\n}\n```",
"\n```ts\nexport default async function(req: Request): Promise<Response> {\n const query = new URL(req.url).searchParams;\n\n // Read name from the querystring or body. Defaults to \"you\" if not present.\n const name = query.get(\"name\") || (await req.json().catch(() => ({}))).name || \"you\";\n\n // Returns the HTML response\n return new Response(`<h1>Hi ${name}!</h1>`, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n```",
sqlite_admin_tables
@stevekrouse
@jsxImportSource https://esm.sh/hono@3.9.2/jsx
Script
/** @jsxImportSource https://esm.sh/hono@3.9.2/jsx **/
import { sqlite } from "https://esm.town/v/std/sqlite";
export async function sqlite_admin_tables() {
let data = await sqlite.execute(`
SELECT
web_ZpGJobSMe6
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_ZpGJobSMe6(req) {
return new Response(`<!DOCTYPE html>
<html>
for (let i = 0; i < 100; i++) {
particles.push(new Particle());
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
handleSanguineGithubWebhook
@nico
An interactive, runnable TypeScript val by nico
Script
import { fetch } from "https://esm.town/v/std/fetch";
import process from "node:process";
export async function handleSanguineGithubWebhook(
req: express.Request,
res: express.Response,
aqi
@adrianlee
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 = "japanese prespretarian church, seattle, wa, 98144"; // <-- change to place, city, or zip code
const data = await easyAQI({ location });
snakeclone
@veddevv
Snake clone with effects.
HTTP
const CELL_SIZE = CANVAS_SIZE / GRID_SIZE;
function ChatRoom() {
const [messages, setMessages] = useState([]);
</div>
function SnakeGame() {
const [snake, setSnake] = useState([{ x: 10, y: 10 }]);
</div>
function App() {
const [currentView, setCurrentView] = useState('menu');
</div>
function mountApp() {
const root = document.getElementById("root");
console.error("Root element not found");
async function server(request: Request): Promise<Response> {
return new Response(`
cleanup
@flymaster
Every day, this val sends a message to NTFY.sh, causing my phone to prompt me to fill out a Google Form recording a single object that I decluttered from my house that day.
Cron
export default async function(interval: Interval) {
const ntfyChannel = Deno.env.get("CLEANUP_NTFY");
const cleanupFormUrl = Deno.env.get("CLEANUP_FORM");
observantApricotGoat
@trentonallan
// 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",
ssr_a_web_component_for_fun
@brianleroux
demonstrates server-side rendering a web component
HTTP
import enhance from "jsr:@enhance/ssr";
export default async function() {
let html = enhance({
elements: {
"my-tag": function({ html }) {
return html`<b><slot></slot></b>`;
return new Response(html`<my-tag>my content</my-tag>`, { headers: { "content-type": "text/html" } });
ingeniousAmberBird
@lcarbonaro
An interactive, runnable TypeScript val by lcarbonaro
HTTP
export default async function (req: Request): Promise<Response> {
return Response.json({
name: "valtown",
runsToday
@neverstew
An interactive, runnable TypeScript val by neverstew
Script
import { runs as runs2 } from "https://esm.town/v/neverstew/runs";
export async function runsToday() {
const { default: startOfDay } = await import("npm:date-fns/startOfDay");
const runs = runs2({
html
@postpostscript
html: create sanitized HTML using tagged templates Examples import { html } from "https://esm.town/v/postpostscript/html"
const unsafeInput = "<script>alert(1)</script>"
console.log(html`Value: ${unsafeInput}`)
// Value: <script>alert(1)</script> These can be combined -- HTML marked as safe (instance is RawHTML ) will be directly inserted: const scripts = html`<script>alert(1)</script>`
console.log(html`<head>
${scripts}
</head>`.toString())
// <head>
// <script>alert(1)</script>
// </head> To easily create HTTP Response outputs like @stevekrouse/html, use the htmlResponse utility: import { html, htmlResponse } from "https://esm.town/v/postpostscript/html";
export default function(req: Request) {
return htmlResponse`
Request URL: ${decodeURIComponent(req.url)}
`;
} Tests: @postpostscript/htmlTest
Script
import { html, htmlResponse } from "https://esm.town/v/postpostscript/html";
export default function(req: Request) {
return htmlResponse`
return new RawHTML(this.toString().trim());
export function htmlEscape(text: string | RawHTML | unknown) {
if (text instanceof RawHTML) {
.replace(/>/g, ">"),
export function coerceString(value: unknown) {
if (typeof value === "string") {
freeFireMaxPanel
@Maheshsaini_7
@jsxImportSource https://esm.sh/react@18.2.0
Cron
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function FreeFireAnalytics() {
const [playerData, setPlayerData] = useState({
</div>
function client() {
createRoot(document.getElementById("root")).render(<FreeFireAnalytics />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(`
pyodideExecutor
@iamseeley
An interactive, runnable TypeScript val by iamseeley
Script
async function installPackages(pyodide: any, code: string) {
const importStatements = code.match(/import (\w+)|from (\w+)/g);
const packages = new Set<string>();
const micropip = pyodide.pyimport("micropip");
await micropip.install(micropipPackages);
export async function executePython(pyodide: any, code: string) {
await installPackages(pyodide, code);
return await pyodide.runPythonAsync(code);