Search
reactSSRExample
@neverstew
An interactive, runnable TypeScript val by neverstew
HTTP (deprecated)
export const reactSSRExample = async (req: Request) => {
// Import React
const React = await import("npm:react");
const ReactDOMServer = await import("npm:react-dom/server");
// Define some components
function TodoItem(props) {
return React.createElement("li", null, props.text);
function TodoList(props) {
const todoItems = props.items.map((item, index) =>
React.createElement(TodoItem, { key: index, text: item })
spotify
@hunty
Spotify Playback A val to setting up some endpoints for Spotify play state.
HTTP (deprecated)
## Spotify Playback
A val to setting up some endpoints for Spotify play state.
// Uncomment this line for one run of the Val to create the DB lol
// await sqlite.execute(`create table if not exists SPOTIFY_AUTH_2(id text primary key, data text)`);
export const db = drizzle(sqlite as any);
export const table = sqliteTable("SPOTIFY_AUTH_2", {
id: text("id").primaryKey(),
data: text("data"),
const thisURL = thisWebURL();
const redirect_uri = thisURL + "/callback";
tell2
@stevekrouse
// Store messages via SQLite
Script
let { messages2 } = await import("https://esm.town/v/stevekrouse/messages2");
// Store messages via SQLite
// (stores at @me.messages2 in the current version)
// like `https://www.val.town/@stevekrouse.tell` but cooler!
export const tell2 = async (msg) => {
const { DB } = await import("https://deno.land/x/sqlite/mod.ts");
const db = new DB();
// Get existing messages (if any)
if (messages2 !== undefined) {
db.deserialize(messages2);
shySapphireLeopard
@stevekrouse
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
function App() {
const links = [
{ name: "Portfolio", url: "https://owais-warsi.vercel.app" },
{ name: "Twitter", url: "https://x.com/MO_warsi786" },
{ name: "GitHub", url: "https://github.com/Muhammad-Owais-Warsi" },
{ name: "LinkedIn", url: "https://www.linkedin.com/in/muhammad-owais-warsi-318987276/" },
{ name: "Blogs", url: "https://knowtech.hashnode.dev/" },
return (
<div className="container">
valle_tmp_202239440460780356420276977660784
@janpaul123
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
// Set these to your own
const username = "janpaul123";
const tempValsParentFolderId = "4bb7b010-4443-11ef-8642-de64eea55b61";
const valTownToken = Deno.env.get("valtown");
const vt = new ValTown({ bearerToken: valTownToken });
const app = new Hono();
const jsxResponse = (jsx) => {
return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });
const systemprompt = `The conversation below is your recent interaction with the user.
purpleHornet
@stevekrouse
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
export const Bringing_My_OCD_Online = (c: Context) => {
return c.html(
<html>
<head>
<title>Bringing My OCD Online</title>
<style
dangerouslySetInnerHTML={{
__html:
`:root{--slate1: hsl(200, 7%, 8.8%);--slate2: hsl(195, 7.1%, 11%);--slate3: hsl(197, 6.8%, 13.6%);--slate4: hsl(198, 6.6%, 15.8%);--slate5: hsl(199, 6.4%, 17.9%);--slate6: hsl(201, 6.2%, 20.5%);--slate7: hsl(203, 6%, 24.3%);--slate8: hsl(207, 5.6%, 31.6%);--slate9: hsl(206, 6%, 43.9%);--slate10: hsl(206, 5.2%, 49.5%);--slate11: hsl(206, 6%, 63%);--slate12: hsl(210, 6%, 93%);--blue1: hsl(212, 35%, 9.2%);--blue2: hsl(216, 50%, 11.8%);--blue3: hsl(214, 59.4%, 15.3%);--blue4: hsl(214, 65.8%, 17.9%);--blue5: hsl(213, 71.2%, 20.2%);--blue6: hsl(212, 77.4%, 23.1%);--blue7: hsl(211, 85.1%, 27.4%);--blue8: hsl(211, 89.7%, 34.1%);--blue9: hsl(206, 100%, 50%);--blue10: hsl(209, 100%, 60.6%);--blue11: hsl(210, 100%, 66.1%);--blue12: hsl(206, 98%, 95.8%)}body{font-family:system-ui,sans-serif;margin:auto;padding:20px;max-width:65ch;text-align:left;word-wrap:break-word;overflow-wrap:break-word;line-height:1.5}h1,h2,h3,h4,h5,h6,strong,b{font-weight:500}a{color:var(--blue10)}nav a{margin-right:10px}textarea{width:100%;font-size:16px}input{font-size:16px}content{line-height:1.6}table{width:100%}img{max-width:100%;height:auto}code{padding:2px 5px;background-color:var(--slate4);font-family:menlo,monospace}pre{padding:1rem}pre>code{all:unset}blockquote{border:1px solid var(--slate10);color:var(--slate11);padding:2px 0 2px 20px;margin:0;font-style:italic}`,
importFromGist
@tmcw
An interactive, runnable TypeScript val by tmcw
Script
export let importFromGist = await import(
"https://gist.githubusercontent.com/tmcw/ccad20142d37f267f84c63bf2d784ce2/raw/3a167e7cbdf08cd93fccde754bd2efbeed626f38/test.mjs"
test
@Timmy
An interactive, runnable TypeScript val by Timmy
Script
export const test = (async function init() {
const res = await import("https://esm.sh/web-features/index.json") assert { type: "json" };
return res;
promptSampleTemplates
@webup
An interactive, runnable TypeScript val by webup
Script
export const promptSampleTemplates = (async () => {
const { PromptTemplate } = await import("npm:langchain/prompts");
const multipleInputPrompt = new PromptTemplate({
inputVariables: ["adjective", "content"],
template: "Tell me a {adjective} joke about {content}.",
const formattedMultipleInputPrompt = await multipleInputPrompt.format({
adjective: "funny",
content: "chickens",
return formattedMultipleInputPrompt;
hello
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
export const hello = "hello world";
coffeeFowl
@pomdtr
An interactive, runnable TypeScript val by pomdtr
Script
// Import Astral
const command = new Command().arguments("<app>").action(async (_, app) => {
// Launch the browser
const browser = await launch();
// Open a new page
const page = await browser.newPage(`https://${app}.localhost`);
// Take a screenshot of the page and save that to disk
const screenshot = await page.screenshot();
Deno.stdout.write(screenshot);
browser.close();
chorus_data
@hyperglitch
// get and parse magnetometer data from https://services.swpc.noaa.gov/text/ace-magnetometer.txt
Script
// get and parse magnetometer data from https://services.swpc.noaa.gov/text/ace-magnetometer.txt
// used for chorus art installation
export async function chorus_data(auth) {
// check auth
if (auth != process.env.chorus_access) {
return "";
let data = await chorus_get_mag_data();
await set("chorus_stored_data", data);
const last = data[data.length - 1];
return last.x + "\n" + last.y + "\n" + last.z + "\n" + last.tot + "\n\n";
pubmed
@yawnxyz
Pubmed Search Search Pubmed using a public pubmedisearch endpoint https://yawnxyz-pubmed.web.val.run?query=phage therapy
HTTP (deprecated)
# Pubmed Search
Search Pubmed using a public pubmedisearch endpoint
https://yawnxyz-pubmed.web.val.run?query=phage therapy
const app = new Hono();
// PubMed search function (modified to accept more parameters)
async function pubmedSearch(query, userId, additionalParams = {}) {
const url = 'https://www.pubmedisearch.com/api/fetch_articles';
const options = {
method: 'POST',
headers: {
umdImport
@easrng
An interactive, runnable TypeScript val by easrng
Script
export async function umdImport(url: string | URL, globals = {}) {
const res = await fetch(url);
if (!res.ok) throw new Error(await res.text());
let code = await res.text();
code = code.replace(/^#!/gm, "// #!");
const module = {
exports: {} as any,
const global = new Proxy({}, {
...Reflect,
get(o, k) {
addReactFromCDN
@liamdanielduffy
An interactive, runnable TypeScript val by liamdanielduffy
Script
import { scriptTag } from "https://esm.town/v/liamdanielduffy/scriptTag";
export function addReactFromCDN(): string {
const reactDom = scriptTag({
src: "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
const react = scriptTag({
src: "https://unpkg.com/react@18/umd/react.production.min.js",
return [react, reactDom].join(" ");