Search

myApi
@davidar
An interactive, runnable TypeScript val by davidar
Script
export function myApi(name) {
return "hi " + name;

runmeTotals
@sourishkrout
An interactive, runnable TypeScript val by sourishkrout
HTTP
import { runmeTotalsState } from "https://esm.town/v/sourishkrout/runmeTotalsState";
export function handler(request: Request) {
const data = runmeTotalsState;
return Response.json({ data });
val_prZ5olhiXD
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
fetchPaginatedData
@nbbaier
Fetch Paginated Data This val exports a function that loops through paginated API responses and returns the combined data as an array. It expects pagination with next and there to be a data property in the API response. This conforms to the Val Town API, so this function is useful when fetching paginated Val Town API responses for creating custom folders in pomdtr's vscode extension . Usage: const id = <vt user id>
await fetchPaginatedData(`https://api.val.town/v1/users/${id}/vals`, {
headers: { Authorization: `Bearer ${Deno.env.get("valtown")}` },
});
Script
# Fetch Paginated Data
This val exports a function that loops through paginated API responses and returns the combined data as an array. It expects pagination with `next` and there to be a `data` property in the API response. This conforms to the Val Town API, so this function is useful when fetching paginated Val Town API responses for creating custom folders in [pomdtr's vscode extension](https://github.com/pomdtr/valtown-vscode).
Usage:
export { fetchPaginatedData } from "https://esm.town/v/nbbaier/utilities/pagination/fetchPaginatedData";
// import { fetch } from "https://esm.town/v/std/fetch?v=4";
// export async function fetchPaginatedData(url: string, init?: RequestInit, limit: number = 100) {
// let u = new URL(url);
// u.searchParams.set("limit", String(limit));
web_aS5dw4wx47
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_aS5dw4wx47(req) {
return new Response(`<!DOCTYPE html>
<html lang="en">
</div>
<script>
function createSparkles() {
for(let i = 0; i < 50; i++) {
const sparkle = document.createElement('div');

memorySampleSummary
@webup
An interactive, runnable TypeScript val by webup
Script
const builder = await getMemoryBuilder({
type: "summary",
provider: "openai",
const memory = await builder();
await memory.saveContext({ input: "My favorite sport is soccer" }, {

SidebarToArchive
@yawnxyz
Sidebar.io Archiver Sidebar's been one of my biggest design resources for the last decade. Since sidebar.io's break announcement this morning (https://sidebar.io/break/) I've set out to mess around with using Val.town to archive sidebar.
The Google Sheet can be found here: https://docs.google.com/spreadsheets/d/1RghvMfPTR5xvHMAk1pKYuH2pFYYKOJ6bH0LLkHNZiuc/edit?usp=sharing Initially I was just piping data to Google Sheets but that's slow, wasteful and kind of dumb... instead I just wrapped Hono around the code to provide a download the CSV to browser.
HTTP
const sema = new Sema(5); // Adjust the number based on your desired concurrency
export async function addLinksToSheet(links) {
let counter = 0;
sema.release();
export async function getSidebar(limit = 1, start = 0) {
const gql = {
return links;
// Function to escape double quotes in a CSV field
function escapeCSVField(field) {
if(!field) return '""';
return `"${field.replace(/"/g, '""')}"`;
// Function to convert links to CSV
function convertToCSV(links) {
const header = ["Title", "Body", "URL", "PostedAt", "CreatedAt", "Data"];
return [header, ...rows].map(row => row.join(",")).join("\n");
async function getAllLinks(totalLimit, offset=0) {
let allLinks = [];

count
@baj
An interactive, runnable TypeScript val by baj
Script
export const count = (async () => {
let count = 0;
function myApi() {
return count++;

searchManifoldMarkets
@piotr
An interactive, runnable TypeScript val by piotr
Script
question: string;
url: string;
export async function searchManifoldMarkets(query: string) {
const result = await fetch(
`https://manifold.markets/api/v0/search-markets?${query}`,

geminiBbox
@yawnxyz
Gemini AI Object Detection and Bounding Box Visualizer This application visualizes object detection results by drawing bounding boxes on images using the Google's Gemini 1.5 Pro AI model . Try using this image of 8 bananas, with 1 row and 1/2/4 columns: https://f2.phage.directory/blogalog/bananas-8.png Or this image of a phage plaque assay, with 3x3 grid and high contrast turned on: https://f2.phage.directory/blogalog/pae7.png This app is an adaptation of Simon Willison's idea, which you can read more about here: https://simonwillison.net/2024/Aug/26/gemini-bounding-box-visualization/ API keys are only stored in your browser's local storage. Source code: https://www.val.town/v/yawnxyz/geminiBbox/ Original Source: https://github.com/simonw/tools/blob/main/gemini-bbox.html
HTTP
// Add debounce function
function debounce(func, wait) {
return function executedFunction(...args) {
// Combined function to fetch and handle images
async function fetchImage(url, options = {}) {
// Update the image preview function to use the combined fetchImage
async function updateImagePreview(url) {
img.onload = function() {
// Helper function to show error state
function showErrorState(canvas, ctx, message) {
honoWithUnkeyRateLimiting
@dthyresson
Example of using Unkey Ratelimiting See: https://www.unkey.com/docs/libraries/ts/ratelimit
HTTP
import { Hono } from "npm:hono";
import type { Context, MiddlewareHandler } from "npm:hono";
export function unkeyRatelimitMiddleware(config: RatelimitConfig): MiddlewareHandler {
const ratelimiter = new Ratelimit(config);
return async (c, next) => {
web_0aZtzsb4cZ
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_0aZtzsb4cZ(req) {
return new Response(`<!DOCTYPE html>
<html>
val_d5Nrti5M28
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
function fibonacci() {
let a = 0, b = 1;
while (b < 1000) {
test
@d
An interactive, runnable TypeScript val by d
Script
export function test(){
return Math.random();
LanguageTranslator
@juleeyet
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
// Spinner Component
function Spinner({ theme }) {
const spinnerStyle = {
</div>
function App() {
const [theme, setTheme] = useState(() => {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
client();
export default function server(request: Request): Response {
return new Response(`