Search
powerfulLimeGuppy
@movienerd
* This clicker game allows users to earn virtual money by clicking.
* It includes an upgrade system where users can purchase multiple auto-clickers and dime-smithers.
* Each upgrade adds to the overall effect, increasing earnings per second.
* Upgrades are hidden until they are unlocked for the first time.
* The game state is stored client-side using localStorage for persistence.
* React is used for the UI, and setInterval for the auto-upgrade functionality.
HTTP
* The game state is stored client-side using localStorage for persistence.
* React is used for the UI, and setInterval for the auto-upgrade functionality.
/** @jsxImportSource https://esm.sh/react */
import { createRoot } from "https://esm.sh/react-dom/client";
function App() {
const [money, setMoney] = useState(() => {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
async function server(request: Request): Promise<Response> {
return new Response(
duckdbExample
@taras
DuckDB DuckDB works on Val Town, with only one small tweak! We're basically using DuckDB in the same way you'd use it with a browser - using the WASM package with its dependencies fetched from jsdelivr . The only trick is to create the worker ourselves rather than using duckdb.createWorker . DuckDB's built-in createWorker method doesn't specify a worker type, which causes type to default to classic , and Deno (our runtime) doesn't support classic workers. Note: A small check was added to make this compatible with local Deno. if (typeof Deno !== "undefined") {
return new Worker(url, { type: "module", deno: true });
}
HTTP
import { fetch } from "https://esm.town/v/std/fetch";
export let duckdbExample = await (async () => {
async function createWorker(url) {
// For Val Town / Deno environments
if (typeof Deno !== "undefined") {
return typeof v === "bigint" ? +v.toString() : v;
console.log(duckdbExample);
export default async function(req: Request): Promise<Response> {
return new Response(JSON.stringify(duckdbExample))
caniuse_notifier
@gunnnnii
@jsxImportSource npm:react
Cron
const updatedKey = "caniuse-updated-at";
const dataKey = "caniuse-data";
function Feature({ feature }: any) {
const links = feature.links ?? [];
return (
</li>
</ul>
export default async function(interval: Interval) {
const previousDataUpdatedAt = await blob.getJSON(updatedKey) ?? 0;
const previousData = await blob.getJSON(dataKey);
obedientLimeOrangutan
@primemeridian
An interactive, runnable TypeScript val by primemeridian
HTTP
<canvas id="matrixRain"></canvas>
<script>
(function () {
const canvas = document.getElementById("matrixRain");
const ctx = canvas.getContext("2d");
tinygoMandelbrotExample
@stevekrouse
A Go http handler running in Val Town: The Go source is here . Mandelbrot rendering code taken from here . I used maxm/compileAndUploadTinygoWasm to compile the code and create the val. $ git clone git@github.com:maxmcd/go-town.git
$ cd go-town/val-town-tinygo-http-example
$ deno run --allow-net --allow-run --allow-read "https://esm.town/v/maxm/compileAndUploadTinygoWasm?v=58"
Running tinygo build -o main.wasm -target=wasi .
Compliation complete
Running wasm-strip main.wasm
Copy the following into a val town HTTP val:
import { wasmHandler } from "https://esm.town/v/maxm/tinygoHttp";
const resp = await fetch("https://maxm-wasmblobhost.web.val.run/jpxqvyy5tphiwehzklmioklpkpz4gpzs.wasm");
const handler = await wasmHandler(new Uint8Array(await resp.arrayBuffer()));
export default async function(req: Request): Promise<Response> {
return handler(req);
}
HTTP
const handler = await wasmHandler(new Uint8Array(await resp.arrayBuffer()));
export default async function(req: Request): Promise<Response> {
return handler(req);
Open
@iimyel
Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.
HTTP
"Kawawang Emiel",
function App() {
const [noClicks, setNoClicks] = useState(0);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(
multirouteHono
@cofsana
π Multi-Route Website with Hono
HTTP
const app = new Hono();
function App() {
const [page, setPage] = React.useState('home');
</div>
function HomePage() {
return (
</div>
function AboutPage() {
return (
</div>
function ServicesPage() {
return (
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
assert
@jsejcksn
An interactive, runnable TypeScript val by jsejcksn
Script
import { AssertionError } from "https://esm.town/v/jsejcksn/AssertionError";
export function assert(expr: unknown, msg?: string): asserts expr {
if (!expr) throw new AssertionError(msg);
tikTokVideoDownloader
@SowrovCIV
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function App() {
const [videoUrl, setVideoUrl] = useState('');
fontStyle: 'italic',
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(`
ChatGPTTextDefinitionUserscript
@willthereader
// @name Improved ChatGPT Text Definition with Follow-up Questions
Script
(function() {
function extractSettingTags() {
document.addEventListener("DOMContentLoaded", function() {
url: "https://willthereader-openaidefiner.web.val.run",
async function* streamProcessor(reader) {
async function processApiResponse(response) {
async function handleSelection(selectedText, isFollowUp = false) {
function getSelectedText() {
function createCloseButton() {
async function makeApiRequest(text, originalSelection = null) {
dailyDadJoke
@viniciuscainelli
Daily Dad Joke How do you make a programmer laugh every morning? A dad joke cron job! Setup Fork this val Click Create fork π€£π€£π€£π€£ API This val uses the icanhazdadjoke API . You can find more docs here , such as how to filter by type .
Cron
import { email } from "https://esm.town/v/std/email";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
export async function dailyDadJoke() {
let { setup, punchline } = await fetchJSON("https://official-joke-api.appspot.com/random_joke");
return email({
VALLErun
@arash2060
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
HTTP
import { openai } from "npm:@ai-sdk/openai";
function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
function applySearchReplaceBlocks(
export default function(
unless strictly necessary, for example use APIs that don't require a key, prefer internal function
functions where possible. Unless specified, don't add error handling,
The val should create a "export default async function main" which is the main function that gets
// The val should create a "export default async function main() {" which
// is the main function that gets executed, without any arguments. Don't return a Response object,
const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {
foc_contact
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Email
import { email } from "https://esm.town/v/std/email?v=11";
export default async function(e: Email) {
email({
subject: "Future of Coding Message: " + e.subject,
