Search
freshChartsExample
@maxm
Deno Fresh Charts Example Cobbled together from here: https://github.com/denoland/fresh_charts/tree/main/examples Render charts as HTML or as images. This image is rendered by the val below:
HTTP (deprecated)
# Deno Fresh Charts Example
Cobbled together from here: https://github.com/denoland/fresh_charts/tree/main/examples
Render charts as HTML or as images. This image is rendered by the val below:
/** @jsxImportSource https://esm.sh/react */
// fresh_charts expects React to be available on globalThis/window, not sure why!
globalThis.React = React;
const chart = () => ({
type: "bar",
options: { devicePixelRatio: 1 },
cors_example
@stevekrouse
CORS issues are the bane of frontend engineers. In Val Town, if you don't customize any CORS headers, we add these defaults: Access-Control-Allow-Origin: "*"
Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE" You can override them if you wish to disallow CORS. This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.
HTTP (deprecated)
[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues are the bane of frontend engineers.
In Val Town, if you don't customize any CORS headers, we add these defaults:
Access-Control-Allow-Origin: "*"
Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE"
You can override them if you wish to disallow CORS.
This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.
/** @jsxImportSource https://esm.sh/react */
const BASE_URL = "https://stevekrouse-cors_example_backend.web.val.run";
export function App() {
const [logs, setLogs] = useState([]);
notionSiteProxy
@chet
// NOTE: This doesn't work great.
HTTP (deprecated)
// NOTE: This doesn't work great.
const valDomain = "chet-notionSiteProxy.web.val.run";
const notionPage = "https://chetcorcos.notion.site/0e27612403084b2fb4a3166edafd623a";
export default async function(req: Request): Promise<Response> {
const notionUrl = new URL(notionPage);
const notionDomain = notionUrl.host;
const url = new URL(req.url);
if (url.pathname === "/") {
url.host = valDomain;
url.pathname = notionUrl.pathname;
http_client
@pomdtr
HTTP Client Attach a postman-like http client to your vals, with bookmarks and history support Usage Wrap your http handler in an the httpClient middleware. import {httpClient} from "https://esm.town/v/pomdtr/http_client"
export default httpClient((req) => {
return new Response("Hello World!")
}) The http client will be shown on the root. Adding bookmarks You might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option: import {httpClient} from "https://esm.town/v/pomdtr/http_client"
export default httpClient((req) => {
return new Response("Hello World!")
}, {
bookmarks: [
{
"label": "Dummy Request",
"request": new Request("https://dummyjson.com/products")
}
]}) Customizing the client path import {httpClient} from "https://esm.town/v/pomdtr/http_client"
export default httpClient((req) => {
return new Response("Hello World!")
}, {
path: "/http-client"
}) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request
HTTP (deprecated)
# HTTP Client
Attach a postman-like http client to your vals, with bookmarks and history support
## Usage
Wrap your http handler in an the httpClient middleware.
```ts
/** @jsxImportSource npm:preact **/
type SerializedRequest = {
url: string;
method: string;
pexelsExample
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP (deprecated)
import { createClient } from "npm:pexels";
export async function pexelsExample(request: Request): Promise<Response> {
const pexels = createClient(Deno.env.get("pexels"));
const r = await pexels.photos.search({ query: "singapore skyline" });
if (!("photos" in r)) return;
return html(
r.photos.map(p => `<img width="50px" src="${p.src.tiny}"/>`).join(""),
valle_tmp_8577620427908266060740786834009
@janpaul123
// Initialize sample stories and store them in blob storage
HTTP (deprecated)
// 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) {
const sampleStories = Array.from({ length: 30 }).map((_, idx) => ({
id: idx + 1,
title: `Sample Story ${idx + 1}`,
url: `https://example.com/story${idx + 1}`,
votes: Math.floor(Math.random() * 100),
valle_tmp_463480496454860730332801536131093
@janpaul123
// This updated val serves an HTML page emulating a Hacker News clone.
HTTP (deprecated)
// This updated val serves an HTML page emulating a Hacker News clone.
// It now has clickable titles that will serve pages with some fake story content.
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
const path = url.pathname;
if (path === "/") {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
faunadb_test
@mattx
An interactive, runnable TypeScript val by mattx
Script
import process from "node:process";
export const faunadb_test = (async () => {
const { faunadb } = await import("npm:faunadb");
const client = new faunadb.Client({
secret: process.env.fauna_key,
const { Get, Ref, Collection } = faunadb.query;
// from included sample data
const result = await client.query(Get(Ref(Collection("products"), "202")));
return result;
htmx_hono_layout
@saolsen
See what a minimal example of a hono + canvas game could look like.
HTTP (deprecated)
See what a minimal example of a hono + canvas game could look like.
/* @jsxImportSource https://esm.sh/hono/jsx */
const app = new Hono();
// Components
* Nav component that uses `hx-boost` toplevel links targeting `main`.
* @remarks
* hx-boost links targeting `main` are handled automatically by the
* layout middleware.
const Nav: FC = () => {
return (
pipeSampleLLM
@webup
An interactive, runnable TypeScript val by webup
Script
export const pipeSampleLLM = (async () => {
const { PromptTemplate } = await import("npm:langchain/prompts");
const { RunnableSequence } = await import("npm:langchain/schema/runnable");
const { StringOutputParser } = await import(
"npm:langchain/schema/output_parser"
const builder = await getModelBuilder();
const model = await builder();
const promptTemplate = PromptTemplate.fromTemplate(
"Tell me a joke about {topic}",
const outputParser = new StringOutputParser();
Github_ScrapeTrendingRepos
@rlesser
An interactive, runnable TypeScript val by rlesser
Script
type RepoData = {
date: string;
rank: number;
full_name: string;
description: string;
language: string;
stars: number;
forks: number;
stars_recent: number;
export const Github_ScrapeTrendingRepos = async (
sassy
@pinjasaur
sassy Compile Sass into CSS on the fly. Inspired by me doing the same thing on Webtask when that was still around. Read more . Use like so: curl -X POST -H "Content-Type: application/json" -d '{ "sass": "body { background: rgba(#bada55, .5) }" }' https://pinjasaur-sassy.web.val.run
HTTP (deprecated)
# sassy
Compile Sass into CSS on the fly.
Inspired by me doing the [same thing on Webtask](https://paul.af/compiling-scss-with-webtask) when that was still around. [Read more](https://paul.af/val-town).
Use like so:
```sh
curl -X POST -H "Content-Type: application/json" -d '{ "sass": "body { background: rgba(#bada55, .5) }" }' https://pinjasaur-sassy.web.val.run
export default async function(req: Request): Promise<Response> {
if (req.method !== "POST") {
return Response.json({ error: "This val responds to POST requests." }, {
status: 400,
blueOwl
@stevekrouse
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
HTTP (deprecated)
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
/** @jsxImportSource https://esm.sh/react */
// Set these to your own
const username = "janpaul123";
const tempValsParentFolderId = "4bb7b010-4443-11ef-8642-de64eea55b61";
export default function(
{ username, tempValsParentFolderId }: { username: string; tempValsParentFolderId: string },
const valTownToken = Deno.env.get("valtown");
const vt = new ValTown({ bearerToken: valTownToken });
const app = new Hono();
aiSimpleGroq
@yawnxyz
// set Deno.env.get("GROQ_API_KEY")
Script
import { ai } from "https://esm.town/v/yawnxyz/ai";
// set Deno.env.get("GROQ_API_KEY")
// console.log(await ai("tell me a joke in Spanish"))
console.log(await ai("tell me a reddit joke", {
provider: "anthropic",
model: "claude-3-haiku-20240307",
reMarkableXNYTCrossword
@bmalicoat
Sample script for how to load a NYT Crossword onto a reMarkable tablet. More details at https://www.bjmalicoat.com/projects/nytremarkable
Script
Sample script for how to load a NYT Crossword onto a reMarkable tablet. More details at https://www.bjmalicoat.com/projects/nytremarkable
export default async function(interval: Interval) {
const nytCookie = "insert-cookie-here";
const nytCrosswordURLPrefix = "https://www.nytimes.com/svc/crosswords/v2/puzzle/print/";
const rmToken = "insert-bearer-token-here";
const rmFolderGuid = "insert-parent-folder-guid-here";
const rmFilesEndpoint = "https://web.eu.tectonic.remarkable.com/doc/v2/files";
// Construct URL for today's Crossword
// e.g. https://www.nytimes.com/svc/crosswords/v2/puzzle/print/Sep0724.pdf
const today = new Date(Date.now());