Search
iangac_validator
@pfeffunit
IANGAC JSON validator
HTTP
import { Hono } from "npm:hono@3";
const app = new Hono();
function analyzeJSON(jsonData) {
const images = jsonData.images;
const allIds = new Set(images.map(img => img.id));
dateme_home
@iamseeley
@jsxImportSource npm:hono@3/jsx
Script
import date_me_doc_locations from "https://esm.town/v/stevekrouse/date_me_doc_locations";
import Layout from "https://esm.town/v/stevekrouse/dateme_layout";
export default function Home(c) {
const AutocompleteInput = () => {
const [inputValue, setInputValue] = useState('');
congress
@devdoshi
An interactive, runnable TypeScript val by devdoshi
Cron
import { email } from "https://esm.town/v/std/email?v=9";
import { fetchCongressTradeReports } from "https://esm.town/v/claytn/fetchCongressTradeReports?v=3";
export async function congress() {
let text;
fetchCongressTradeReports((reports) => text = reports);
verbalSilverJackal
@osasbaba
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
"Please don't do this to me, I'm fragile",
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(
Joke_generator
@lee_johnn
// Fetches a random joke.
Script
// ... imports ...
// Fetches a random joke.
async function fetchRandomJoke() {
const response = await fetch(
"https://official-joke-api.appspot.com/random_joke",
val_8omNGabJ8G
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
function findLowestThreeDigitFibonacci() {
let fib = [0, 1];
let nextFib = 1;
calculator
@NiD
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
import React, { useState } from "https://esm.sh/react@18.2.0";
function Calculator() {
const [display, setDisplay] = useState("0");
</div>
function client() {
createRoot(document.getElementById("root")).render(<Calculator />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(
creativity_quotes
@generatecoll
Random Creativity Quotes The following call will bring back random creativity quotes
HTTP
import process from "node:process";
export async function creativity_quote(request: Request): Promise<Response> {
const postgres = await import("https://deno.land/x/postgres/mod.ts");
const client = new postgres.Client(process.env.neon_url);
iosMobileConfigMultipleWebClip
@g
* This val creates a client-side application for generating iOS mobile configs.
* It allows users to input details for multiple web clips, use the website's favicon or upload custom icons,
* and download the generated mobile config file with multiple web clips.
* The generated config will be available for download through a dialog that requires a user gesture.
HTTP
import { v4 as uuidv4 } from 'https://esm.sh/uuid';
function html() {
<!DOCTYPE html>
</html>
function css() {
body {
background-color: #d32f2f;
function js() {
import { v4 as uuidv4 } from 'https://esm.sh/uuid';
addWebClipButton.addEventListener('click', addWebClip);
function addWebClip() {
const webClip = document.createElement('div');
attachIconChoiceListeners(webClipCount - 1);
function attachIconChoiceListeners(index) {
const useDefaultIcon = document.getElementById(`useDefaultIcon-${index}`);
useCustomIcon.addEventListener('change', () => toggleCustomIconGroup(customIconGroup));
function toggleCustomIconGroup(customIconGroup) {
customIconGroup.style.display = customIconGroup.style.display === 'none' ? 'block' : 'none';
installDialog.style.display = 'none';
async function convertToBase64(file) {
return new Promise((resolve, reject) => {
reader.onerror = error => reject(error);
function generateMobileConfig(data, webClips) {
const webClipConfigs = webClips.map((clip, index) => `
valle_tmp_493882739904999215894176448564479
@janpaul123
// Initialize sample stories and store them in blob storage
HTTP
// Initialize sample stories and store them in blob storage
const SAMPLE_STORIES_KEY = "hn_sample_stories";
async function initializeSampleStories() {
const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);
if (!existingStories) {
viewSource
@stevekrouse
View source code Just like a right click + inspect on desktop, except available on mobile too! https://stevekrouse-viewsource.web.val.run/?url=https://www.todepond.com/wikiblogarden/tadi-web/lab/counter/
HTTP
import { fetchText } from "https://esm.town/v/stevekrouse/fetchText?v=6";
import { escape } from "npm:html-sloppy-escaper";
export default modifyFetchHandler(async function(req: Request) {
const pathname = new URL(req.url).searchParams.get("url");
const html = await fetchText(pathname ?? "example.com"); // .then(prettifyHtml);
octopusAgilePricing
@MattieTK
Backend val for https://www.val.town/v/MattieTK.laMetricOctopus Feel free to use it in your own apps.
Script
previous: string | null;
results: OctopusPrice[];
export async function octopusAgilePricing(location: string): Promise<OctopusPrice> {
const locationMap = {
"London": "C",
gameOfLifeSite
@dthyresson
// This approach will create a Game of Life simulation using React for the frontend and
HTTP
return newGrid;
function GameOfLife() {
const [grid, setGrid] = useState([]);
</div>
function client() {
createRoot(document.getElementById("root")).render(<GameOfLife />);
client();
async function server(request: Request): Promise<Response> {
return new Response(
deepLTranslatorApp
@sky_porie_fire443
@jsxImportSource https://esm.sh/react
HTTP
import { createRoot } from "https://esm.sh/react-dom/client";
function TranslationApp() {
const [sourceText, setSourceText] = useState("");
marginBottom: "15px"
function client() {
createRoot(document.getElementById("root")).render(<TranslationApp />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
if (request.method === "POST" && new URL(request.url).pathname === "/translate") {
