Search
cryptoVolumeTraderAdvice
@Sabji
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function CryptoTracker() {
</div>
function client() {
createRoot(document.getElementById("root")).render(<CryptoTracker />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
forwarder
@debbie
Unlimited Anonymous Emails Create anonymous emails and forward their results to your inbox.
Email
/** @jsxImportSource https://esm.sh/react */
import React, { useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { encode } from "https://deno.land/std@0.203.0/encoding/base64.ts";
fontSize: '0.8rem',
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
MoonCatWalk
@midnightlightning
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useCallback, useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const SPEED = 6; // pixels per step
mousePos.current = {
x: e.clientX,
y: e.clientY,
moveCount: 1,
mousePos.current = {
x: e.clientX,
y: e.clientY,
moveCount: mousePos.current.moveCount + 1,
backgroundPosition: `-${petState.frameIndex * SPRITE_SIZE}px -${ROW_INDEX[petState.animation] * SPRITE_SIZE}px`,
function client() {
const root = document.getElementById("root");
if (typeof document !== "undefined") {
client();
export default async function server(req: Request): Promise<Response> {
monetaryBronzeMongoose
@perbhat
@jsxImportSource npm:react
HTTP
/** @jsxImportSource npm:react **/
import { useEffect, useState } from "npm:react";
import { renderToString } from "npm:react-dom@18/server";
const TrackpadScale = () => {
diplomaticMagentaMoth
@maphido
As a first test, I asked townie to help me create a simple game of snake that can be played using the arrow keys on a keyboard of the buttons on the display for mobile screens. After a few minutes and a few rounds of error correction and code reviews, it just works
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect, useRef, useCallback } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const GRID_SIZE = 20;
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
primitiveBronzeOwl
@perbhat
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { renderToString } from "https://esm.sh/react-dom/server";
const ForceScale = () => {
__html: `
import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom';
import { ForceScale } from '${import.meta.url}';
ReactDOM.hydrate(React.createElement(ForceScale), document.getElementById('root'));
</body>
cerebras_coder
@help83
This is an AI code assistant powered by Cerebras , running llama3.3-70b. Inspired by Hassan's Llama Coder . Setup Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Todos I'm looking for collaborators to help. Fork & send me PRs! [ ] Experiment with two prompt chain (started here )
HTTP
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, {
useState,
useMemo
} from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
// City Data (similar to previous taxi data structure)
return <TaxiBookingApp />;
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
dateme_home_react
@stevekrouse
@jsxImportSource https://esm.sh/react@18.2.0
Script
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { useEffect, useState } from "https://esm.sh/react@18.2.0";
async function getCurrentPosition(opts): Promise<GeolocationPosition> {
return new Promise((resolve, reject) => {
BIGweather
@stevekrouse
Big Weather Display Displays the current day's weather information BIG so you can see it from far away. I LOVE this val. My girlfriend and I use it everyday. We have an old chromebook slate set up in the corner
of our apartment, so we can get the daily weather at a glance without our phones. Currently it's hardcoded for: prospect heights, brooklyn charts of the temp and % change of precipitation Probably easiest for you to fork it and change it to suit your needs vs making it customizable
HTTP
/** @jsxImportSource https://esm.sh/react */
import { exponentialBackoffMiddleware } from "https://esm.town/v/stevekrouse/exponentialBackoffMiddleware";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
import React from "https://esm.sh/react";
import { renderToString } from "https://esm.sh/react-dom/server";
import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";
spectacularAzureAngelfish
@stevekrouse
A proxy that lets Val Town users get some free SocialData Search to power their Twitter Alerts, ie @stevekrouse/twitterAlert I reccomend interfacing with this proxy via this helper function: @stevekrouse/socialDataSearch
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import { Chart, registerables } from "https://esm.sh/chart.js";
</div>
function client() {
createRoot(document.getElementById("root")).render(<UsageDashboard />);
if (typeof document !== "undefined") { client(); }
export default async function(req: Request): Promise<Response> {
valcoinDashboard
@aggy
Create a wallet and email me at aggy.valcoin@valtown.email and i'll send you some coin :)
HTTP
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
const API_URL = "https://aggy-valcoinapi.web.val.run";
<script type="module">
import React from 'https://esm.sh/react@18.2.0';
import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
import { App } from '${import.meta.url}';
createRoot(document.getElementById('root')).render(React.createElement(App));
</script>
victoriousGreenLynx
@stevekrouse
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 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: "YOUR_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
const { OpenAI } = await import("https://esm.sh/openai");
const client = new OpenAI({
apiKey: "YOUR_CEREBRAS_API_KEY",
baseURL: "https://api.cerebras.ai/v1"
const response = await client.chat.completions.create({
model: "llama-3.3-70b",
/** @jsxImportSource https://esm.sh/react@18.2.0 */
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";
function App() {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") {
client();
export default async function server(request: Request): Promise<Response> {
bellTracker
@all
Needs GITHUB_CONTRIBUTIONS key set in your Val Town Environment Variables . Get this token here: https://github.com/settings/personal-access-tokens/new Give it basically the minimum permissions. It should only pull public data anyways.
HTTP
/** @jsxImportSource https://esm.sh/react */
import React, { useEffect, useRef, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
const BASE_NOTES = {
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
ivoryPorpoise
@neverstew
@jsxImportSource https://esm.sh/preact
HTTP
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
import { App } from "https://cdn.esm.sh/v90/preact@10.6.4/esm/cjs";
const appHTML = () => {
initBonsaiState
@beneskildsen
An interactive, runnable TypeScript val by beneskildsen
Script
"T<T^T^T<T<T^T^T<T^T<T^T^T^T[<T<T^T<SVS<S^S^S>S>SVSVSVS<S^S^S>S>SVSVSVS<S^S][>T>T^T>T>T>T>T^T>T>T^T^T^T[<T<T<T^T^T^T[<SVS<S^S^S>S>SVS][>T>T^T^T>T^T>T^T^T>T>T^T^T^T[<T^T^T<T^T<T^T<T<SVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^SVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^SVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^F][>T>T>T>T>T>T^T^T^T^T<T^T^T[<T<T^T>T^T^T^T[<T<T^T<T<T<T<T<T<T<T^T^T^T^T^T[<T<T<T<T<T^T>F][>T>T>S^S>SVSVS<S<S^S^F]][>T^T^T^T[<T^T[<T<T^T^T[<T^T^T^T^T<T<T<F][>T>T^T>F]][>T^T^T>T^T^T>T^T>T^T>T>T>T>R]][>T>S^S>SVSVS<S<S^S^F]]][>T^T>T>T^T>T^T^SVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^SVS<S^S^S>S>SVSVSVS<S^S^S>S>SVSVF]]]][>T^T>T>T>T>T^T^S^S>SVSVS<S<S^S^S^S>SVSVS<S<S^S^SVS<S^S^S>S>SVSVSVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^SVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^SVS<S^S^S>S>SVSVSVS<S^S^S>S>SVSVS^S>SVSVS<S<S^S^S^S>SVSVS<S<S^S^S^S>SVSVS<S<S^S^F]]",
initialPosition: { x: 45, y: 59 },
snips: {}, // clientID -> true, which clients have done a snip
return state;