Trending Vals

Extract vals infos (author, name, version) from a val url (either from esm.town or val.town ). Example usage: const {owner, name} = extractValInfo(import.meta.url) Also returns a unique slug for the val: <author>/<name>

Blob storage but uses SQLite under the hood.

Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Demo See @pomdtr/password_auth_test 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 .

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

Find comments on HN (powered by Algolia ), extract content and return a streaming markdown summary (powered by Substrate ). The RAG portion of this is 34 lines of Substrate code. Read the walkthrough: https://x.com/vprtwn/status/1812844236401762513 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits. See also: https://www.val.town/v/substrate/twitterRAG

Github Release Notes from package.json Enter a raw github URL to a package.json, https://raw.githubusercontent.com/username/repo/branch/package.json and get a response of all release notes for all packages from current to latest. Roadmap [ ] GenAI summary [ ] Weekly cron email reports [ ] Send update PRs [ ] Other package managers like PyPi [ ] Formatting/styling [ ] Loading spinner

Generates a streaming illustrated primer on a subject. Enter a subject, click on titles to "delve". 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits

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>`); })

VALL-E LLM code generation for vals! Make apps with a frontend, backend, and database. It's a bit of work to get this running, but it's worth it. Fork this val to your own profile. Make a folder for the temporary vals that get generated, take the ID from the URL, and put it in tempValsParentFolderId . If you want to use OpenAI models you need to set the OPENAI_API_KEY env var . If you want to use Anthropic models you need to set the ANTHROPIC_API_KEY env var . Create a Val Town API token , open the browser preview of this val, and use the API token as the password to log in.

This Val will proxy anthropic HTTP requests from some frontend client, like langchain, so that you can utilize anthropic apis from the browser. Convert it to an HTTP val in order to use it (you may want to setup an ENV var / header to protect the endpoint with a secret key)

Blob Admin This is a lightweight Blob Admin interface to view and debug your Blob data. Use this button to install the val: It uses basic authentication with your Val Town API Token as the password (leave the username field blank). TODO [x] /new - render a page to write a new blob key and value [x] /edit/:blob - render a page to edit a blob (prefilled with the existing content) [x] /delete/:blob - delete a blob and render success [x] add upload/download buttons [ ] Use modals for create/upload/edit/view/delete page (htmx ?) [ ] handle non-textual blobs properly [ ] use codemirror instead of a textarea for editing text blobs

easyAQI Get the Air Quality Index (AQI) for a location via open data sources. It's "easy" because it strings together multiple lower-level APIs to give you a simple interface for AQI. Accepts a location in basically any string format (ie "downtown manhattan") Uses Nominatim to turn that into longitude and latitude Finds the closest sensor to you on OpenAQ Pulls the readings from OpenAQ Calculates the AQI via EPA's NowCAST algorithm Uses EPA's ranking to classify the severity of the score (ie "Unhealthy for Sensitive Groups") Example usage @stevekrouse.easyAQI({ location: "brooklyn navy yard" }) // Returns { "aqi": 23.6, "severity": "Good" } Forkable example: val.town/v/stevekrouse.easyAQIExample Also useful for getting alerts when the AQI is unhealthy near you: https://www.val.town/v/stevekrouse.aqi

Website Downtime Alert This val checks the availability of a specified website. If it's down or not returning a 200 OK status, it triggers an email alert. The email includes the date, time (in UTC), and the reason for the downtime, providing a way to monitor website availability. Fork this val and edit the URL variable to set up downtime notifications for your website.

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.

OpenAI ChatGPT helper function This val uses your OpenAI token if you have one, and the @std/openai if not, so it provides limited OpenAI usage for free. import { chat } from "https://esm.town/v/stevekrouse/openai"; const { content } = await chat("Hello, GPT!"); console.log(content); import { chat } from "https://esm.town/v/stevekrouse/openai"; const { content } = await chat( [ { role: "system", content: "You are Alan Kay" }, { role: "user", content: "What is the real computer revolution?"} ], { max_tokens: 50, model: "gpt-4o" } ); console.log(content);

vimarkdown Try it now A VIM-mode markdown editor built with Val Town . Features Write markdown in the browser with VIM keybindings Minimal, focused UI Saves to localStorage Multiple color modes Markdown -> HTML preview (⌘+P) NOT mobile-friendly Fork this editor on Val Town to make it your own Inspired by iA Writer Made by Jxnblk TODO [ ] Add syntax highlighting to frontmatter block [ ] Support multiple fonts

Uptime Status Page This is the status page for the data generated by this uptime cron: @stevekrouse/uptime

Val Town Basic Auth Add basic auth on top of any http val Usage Wrap your HTTP handler in the basicAuth middleware. import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth"; function handler(req: Request) { return new Response("You are authenticated!"); } export default basicAuth(handler, { verifyUser: (username, password) => username == "user" && password == "password" }); If you want to use an apiToken as a password: import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth"; import { verifyToken } from "https://www.val.town/v/pomdtr/verifyToken" function handler(req: Request) { return new Response("You are authenticated!"); } export default basicAuth(handler, { verifyUser: (_, password) => verifyToken(password) });

Semantically map a JSON object to a target schema using Substrate . 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits.

☔️ 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

Val Town's esm.town Transpiles TypeScript and JSX for browsers When Val Town's code registry (esm.town) gets a request from a browser (which it can detect via the User Agent header), it transpiles that val's code to web-standard JavaScript be able to run in the browser. It doesn't do as much as other transpilers (such as esm.sh, such as rewriting npm: imports, etc). We may add that capability in the future. For now, if you want your npm imports to run in the browser, use https://esm.sh/package instead of npm:package . The below script demonstrates this transiplation behavior by fetching its own source code ( import.meta.url ) with the user agent of a browser. You can uncoment the line setting the browser agent if you want to see the difference in the output. Or you could just load this val's module URL in your browser to see the untranspiled TS. As of July 23, 2024, this is the code that determines when esm.town transpiles or not:

Dub Mux Videos using Sieve This Val exposes an HTTP endpoint that takes a Mux Asset ID and a list of languages, creates dubbed versions of the audio tracks using Sieve , then adds those dubbed audio tracks back to the Mux asset as new audio tracks. Usage: Required environment variables: Sieve API token ( SIEVE_API_KEY ) Mux Access token details ( MUX_TOKEN_ID , MUX_TOKEN_SECRET ) This endpoint requires an existing Mux asset that's ready with an audio-only static rendition associated with it. You can run this val to create a new one for testing. Make a POST request to the Val's endpoint with the following body, replacing the values with your own asset ID and the list of languages you want to create. { "asset_id": "00OZ8VnQ01wDNQDdI8Qw3kf01FkGTtkMq2CW901ltq64Jyc", "languages": ["es", "fr", "nl"] } Limitations This is just a demo, so it's obviously not battle hardened. The biggest issue is that it does this whole process synchronously, so if the Sieve dubbing process takes longer than the Val's timeout, you're hosed.

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

Idiomatic SSR and hydration of a React app

Twitter 𝕏 keyword Alerts Custom notifications for when you, your company, or anything you care about is mentioned on Twitter. 1. Authentication You'll need a Twitter Bearer Token. Follow these instructions to get one. Unfortunately it costs $100 / month to have a Basic Twitter Developer account. If you subscribe to Val Town Pro, I can let you "borrow" my token. Just comment on this val and I'll hook you up. 2. Query Change the query variable for what you want to get notified for. You can use Twitter's search operators to customize your query, for some collection of keywords, filtering out others, and much more! 3. Notification Below I'm sending these mentions to a private channel in our company Discord, but you can customize that to whatever you want, @std/email, Slack, Telegram, whatever. TODO [x] ~Filter out retweets. We've long wanted to filter these out. Should be a quick fix if anyone wants to send me a PR :)~ Completed by @sumukh

Infinite SVG Graph A connected graph of AI-generated SVG images. Ask it to make any kind of SVG. Add your contribution to the graph. Make it POP!

Get Weather Simple function to get weather data from the free wttr.in service. import { getWeather } from "https://esm.town/v/stevekrouse/getWeather"; let weather = await getWeather("Brooklyn, NY"); console.log(weather.current_condition[0].FeelsLikeF)

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

NOTE: We've disabled the Exa API key in this demo due to high volume – you'll need to fork & provide your own to use it. Find similar pages on HN and return a streaming markdown summary. Powered by Exa and Substrate . 🪩 To fork, sign up for Substrate to get your own API key and $50 free credits.

💬 Val Town Email-to-SMS Usage import { sendSMS } from 'https://esm.town/v/iamseeley/sendSMS'; sendSMS(phoneNumber: string, message: string, carrier: string): Promise<void> Parameters phoneNumber: The recipient's phone number (string of digits, no spaces or dashes) message: The text message you want to send carrier: The recipient's cell phone carrier. Supported carriers: 'att' (AT&T), 'tmobile' (T-Mobile), 'verizon' (Verizon), 'sprint' (Sprint) List of Email-To-SMS Addresses Comment on this val if you'd like me to add a carrier from the above list! Example import { sendSMS } from 'https://esm.town/v/iamseeley/sendSMS'; sendSMS('1234567890', 'Hello from Val Town!', 'verizon');