Search

marineMoccasinLizard

@kaz

* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar. * It uses React for the frontend and SQLite for persistent storage on the backend. * The ranking system updates based on user choices and displays in the Answers tab. * A progress bar is added to show completion of 20 questions.

HTTP

"Have another set of eyes in the back of your head (they are fully functional)",

function App() {

function SplashScreen({ onGetStarted }: { onGetStarted: () => void }) {

function TabBar() {

function Game({ user, saveAnswer }: { user: User | null; saveAnswer: (answer: Answer, losingAnswer: string) => void }) {

function Answers(

function Profile({ user, setUser }: { user: User | null; setUser: (user: User | null) => void }) {

function client() {

async function server(request: Request): Promise<Response> {

async function updateEloRankings(sqlite: any, KEY: string, winningAnswer: string, losingAnswer: string) {

telegramValTownBotWebhook

@stevekrouse

The beating heart of the @ValTownBot on Telegram: https://www.val.town/v/stevekrouse.telegram

HTTP

import { nanoid } from "https://esm.town/v/stevekrouse/nanoid";

import { telegramSendMessage } from "https://esm.town/v/vtdocs/telegramSendMessage?v=5";

export default async function server(req: Request): Promise<Response> {

// Verify this webhook came from our bot

if (

const chatId: number = body.message.chat.id;

let chat = telegramValTownBotSecrets.find((c) => c.chatId === chatId);

// Helper function to message back the user that triggered this webhook

let messageBack = (message) =>

telegramSendMessage(Deno.env.get("telegramBot"), {

reluctantCoffeeGayal

@kaz

HTTP

"Have another set of eyes in the back of your head (they are fully functional)",

function App() {

function SplashScreen({ onGetStarted }: { onGetStarted: () => void }) {

function TabBar() {

function Game({ user, saveAnswer }: { user: User | null; saveAnswer: (answer: Answer, losingAnswer: string) => void }) {

function Answers(

function Profile({ user, setUser }: { user: User | null; setUser: (user: User | null) => void }) {

function client() {

async function server(request: Request): Promise<Response> {

async function updateEloRankings(sqlite: any, KEY: string, winningAnswer: string, losingAnswer: string) {

valentine

@civroh

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(

myExpressApi

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

Express (deprecated)

import { myState } from "https://esm.town/v/stevekrouse/myState";

import { set } from "https://esm.town/v/std/set?v=11";

export async function myExpressApi(req: express.Request, res: express.Response) {

res.json({

count: await set(

iframeGridInfinite

@maxm

* This val creates an infinite grid of iframes with thick draggable borders. * It includes a welcome modal, fixes the drag state issue, and stores iframe URLs in a database.

HTTP

import { createRoot } from "https://esm.sh/react-dom/client";

function Modal({ onClose }) {

return (

</div>

function IframeCell({ cellKey, url, onUrlSubmit, isLoading }) {

const [inputUrl, setInputUrl] = useState(url || '');

</div>

function App() {

const [position, setPosition] = useState({ x: 0, y: 0 });

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

async function handleSubmitUrl(request: Request): Promise<Response> {

const { cellKey, url } = await request.json();

headers: { 'Content-Type': 'application/json' },

async function handleLoadUrls(): Promise<Response> {

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

headers: { 'Content-Type': 'application/json' },

async function server(request: Request): Promise<Response> {

if (request.method === 'POST' && new URL(request.url).pathname === '/api/submit-url') {

dialog

@jdan

dialog Renders windows 98 dialog boxes as SVGs. Using satori and styles from 98.css Usage https://jdan-dialog.web.val.run/? w =200& h =110& title =Hello& caption =World w (default: 200): the width of the dialog h (default: 110): the height of the dialog title (default: "{title}"): the text in the title bar caption (default: "{caption}"): the caption text

HTTP

function TitleBar(props) {

function TitleBarText(props) {

function TitleBarControls(props) {

function Button(props) {

function TitleBarControl(props) {

function MinimizeButton(props) {

function MaximizeButton(props) {

function CloseButton(props) {

function Window(props) {

function WindowBody(props) {

cerebrasTemplate

@gokulnpc

Cerebras Inference template This val shows you how you can deploy an app using Cerebras Inference on Val Town in seconds. What is Cerebras? Cerebras is an American chip manufacturer that produces large wafer chips that deliver mind-blowing LLM inference speeds. As of this writing on Jan 17, 2025, Cerebras Inference provides Llama 3.18b, 3.1 70b, and 3.370b at a jaw-dropping 2k tokens per second – that's 50x faster than what the frontier labs produce. Llama 3.370b at 2k tokens per second is particularly noteworthy because it is a GPT-4-class model . This level of intelligence at that level of speed will unlock whole new classes of applications. Quick start Set up Cerebras Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Once Cerebras is set up in your Val Town account, there are two ways to get started: Fork this app and customize it (or ask Townie AI to customize it) Start a new chat with Townie AI and copy & paste the following instructions: . Use Cerebras for AI on the backend like so: const { OpenAI } = await import("https://esm.sh/openai"); const client = new OpenAI({ apiKey: Deno.env.get("CEREBRAS_API_KEY"), baseURL: "https://api.cerebras.ai/v1" }); const response = await client.chat.completions.create({ model: "llama-3.3-70b", messages: [], }); const generatedText = response.choices[0].message.content; For example, the val in this template was created by asking Townie AI to "Make a chatgpt clone", then I hit shift-enter twice, and then pasted in the instructions on how to use Cerebras from above, then hit enter. Townie built this app on its first try, in about 20 seconds. Sample apps Cerebras Searcher - a Perplexity clone that uses the SerpAPI to do RAG and summaries with Cerebras ( requires a SerpAPI key ) Cerebras Coder - an app that generates websites in a second with Cerebras Cerebras Debater - an app that truly shows Cerebras's speed: it's Cerebras talking to Cerebras in a debate

HTTP

Use Cerebras for AI on the backend like so:

const { OpenAI } = await import("https://esm.sh/openai");

const client = new OpenAI({

apiKey: Deno.env.get("CEREBRAS_API_KEY"),

</div>

function client() {

createRoot(document.getElementById("root")).render(<SubscriptionTracker />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

reactDemo

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { addReactFromCDN } from "https://esm.town/v/liamdanielduffy/addReactFromCDN";

import { buildHtml } from "https://esm.town/v/liamdanielduffy/buildHtml";

export function reactDemo() {

return buildHtml(addReactFromCDN(), "");

valentine

@ivannnnnn

@jsxImportSource https://esm.sh/react@18.2.0

HTTP

"Please don't do this to me, I'm fragile",

function App() {

const [noClicks, setNoClicks] = useState(0);

cursor: "pointer",

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(

randomInteger

@adrian

An interactive, runnable TypeScript val by adrian

Script

export async function randomInteger(min: number, max: number) {

min = Math.ceil(min);

max = Math.floor(max);

startup_clicker

@jaredsilver

@jsxImportSource https://esm.sh/react

HTTP

import { createRoot } from "https://esm.sh/react-dom/client";

function App() {

const [gameState, setGameState] = useState({

</div>

function Store({ hireProductManager, hireSoftwareEngineer, hireDirectorOfProduct, hireDirectorOfEngineering, hireVPOfProduct,

const [activeTab, setActiveTab] = useState('recruit');

</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(`

marp

@pomdtr

theme: gaia _class: lead paginate: true backgroundColor: "#fff" backgroundImage: url('https://marp.app/assets/hero-background.svg') Marp Markdown Presentation Ecosystem https://marp.app/ How to write slides Split pages by horizontal ruler ( --- ). It's very simple! :satisfied: # Slide 1 foobar --- # Slide 2 foobar

HTTP

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";

import { Marp } from "npm:@marp-team/marp-core";

export default async function() {

const { author, name } = extractValInfo(import.meta.url);

const { readme } = await api(`/v1/alias/${author}/${name}`);

emailRandomJoke

@gfievre

// Fetches a random joke.

Cron

import { email } from "https://esm.town/v/std/email?v=9";

// Fetches a random joke.

async function fetchRandomJoke() {

const response = await fetch(

"https://official-joke-api.appspot.com/random_joke",

aoc23_06

@karfau

https://adventofcode.com/2023/day/6

Script

// expect(firstStar(``), "*1 sample 2").to.equal("?");

function firstStar(input: string) {

const [times, distances] = input.split("\n").map(extractNumbers);

// expect(secondStar(``), "*1 sample 2").to.equal("?");

function secondStar(input: string) {

return firstStar(input.replace(/[ ]+/g, ""));

console.log("solution *2:", secondStar(input()));

function input() {

return `Time: 41 77 70 96

Distance: 249 1362 1127 1011`;

function toInt(s: string) {

return parseInt(s);

function extractNumbers(line: string) {

return line.match(/\d+/g).map(toInt);

// [0,1,2,3].reduce(sum, 0) => 6

function sum(sum: number, current: number) {

return sum + current;

// wrap a value to print and return it

function debug<T>(value: T, msg = "debug"): T {

console.log(msg, value);

…

214 215

216

217 218

…

467