Search
jsoninvoice_homepage
@pomdtr
@jsxImportSource npm:hono/jsx
Script
/** @jsxImportSource npm:hono/jsx */
const invoice: Invoice = {
id: "20240401",
issued: "2024-01-01",
due: "2024-01-15",
currencies: [{ code: "USD" }, { code: "EUR", rate: 0.94 }],
tax: 10,
from: {
name: "Achille Lacoin",
to: {
react_client
@nbbaier
// JSX can be used in the client val thanks to this magic comment
Script
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
helloworld
@gueejla
Hello val town!
HTTP (deprecated)
Hello val town!
/** @jsxImportSource npm:react **/
export default (req: Request) => {
return new Response(
renderToString(
<html>
<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1" />
<main>
<h1>Hello gueejla!</h1>
<p>This is your first val. Journey of a thousand vals begins with a single line of code.</p>
toArrayExample
@jdan
An interactive, runnable TypeScript val by jdan
Script
export const toArrayExample = (async () => {
const { default: _ } = await import("npm:lodash");
return [
_.toArray("hi πΊπΈ").join(", "),
_.toArray("hi π΄σ §σ ’σ ³σ £σ ΄σ Ώ").join(", "),
p5
@eyeseethru
P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5";
export function setup() {
createCanvas(400, 400);
}
export function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
import { sketch } from "https://esm.town/v/saolsen/p5";
export default sketch(import.meta.url); How it works The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default sketch export) so you can't call any Deno functions, environment variables, or other server side apis.
Script
# P5 sketch
Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example.
## Usage
* Make a p5 sketch, you can import the p5 types to make it easier.
```typescript
* Export any "global" p5 functions. These are functions like `setup` and `draw` that p5 will call.
export function sketch(module: string): (req: Request) => Response {
return function(req: Request): Response {
return new Response(
<html>
hono_react_ssr
@stevekrouse
Hono React SSR Development in progress
Script
# Hono React SSR
Development in progress
/** @jsxImportSource https://esm.sh/react */
// button that's disabled until client react hydrates
export const Button = (props) => {
const [clientHydrated, setClientHydrated] = useState(false);
useEffect(() => setClientHydrated(true), []);
return <button disabled={!clientHydrated} {...props}></button>;
export const Form = ({ onSubmit, ...props }: any) => {
const [clientHydrated, setClientHydrated] = useState(false);
printedWhiteToad
@lazyplatypus
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
const MODELS = ["llama3.1-8b", "llama3.1-70b"];
function App() {
const [messages, setMessages] = useState<Array<{ role: string; content: string }>>([]);
const [edits, setEdits] = useState<Array<{ id: number; content: string }>>(
const [input, setInput] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [htmlOutput, setHtmlOutput] = useState("");
const [selectedModel, setSelectedModel] = useState(MODELS[0]);
const messagesEndRef = useRef<HTMLDivElement>(null);
notebook
@yieldray
https://yieldray-notebook.web.val.run/
HTTP (deprecated)
<https://yieldray-notebook.web.val.run/>
const html = htm.bind(vhtml);
const markdown = (md) =>
micromark(md, {
extensions: [gfm()],
htmlExtensions: [gfmHtml()],
// components
const layout_html = ({ head, body }) =>
`<!DOCTYPE html>`
+ html`<html lang="en">
falSDXLExample
@iamseeley
An interactive, runnable TypeScript val by iamseeley
Script
import * as fal from "npm:@fal-ai/serverless-client";
fal.config({
// Can also be auto-configured using environment variables:
credentials: Deno.env.get("FAL_KEY"),
const prompt = "a cute and happy dog";
const result: any = await fal.run("fal-ai/fast-lightning-sdxl", { input: { prompt } });
console.log(result.images[0].url);
honoTanaEndpoint
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
const token = Deno.env.get("tanaInputAPI");
export const honoTanaEndpoint = async (req: Request) => {
const app = new Hono();
app.get("/", async (c) => {
let { text, url } = c.req.query();
const payload: APIPlainNode = {
name: text,
children: [
type: "field",
attributeId: "cwi23sOzRSh8",
router
@maxm
@jsxImportSource npm:hono/jsx
Script
/** @jsxImportSource npm:hono/jsx */
createHistory,
type HistoryEntry,
readHistory,
writeHistory,
} from "https://esm.town/v/pomdtr/test_explorer_history";
const router = new Hono();
const { author } = extractValInfo(import.meta.url);
router.get("/", async (c) => {
try {
valle_tmp_2671404837576818506367901100203444
@janpaul123
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
Sure, I'll focus on cleaning up some repeated code, improve code readability, and add some enhancements while keeping the existing functionality intact. Here's the improved version:
ts
/** @jsxImportSource https://esm.sh/react */
const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });
const username = "janpaul123";
const app = new Hono();
const renderJSX = (jsx) => {
return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });
const systemPrompt = `The conversation below is your recent interaction with the user. Your entire response should only be TypeScript. Your response should start with \`\`\`ts and end with \`\`\`. Make an HTTP val (other vals are currently not supported to run, even though we have examples for them). Start your response with a comment explaining how your approach will work, what libraries or API calls you will use, and any tradeoffs you're making. Then write the code in a concise way, the simplest way to achieve the goal, though you can add some inline comments to explain your reasoning (not for every line, but for major groups of lines). Don't use any environment variables unless strictly necessary, for example use APIs that don't require a key, prefer internal function imports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno functions where possible. Unless specified, don't add error handling, make sure that errors bubble up to the caller. There should be no comments like "more content here", it should be complete and directly runnable. The val should create a "export default async function main" which is the main function that gets executed on every HTTP request.`.replace("\n", " ");
const additionalPrompt = `Since your last response the user might have changed the code. The current version of the code is below. Keep your response as close to their current code as possible, only changing things that are strictly necessary to change.`.replace("\n", "");
redPrimate
@adrianlee
Intro
HTTP (deprecated)
Intro
/** @jsxImportSource npm:react **/
export default (req: Request) => {
return new Response(
renderToString(
<html>
<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1" />
<main>
<h1>Hello adrianlee!</h1>
<p>This is your first val.</p>
delay
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
export let delay = async (ms = 300) => {
const { default: delay } = await import("npm:delay");
return delay(ms);
buildReactMinified
@liamdanielduffy
An interactive, runnable TypeScript val by liamdanielduffy
Script
import { fetch } from "https://esm.town/v/std/fetch";
let { REACT_MINIFIED } = await import("https://esm.town/v/liamdanielduffy/REACT_MINIFIED");
export async function buildReactMinified() {
let res = await fetch(
"https://unpkg.com/react@18/umd/react.production.min.js",
let src = await res.text();
REACT_MINIFIED = src;
return REACT_MINIFIED;