Search
p5
@saolsen
P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5";
export function setup() {
createCanvas(400, 400);
}
export function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
import { sketch } from "https://esm.town/v/saolsen/p5";
export default sketch(import.meta.url); How it works The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default sketch export) so you can't call any Deno functions, environment variables, or other server side apis.
Script
# P5 sketch
Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example.
## Usage
* Make a p5 sketch, you can import the p5 types to make it easier.
```typescript
* Export any "global" p5 functions. These are functions like `setup` and `draw` that p5 will call.
export function sketch(module: string): (req: Request) => Response {
return function(req: Request): Response {
return new Response(
<html>
reloadOnSave
@stevekrouse
Live reload in new tabs When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that. Usage import { html } from "https://esm.town/v/stevekrouse/html";
import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> {
return html(`<h1>Hello!!</h1>`);
})
Script
# Live reload in new tabs
When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that.
## Usage
```ts
export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> {
return html(`<h1>Hello!!</h1>`);
// this script runs client-side
export const reloadOnVals = async function(vals: ValRef[]) {
const valVersions = await Promise.all(vals.map(getCurrentValVersionNumber));
// console.log("initialValVersions: ", valVersions);
dns
@stevekrouse
@jsxImportSource npm:hono@3/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
export default valTownBadgeMiddleware(app.fetch, import.meta.url);
app.get("/", (c) => {
return c.html(
<html>
<head>
<title>DNS Lookup Tool</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="https://fav.farm/🔎" />
tailwind
@moe
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
export default (req: Request) => {
const url = new URL(req.url)
const qp = url.searchParams.get("text")
// console.log(qp)
return reactResponse(
<html>
<head>
<title>Tailwind test</title>
<script src="https://cdn.tailwindcss.com" />
honoTanaEndpoint
@impedivity
An interactive, runnable TypeScript val by impedivity
HTTP (deprecated)
const token = Deno.env.get("tanaInputAPI");
export const honoTanaEndpoint = async (req: Request) => {
const app = new Hono();
app.get("/", async (c) => {
let { text, url } = c.req.query();
console.log(c.req);
const payload: APIPlainNode = {
name: text,
children: [
// type: "field",
huggingface
@kora
// const repo: RepoDesignation = { type: "model", name: "myname/some-model" };
Script
createRepo,
deleteFile,
deleteRepo,
listFiles,
uploadFiles,
uploadFilesWithProgress,
whoAmI,
} from "npm:@huggingface/hub";
// const repo: RepoDesignation = { type: "model", name: "myname/some-model" };
const credentials: Credentials = { accessToken: Deno.env.get("HF_TOKEN") };
vscode
@xuybin
VS Code running from val.town ! Yep you can run it from the vscode extension .
HTTP (deprecated)
# VS Code running from val.town !
Yep you can run it from the [vscode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.valtown).
/** @jsxImportSource https://esm.sh/hono@3.11.8/jsx **/
const script = `Object.keys(self.webPackagePaths).map(function (key, index) {
self.webPackagePaths[
key
] = \`https://cdn.jsdelivr.net/npm/vscode-web@1.82.0/dist/node_modules/\${key}/\${self.webPackagePaths[key]}\`;
require.config({
baseUrl: \`https://cdn.jsdelivr.net/npm/vscode-web@1.82.0/dist/out\`,
valle_tmp_140068690648343496787358158586876
@janpaul123
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });
const username = "jsherfavr"; // Replace with your Val Town username
const app = new Hono();
const jsxResponse = (jsx) => {
return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });
const systemprompt = `The conversation below is your recent interaction with the user.
Your entire response should only be TypeScript.
Your response should start with \`\`\`ts and end with \`\`\`.
Make an HTTP val (other vals are currently not supported to run, even though we have examples for them).
confetti
@git
An interactive, runnable TypeScript val by git
HTTP (deprecated)
export default async () =>
new Response(
`<script type="module">
import confetti from "https://esm.sh/canvas-confetti";
confetti();
</script>`,
{ headers: { "Content-Type": "text/html" } },
policybuilder
@avboy72
@jsxImportSource npm:react
HTTP (deprecated)
/** @jsxImportSource npm:react **/
import { renderToString } from "npm:react-dom@18/server";
export default (req: Request) => {
return new Response(
"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<style>\r\nbody, html {\r\n height: 100%;\r\n margin: 0;\r\n}\r\n\r\n.bg {\r\n \/* The image used *\/\r\n background-image: url(\"https:\/\/iitd.com.ua\/wp-content\/uploads\/2023\/08\/policy-builder-1.gif\");\r\n\r\n \/* Full height *\/\r\n height: 100%; \r\n\r\n \/* Center and scale the image nicely *\/\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"bg\"><\/div>\r\n\r\n<\/body>\r\n<\/html>",
{ headers: { "Content-Type": "text/html" } },
main
@henrique
An interactive, runnable TypeScript val by henrique
HTTP (deprecated)
import process from "node:process";
export async function main(prompt: string) {
const { useCursive } = await import("npm:cursive");
const cursive = useCursive({ openAI: { apiKey: process.env.OPENAI_API_KEY } });
const res = await cursive.ask({
prompt,
return res.answer;
dbToAPIFrontend
@nbbaier
@jsxImportSource https://esm.sh/hono@3.9.2/jsx
Script
/** @jsxImportSource https://esm.sh/hono@3.9.2/jsx **/
const Layout: FC = (props) => {
return (
<html>
<head>
<title>Val Town Blob Server</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body class="bg-gray-50 p-8">{props.children}</body>
</html>
reactExample
@dm
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
function HelloWorld() {
return (
<h1 className="text-3xl font-bold underline">
Hello world! Cleaned up, w/ props
</h1>
function Html({ content }) {
return (
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
lucia_hono
@saolsen
// deno-lint-ignore-file no-namespace
HTTP (deprecated)
// deno-lint-ignore-file no-namespace
/** @jsxImportSource jsr:@hono/hono/jsx **/
namespace schema {
export const KEY = new URL(import.meta.url).pathname.split("/")
.at(-1)!;
export type UserId = string & {
readonly UserId: unique symbol;
export const UserId = z
.string()
.startsWith("u_")
hiNicoFromGists
@stevekrouse
Import from Github Gists You can import from Github Gist's raw URL: await import("https://gist.githubusercontent.com/...") This example pulls from this gist: example.js Which has this code: export const hi = function() { return "Hi Nico!" }
Script
# Import from Github Gists
You can import from Github Gist's raw URL: `await import("https://gist.githubusercontent.com/...")`
This example pulls from this gist: [example.js](https://gist.github.com/stevekrouse/c045b716c68790fad5f556e86fd46f3c)
Which has this code: `export const hi = function() { return "Hi Nico!" }`
export const hiNicoFromGists = (async () => {
let { hi } = await import(
"https://gist.githubusercontent.com/stevekrouse/c045b716c68790fad5f556e86fd46f3c/raw/48b6cfe9131b8a58dd13c8d8936d6bd6e26c6070/hi.js"
return hi();