Search
page
@rwev
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
const app = new Hono();
const stylesheet = (
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
app.get("/entry", async () => {
return new Response(
renderToString(
{stylesheet}
nasaAPOD
@rodrigotello
// Forked from @iBrokeit.nasaAPOD
Script
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
export const nasaAPOD = fetchJSON("cutt.ly/T7ksirK");
// Forked from @iBrokeit.nasaAPOD
datme_home_geo
@stevekrouse
@jsxImportSource npm:hono@3/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono@3/jsx */
// export default function Home(c) {
function Home(c) {
return c.html(
<Layout activeTab={new URL(c.req.url).pathname}>
<div class="max-w-lg mx-auto p-10">
<div class="mb-10">
<div class="text-4xl font-bold mb-4">
Date thoughtfully 2
</div>
serveUtils
@g
Serve Utils This val exports various utility functions, mainly the serve(commentFunction, contentType?) .
It enables easy serving of different files, while allowing the use of all string characters: // this is possible
const arr = ["Hello", 'world', `!`]; Townie Prompt This can be used as a replacement system prompt for Townie.
Townie will: Write client-side applications with vanilla JavaScript Serve them as different assets, ie. index.html , style.css and main.js Use modern module syntax, including importing modules directly from esm.sh on the client side Not reuse the same script for the server and client logic
CONTEXT
Answer requests with TypeScript programs that are written for Deno's runtime environment in Val Town.
1. Your answer should be code that is complete and directly runnable.
2. There should be no comments like "more content here".
3. Your response should start with ```ts and end with ```, ie full code fences. No yapping about what you are doing and why. If necessary, include minimal instructions for the user to add secrets or other setup requirements.
For changes to a single place within the code that only impact a few lines of code, respond with valid unified diff only, based on the code provided in the <current_code> tags in the system prompt.
1. Write valid unified diffs with change hunk headers. The file headers can be omitted.
2. Always based diffs off the latest version of the code provided in the <current_code> tags.
3. Ensure diffs use the ```diff language code fence.
4. If the diff is longer than 15 lines, too complex, or if you are not confident that it will work, respond with the full working code instead of creating a diff.
5. The decision to respond with a diff is one time. When you are asked to fix a simple bug, use a diff. The next request might ask for a more significant change, so respond with the complete fully working code containing the changes.
Responses should omit any information about installing or running Deno or dependencies.
Your val must export default an HTTP handler, which inputs and outputs web-standard Request and Response objects, respectively. This is almost the same interface as Cloudflare workers. The val should create a "export default async function server" which is the main function that gets executed on every HTTP request. When using libraries such as hono, you should `export default app.fetch`.
When writing complete code, start with a multiline comment explaining how your approach will work, what libraries or API calls you will use. When changes are requested, do not overwrite the original comment, instead add the requested changes to the end if they are significant enough.
QUIRKS
Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's not practical for the user's request (e.g. if they ask for a particular animated gif).
If you want an AI generated image, use https://maxm-imggenurl.web.val.run/the-description-of-your-image to dynamically generate one.
Do not use the Deno KV module for storage.
Do not use the alert() or input() methods.
You do not have access to the file system. Do not attempt to access, read, write or serve anything from the file system.
ENVIRONMENT VARIABLES
Don't use any environment variables unless strictly necessary. For example use APIs that don't require a key.
If you need environment variables use Deno.env.get('keyname')
IMPORTS
Prefix server-side imports with npm:
This syntax only works if the script is only ran on the server side. Otherwise, imports should be prefixed with https://esm.sh/ for npm and deno dependencies to ensure compatibility in the browser.
PERSISTENCE
Only use backend storage if explicitly required. Otherwise make a simple static client-side site.
If needed and if the user asks for something that requires persistence, use Val Town SQLite or Blob storage. Use the val's `import.meta.url` for the blob storage key or sqlite table name, unless specified by the user.
```ts
// Blob Storage
import { blob } from "https://esm.town/v/std/blob";
await blob.setJSON("myKey", { hello: "world" });
let blobDemo = await blob.getJSON("myKey");
let appKeys: { key: string; size: number; lastModified: string }[] = await blob.list("app_");
await blob.delete("myKey");
// SQLITE Storage
import { sqlite } from "https://esm.town/v/stevekrouse/sqlite";
let KEY = new URL(import.meta.url).pathname.split("/").at(-1);
(await sqlite.execute(`select * from ${KEY}_users where id = ?`, [1])).rows[0].id
// If you are changing a SQLite table's schema, you should also change the table's name so it creates a fresh table, ie by adding _2 or _3 after it everywhere. Ensure that tables are created before they are used.
```
OPENAI
If required, use the OpenAPI library as below. Notice that the api key must be omitted, as it is included during runtime:
```ts
import { OpenAI } from "https://esm.town/v/std/openai";
const openai = new OpenAI();
const completion = await openai.chat.completions.create({
messages: [
{ role: "user", content: "Say hello in a creative way" },
],
model: "gpt-4o-mini",
max_tokens: 30,
});
```
TEMPLATE
```tsx
/**
* This template creates a hono app that serves a client-side application.
* Use this template for any val you create for the user.
* Ensure that server-side and client-side code is clearly separated to prevent errors.
*
* All imports that are not from `https://esm.town` should use `https://esm.sh` to ensure compatibility.
*
* DO NOT USE window.alert()
*/
import { serve } from 'https://esm.town/v/g/serveUtils';
import { Hono } from 'npm:hono';
function html() {
/*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/styles.css">
<script type="module" src="/main.js" defer></script>
</head>
<body>
<h1 id="h1El">Tap to get the current date.</h1>
</body>
</html>
*/
}
function css() {
/*
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #232323;
color: white;
font-family: sans-serif;
}
*/
}
function js() {
/*
import df from 'https://esm.sh/dateformat';
const h1El = document.getElementById('h1El');
document.body.addEventListener('click', (ev) => {
ev.preventDefault();
h1El.textContent = df('HH:MM, dd/mm/yy');
});
*/
}
const app = new Hono();
app.get('/', serve(html, 'text/html'));
app.get('/styles.css', serve(css, 'text/css'));
app.get('/main.js', serve(js, 'text/javascript'));
export default app.fetch;
```
Script
# Serve Utils
This val exports various utility functions, mainly the `serve(commentFunction, contentType?)`.<br>
It enables easy serving of different files, while allowing the use of all string characters:
```ts
// this is possible
const arr = ["Hello", 'world', `!`];
export function getFunctionComment(fn) {
try {
return fn.toString().match(/\/\*\s*(.+)\s*\*\//s)[1];
} catch (err) {
shuffle
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
export async function shuffle(a) {
const { default: shuffle } = await import("npm:lodash");
return shuffle(a);
falSDXLExample
@isidentical
An interactive, runnable TypeScript val by isidentical
Script
import * as fal from "npm:@fal-ai/serverless-client";
fal.config({
// Can also be auto-configured using environment variables:
credentials: Deno.env.get("FAL_KEY"),
const prompt = "a cute and happy dog";
const result: any = await fal.run("fal-ai/fast-lightning-sdxl", { input: { prompt } });
console.log(result.images[0].url);
zodUnserializable
@tmcw
An interactive, runnable TypeScript val by tmcw
Script
export const zodUnserializable = (async () => {
const z = await import("npm:zod");
return z.object({ test: z.string() });
tanLadybug
@stevekrouse
content-checker is designed to be a modern, open-source library for programmatic and AI content moderation. Currently content-checker supports image and text moderation.
Thanks to LLMs in addition to detecting specific profane words, we can detect malicious intent in text.
So, a user who tries to circumvent the AI profanity filter by using a variation of a profane word, or even just a malicious phrase
without a specific word in the profanity list, will still be flagged. Image moderation is also supported, using the Inception V3 model of the NSFW JS library. Future features will include moderation tools (auto-ban, bots), more powerful models, and multimedia support for video and audio moderation. To get an API key for the AI endpoints sign up free at https://www.openmoderator.com
To install content-checker do npm install content-checker and check out the README: https://github.com/utilityfueled/content-checker
HTTP (deprecated)
`content-checker` is designed to be a modern, open-source library for programmatic and AI content moderation. Currently content-checker supports image and text moderation.
Thanks to LLMs in addition to detecting specific profane words, we can detect malicious **intent** in text.
So, a user who tries to circumvent the AI profanity filter by using a variation of a profane word, or even just a malicious phrase
without a specific word in the profanity list, will still be flagged. Image moderation is also supported, using the Inception V3 model of the NSFW JS library.
Future features will include moderation tools (auto-ban, bots), more powerful models, and multimedia support for video and audio moderation.
To get an API key for the AI endpoints sign up free at https://www.openmoderator.com
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
const apiKey = Deno.env.get("OPEN_MODERATOR_API_KEY");
if (!apiKey) {
bilitest
@nishui
An interactive, runnable TypeScript val by nishui
Script
export async function bilitest(req: express.Request, res: express.Response) {
const axios = await fetch("npm:axios");
const url = "https://music.163.com/#/song?id=2008568696";
try {
const response = await axios(url, {
headers: {
"Access-Control-Allow-Origin": "*",
const data = response.data;
// 在这里对data进行处理
return res.send(data);
reactExample
@nbbaier
@jsxImportSource https://esm.sh/react
Script
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
export const reactExample = () =>
new Response(renderToString(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
preactExample
@stevekrouse
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
export const preactExample = () =>
new Response(render(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
sqliteExportHelpers
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
export const sqlToJSON = (result: ResultSet) => {
const { columns, rows } = result;
return rows.map(row =>
columns.reduce((obj, col, index) => {
obj[col] = row[index];
return obj;
export const sqlToCSV = (result: ResultSet) => {
try {
const { columns, rows } = result;
const records = sqlToJSON(result);
react_http
@stevekrouse
Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
export function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Example App</h1>
<button
onClick={() => setCount(count + 1)}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
{count}
</button>
</div>
);
}
export default () =>
react_http({
component: App,
sourceURL: import.meta.url,
head: `<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Example App</title>`,
}); Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.
Script
# Client Side React Helper
## Example Usage
```tsx
/** @jsxImportSource https://esm.sh/react */
export function App() {
const [count, setCount] = useState(0);
export default function({ component, sourceURL, head }: { component: Function; sourceURL: string; head?: string }) {
return new Response(
`<html>
<head>${head || ""}</head>
remarkDemoJSX
@stevekrouse
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
export const remarkDemoJSX = async (req: Request) =>
new Response(
render(
<html>
<head>
<title>Title</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
env
@yawnxyz
This is used to load .env secrets from either a Node or a Deno environment. This is used for projects converted to Node projects with dnt — so you can use valtown in your Node projects!
Script
This is used to load .env secrets from either a Node or a Deno environment. This is used for projects converted to Node projects with dnt — so you can use valtown in your Node projects!
try {
await import('dotenv/config');
} catch (error) {
// Ignore if dotenv is not available or fails to import
console.log('Dotenv import failed or not available:', error.message);
try {
await import("jsr:@std/dotenv/load");
} catch (error) {
// Ignore if @std/dotenv/load is not available or fails to import