Search
embedSelf
@neverstew
* This val embeds itself in the web page created by hitting it's Web Endpoint!
HTTP
* This val embeds itself in the web page created by hitting it's Web Endpoint!
export let embedSelf = async (request: Request): Promise<Response> => {
return new Response(
<style>
:root { background: "white"; font-family: sans-serif; }
</style>
<h1>My cool new val</h1>
<iframe
id="val_embedded"
title="Embedded Val Example"
QuillEditor
@stevekrouse
Quill.js WYSIWYG Basic WYSIWYG rich text editor, using quill.js . Press the "Get HTML" button to show the HTML in an alert window.
HTTP
# Quill.js WYSIWYG
Basic WYSIWYG rich text editor, using [quill.js](https://quilljs.com/).
Press the "Get HTML" button to show the HTML in an alert window.
export default async function(req: Request) {
const url = new URL(req.url);
const name = url.pathname.slice(1);
if (!name) {
const generatedName = Math.random().toString(36).slice(2, 7);
return Response.redirect(`${thisWebURL()}/${generatedName}`);
if (req.method === "POST") {
freeformServer
@pomdtr
Freeform Brings a taste of Observable to Val Town. This val was adapted from @tmcw obsidian plugin . Instead of using the display function, this port use export default . https://pomdtr-freeformServer.web.val.run/v/<author>/<name> or https://freeform.pomdtr.me/v/<author>/<name> Examples Bar Chart ( View Source )
HTTP
# Freeform
> Brings a taste of Observable to Val Town.
This val was adapted from @tmcw [obsidian plugin](https://github.com/tmcw/obsidian-freeform).
Instead of using the `display` function, this port use `export default`.
https://pomdtr-freeformServer.web.val.run/v/<author>/<name>
or
const app = new Hono();
const me = extractValInfo(import.meta.url);
app.get("/", c => readmeToHtmlResponse(me.author, me.name));
app.get("/edit", c => c.redirect(me.htmlUrl));
basicAuthButton
@jdan
basicAuthButton An authenticated micro-app for tracking the last time I took a medication. Both GET / and POST /press are authenticated using honoBasicAuthMiddleware . GET / Views the value of basicAuthButton:last-pressed in blob storage. POST /press Updates the value of basicAuthButton:last-pressed in blob storage with the current timestamp.
HTTP
## basicAuthButton
An authenticated micro-app for tracking the last time I took a medication. Both `GET /` and `POST /press` are authenticated using [honoBasicAuthMiddleware](https://www.val.town/v/jdan/honoBasicAuthMiddleware).
### GET /
Views the value of `basicAuthButton:last-pressed` in blob storage.
### POST /press
/** @jsxImportSource npm:hono@3/jsx */
const timeZone = "America/New_York";
const blobStorageKey = "basicAuthButton:last-pressed";
const app = new Hono();
pinkDinosaur
@AP123
// Define the prompts
HTTP
// Define the prompts
const prompts = [
"How are you today?",
"What's your favorite color?",
"Tell me a joke.",
// Function to generate HTML for the prompt selector
function generatePromptSelector() {
const options = prompts.map(prompt => `<option value="${prompt}">${prompt}</option>`).join("");
return `
<!DOCTYPE html>
emojiInstantSearch
@maxm
Emoji Instant Search Uses vector embeddings to get "vibes" search on emojis
HTTP
# Emoji Instant Search
Uses vector embeddings to get "vibes" search on emojis
// https://gist.github.com/maxmcd/b170e57d53cb942642c35b135e2d52f1 (takes a bit of time to load)
const app = new Hono();
const { htmlUrl } = extractValInfo(import.meta.url);
const fuseOptions = {
// Only search for prefixes to make things faster
location: 0,
threshold: 0,
interactiveBrokersMargins2Rendered
@simone
An interactive, runnable TypeScript val by simone
Script
import { interactiveBrokersMargins2Table } from "https://esm.town/v/simone/interactiveBrokersMargins2Table";
export async function interactiveBrokersMargins2Rendered(req, res) {
res.send(await interactiveBrokersMargins2Table());
h
@tmcw
An interactive, runnable TypeScript val by tmcw
Script
export function h(tagName: string, attrsPlus?: any, ...children: any[]) {
if (!attrsPlus) attrsPlus = {};
if (attrsPlus.isEl || typeof attrsPlus === "string")
return h2(tagName, {}, attrsPlus, ...children);
if (tagName.includes("."))
return h2(
tagName.split(".")[0],
{ ...attrsPlus, class: tagName.split(".").slice(1).join(" ") },
...children
// This version supports our special attrs like .class and $style
valle_tmp_33622208006880749293871176826736
@janpaul123
// This val responds to HTTP requests with "Hello, World!".
HTTP
// This val responds to HTTP requests with "Hello, World!".
// It uses Deno's built-in HTTP server.
export default async function main(req: Request): Promise<Response> {
return new Response("Hello, World!", {
headers: { "Content-Type": "text/plain" },
pekoExample
@vladimyr
An interactive, runnable TypeScript val by vladimyr
HTTP
import { denoServer } from "https://esm.town/v/pomdtr/deno_server?v=8";
const router = new Peko.Router();
router.get("/", () => new Response("Yes? Peko is also serving something at /hello"));
router.get("/hello", () => new Response("Hello world!"));
export default denoServer(router.handle, router);
bandcampWrappedScript
@tmcw
An interactive, runnable TypeScript val by tmcw
Script
const replacements = [
[/\*/g, "\\*"],
[/#/g, "\\#"],
[/\//g, "\\/"],
[/\(/g, "\\("],
[/\)/g, "\\)"],
[/\[/g, "\\["],
[/\]/g, "\\]"],
[/</g, "<"],
[/>/g, ">"],
MyFooter
@postpostscript
@postpostscript/MyFooter: my footer component which shares random vals I've liked!
HTTP
# @postpostscript/MyFooter: my footer component which shares random vals I've liked!
const USERNAME = extractValInfo(import.meta.url).author;
export async function MyFooter(logo = valTownLogoAuto) {
const recommendation = rootValRef().handle === USERNAME
? html`<span class="recommends">${await recommends()}</span>`
return html`
<footer>
Made by
<a href="https://val.town/u/${USERNAME}" target="_blank">@${USERNAME}</a>
for
myApi
@ayrtonlacerda
An interactive, runnable TypeScript val by ayrtonlacerda
Script
export function myApi(req, res: express.Response) {
return Response.json({ ok: true });
gracefulOliveKrill
@tmcw
// Forked from @tmcw.short
HTTP
export let short = async (req: Request) => {
const param = req.path.substring(1)
const { default: Hashids } = await import("npm:hashids")
const H = new Hashids(short_storage.salt)
if (!param) {
const { default: htm } = await import("npm:htm")
const { default: vhtml } = await import("npm:vhtml")
const html = htm.bind(vhtml)
if (req.method === "GET") {
return new Response(
generateGuestbookSnippet
@vtdocs
Generate Guestbook Snippet This val generates the HTML snippet for @vtdocs.guestbook . Using these two vals, you can put an interactive guestbook on any website. valUser and valName are used to build the Express API URL for your forked version of @vtdocs.guestbook .
Script
# Generate Guestbook Snippet
This val generates the HTML snippet for [`@vtdocs.guestbook`](https://www.val.town/v/vtdocs.guestbook).
Using these two vals, you can put an interactive guestbook on any website.
`valUser` and `valName` are used to build the Express API URL for your forked version of [`@vtdocs.guestbook`](https://www.val.town/v/vtdocs.guestbook).
export const generateGuestbookSnippet = (valUser: string, valName: string) => `
<form class="valtown-guestbook">
<div id="valtown-messages"></div>
<div><input id="valtown-name" placeholder="name" /></div>
<div><input id="valtown-message" placeholder="message"/></div>
<button id="valtown-submit" onclick="sendMessage()">Submit</button>