Trending Vals
2
nbbaier
sqliteExplorerApp
SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query
HTTP
3
mewtru
valentine
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
5
valdottown
templateHackerNewsAlert
Hacker News Keyword Alerts [TEMPLATE] Get notifications when specific keywords appear in Hacker News posts. This template will help you: Search Hacker News for specific keywords. Send notifications to your preferred platform (Discord, Slack, email, etc.), the default in this template is Discord. Example This val tracks mentions of "Val Town" on Hacker News and sends updates to a Discord webhook.
Set Up 1. Fork this Val To start using this template, fork this val by clicking the fork button at the top-right corner of the page.
2. View Source Code The CODE box shows you the the full source code of this val, you may need to scroll down to see it.
3. Customize Keyword In the CODE box below, update the terms or phrases you want to track:
query: '"val town" || "val.town"' 5. Set Up Your Notification Method This template uses a Discord webhook for notifications. You can update this to your preferred platform: Create a Discord webhook following this guide .
Save your webhook URL in your Val Town environment variables: Key: mentionsDiscord Value: Your Discord webhook URL.
Notifications will be sent using this function: await discordWebhook({
url: Deno.env.get("mentionsDiscord"),
content,
}); To switch to another platform (e.g., Slack, email, or custom webhooks), replace the discordWebhook call with the appropriate integration ((e.g., @std/email , Slack , or anywhere else ) 🎉 Congrats! You now have a val running that ensures you never miss another Hacker News mention. 🎉
Cron
6
pomdtr
password_auth
Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Usage import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: (password) => password == Deno.env.get("VAL_PASSWORD") }); If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: verifyToken }); TODO [x] allow to authenticate using a val town token [ ] add a way to send an email to ask a password from the val owner [ ] automatically extend the session [ ] automatically remove expired sessions FAQ How to sign out ? Navigate to <your-site>/signout .
Script
7
8
andreterron
codeOnValTown
Code on Val Town Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the "Code on Val Town" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default modifyFetchHandler(async (req: Request): Promise<Response> => {
return html(`<h2>Hello world!</h2>`);
}); Example: @andreterron/openable_handler 2. Wrap your HTML string import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(modifyHtmlString(`<h2>Hello world!</h2>`));
}; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument: modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }}) modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"}) modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) {
.github-fork-ribbon {
display: none !important;
}
}`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.
Script
10
stevekrouse
discordWebhook
Send a Discord message Send a message to a Discord channel from Val Town. It's useful for notifying your team or community when someone interesting happens, like a user signup, Stripe payment, mention on social media, etc. import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
await discordWebhook({
url: Deno.env.get("engDiscord"),
content: "Hi from val town!",
});
Example val: https://www.val.town/v/stevekrouse.discordWebhookEx Setup 1. Create a Discord Webhook Follow the instructions here: https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks It really only takes 2 minutes. 2. Copy webhook URL Paste it into your secrets as discordWebhook . 3. Send a message! import { discordWebhook } from "https://esm.town/v/stevekrouse/discordWebhook";
await discordWebhook({
url: Deno.env.get("engDiscord"),
content: "Hi from val town!",
}); Example val: https://www.val.town/v/stevekrouse.discordWebhookEx
Script
11
12
pomdtr
extractValInfo
Extract val info (author, name, version) from a val url (either from esm.town or val.town ). Works for both legacy and current val url formats. Example usage: const {author, name} = extractValInfo(import.meta.url) returns a unique slug for the val: <author>/<name> for non legacy val url formats the email and httpEndpoint will be null
Script
13
stevekrouse
pipedream
Pipedream helpers Pipedream offers an Accounts API to handle OAuth for you, automatically, and for free. How to do it is covered in this guide . The helper functions below can make it easier to work with various Google API. For example, I used them like so to get all my free/busy times for this week from all my google calendars: import { pipeDreamGoogle } from "https://esm.town/v/stevekrouse/pipedream";
const accountId = "REPLACE_WITH_YOUR_GCAL_ACCOUNT_ID_FROM_PIPEDREAM";
const calendar = await pipeDreamGoogle("calendar", accountId);
// Function to get free/busy information
async function getFreeBusyTimes(calendarId: string) {
const now = new Date();
const startOfWeek = new Date(now);
startOfWeek.setDate(now.getDate() - now.getDay());
const endOfWeek = new Date(startOfWeek);
endOfWeek.setDate(startOfWeek.getDate() + 6);
const requestBody = {
timeMin: startOfWeek.toISOString(),
timeMax: endOfWeek.toISOString(),
items: [{ id: calendarId }],
};
const freeBusyResponse = await calendar.freebusy.query({
requestBody,
});
return freeBusyResponse.data.calendars[calendarId].busy;
}
const calendars = (await calendar.calendarList.list()).data.items;
const freeBusy = await Promise.all(calendars.map(calendar => getFreeBusyTimes(calendar.id)));
console.log(freeBusy); In order for this to work you need to follow the instructions in this guide to save your pipedream API key into your Val Town Environment Variables under pipedream , then connect the google account you care about to Pipedream, and copy it's Pipedream "account id" into your val code. Let me know if you need any help by commenting on this val!
Script
14
stevekrouse
umbrellaReminder
☔️ Umbrella reminder if there's rain today Setup Fork this val 👉 https://val.town/v/stevekrouse.umbrellaReminder/fork Customize the location (line 8). You can supply any free-form description of a location. ⚠️ Only works for US-based locations (where weather.gov covers). How it works Geocodes an free-form description of a location to latitude and longitude – @stevekrouse.nominatimSearch Converts a latitude and longitude to weather.gov grid – @stevekrouse.weatherGovGrid Gets the hourly forecast for that grid Filters the forecast for periods that are today and >30% chance of rain If there are any, it formats them appropriately, and sends me an email
Cron
15
valdottown
templateTwitterAlert
Twitter/𝕏 Keyword Alerts [TEMPLATE] Get custom notifications when you, your company, or anything you care about is mentioned on Twitter/X, even if they don't tag you directly. This template will help you: Search for specific mentions on Twitter/X using customizable keywords. Deliver notifications wherever you'd like (email, Discord, Slack, Telegram, etc). Example This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms.
To see exactly how we use this template at Val Town: https://www.val.town/v/stevekrouse/twitterAlert Set Up 1. Fork this Val To use this template, fork this val on the top right corner of this page.
2. View Source Code The CODE box shows you the the full source code of this val, you may need to scroll down to see it.
3. Customize Query Define what you want to search for by modifying query : const query = "\"val.town\" OR \"val.run\" OR \"val town\" -_ValTown_ -is:retweet -from:valenzuelacity -from:val__run"; Refer to Twitter's search operators to fine-tune your query. 4. Test API call Set isProd = false in the code if you are testing, to ensure there are enough tweets to display.
Toggle it back to true when you're ready to run this cron job in production and actuall send notifications. 5. Choose Notification Method This template uses a Discord webhook for notifications, but
you can update this to your preferred platform by replacing the discordWebhook call
with a call to Slack , @std/email , etc. Create a Discord webhook following this guide . Save your Discord Webhook URL in your Val Town environment variables : Key: mentionsDiscord Value: Your Discord webhook URL.
Notifications will be sent using this function: await discordWebhook({
url: Deno.env.get("mentionsDiscord"),
content,
}); 🎉 Congrats! You now have a val running that ensures you never miss another Twitter/X mention. 🎉 NOTE: Usage Limits This val uses the SocialData API for Twitter data: Proxies via Val Town's SocialDataProxy : Limited to 10 cents per day for Val Town Pro users . This API is only for Pro users. Need more calls? Sign up for your own SocialData API token and configure the socialDataSearch function.
Cron
18
steel
steel_puppeteer_starter
Steel + Puppeteer Starter This template shows you how to use Steel with Puppeteer
to run browser automations in the cloud on Val Town.
It includes session management, error handling,
and a basic example you can customize. This starter
templated was ported from
this one on Github . Quick start The script shows you how to: Create and manage a Steel browser session Connect Puppeteer to the session Navigate to a website (Hacker News in this example) Extract data from the page (top 5 stories) Handle errors and cleanup properly View your live session in Steel's session viewer To run it: Get your free Steel API key at https://app.steel.dev/settings/api-keys Add it to your Val Town Environment Variables as STEEL_API_KEY Click Fork on this val Click Run on this val Writing your automation Find this section in the script: // ============================================================
// Your Automations Go Here!
// ============================================================
// Example automation (you can delete this)
await page.goto('https://news.ycombinator.com');
// ... rest of example code You can replace the code here with whatever automation scripts you want to run. Configuration The template includes common Steel configurations you can enable: const session = await client.sessions.create({
useProxy: true, // Use Steel's proxy network
solveCaptcha: true, // Enable CAPTCHA solving
sessionTimeout: 1800000, // 30 minute timeout (default: 15 mins)
userAgent: 'custom-ua', // Custom User-Agent
}); Error handling The template includes error handling and cleanup: try {
// Your automation code
} finally {
// Cleanup runs even if there's an error
if (browser) await browser.close();
if (session) await client.sessions.release(session.id);
} Support Steel Documentation API Reference Discord Community
Script
20
21
pinjasaur
unsplashSourceReimplementation
Re-implements Unsplash Source which was a service hosted at source.unsplash.com that served random photos from Unsplash. To use this, you'll want to fork it, provide your own Unsplash API key, and configure the allowed domains. Read more: https://paul.af/reimplementing-unsplash-source
HTTP
25
hodge
expSumOfTheDay
Exponential Sum Plot Generator An homage to John D. Cook's Exponential Sum of the Day The plot shows the partial sums of the exponential sum: Σ(n=0 to N) exp(2πi(n/m + n²/d + n³/y)) The real part of the sum is plotted on the x-axis, and the imaginary part of the sum is plotted on the y-axis.
HTTP
30
nbbaier
createFileTree
Project File Tree Generator A utility for generating a visual file tree representation for Val Town Projects. Usage import createFileTree from "https://esm.town/v/nbbaier/createFileTree";
const treeOutput = await createFileTree("https://esm.town/v/std/reactHonoStarter@34-main");
console.log(treeOutput); Example Output The following is the output for @stevekrouse's reactHonoStarter project .
├── backend
│ └── index.ts
├── frontend
│ ├── components
│ │ └── App.tsx
│ ├── index.html
│ └── index.tsx
└── README.md
Script