Search

Badge_Generator

@muhammad_owais_warsi

val.town Badge Generator Generate your own val.town badge to embed onto your websites.

HTTP (deprecated)

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

import React from "https://esm.sh/react";

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

import { renderToString } from "https://esm.sh/react-dom/server";

function Badge({ username, title }) {

function App() {

const [username, setUsername] = React.useState("");

const [title, setTitle] = React.useState("");

const [embedCode, setEmbedCode] = React.useState("");

const generateEmbedCode = () => {

preactTest

@tmcw

An interactive, runnable TypeScript val by tmcw

Script

export const preactTest = (async () => {

const { useState, h, htm, renderToString } = await import(

"https://npm.reversehttp.com/preact,htm,preact/hooks,preact-render-to-string"

const html = htm.bind(h);

function Component() {

reactExample

@stevekrouse

@jsxImportSource https://esm.sh/react

2 1

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

export const reactExample = () =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

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;

VALLEDRAW

@janpaul123

VALL-E-DRAW LLM code generation for vals, on a canvas! Make apps with a frontend, backend, and database. First you need a working version of VALL-E. Follow the steps here . Fork this val, and update the iframeSrc to point to your working version of VALL-E. Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!

HTTP

import valledrawclient from "https://esm.town/v/janpaul123/valledrawclient";

export default valledrawclient({

iframeSrc: "https://janpaul123-valle.web.val.run",

amethystGoldfish

@willthereader

Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

const genSVG = (request: Request): string => {

</svg>,

export const reactExample = (request: Request) =>

new Response(

multirouteHono

@iamseeley

🌐 Multi-Route Website with Hono

HTTP (deprecated)

<title>${personalData.name} | Server-side Hono</title>

<style>

${websiteStyles}

<h2>Welcome to My Portfolio</h2>

<p>{personalData.summary}</p>

<p><strong>This website is rendered server-side with Hono.</strong></p>

<p>Check out the <a href='https://www.val.town/v/iamseeley/multirouteHono'>source</a> and start building your own site!

</main>

sqliteExplorerApp

@cjlm

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

HTTP (deprecated)

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

tinybase_example_server

@pomdtr

@jsxImportSource npm:hono/jsx

HTTP (deprecated)

const blobKey = `tinybase_example.json`;

app.get("/", (c) => {

// The client script is referenced in the page head

return c.html(

<html>

<title>Tinybase Example</title>

</head>

http_client_component

@pomdtr

@jsxImportSource https://esm.sh/preact

Script

/** @jsxImportSource https://esm.sh/preact **/

import { clsx } from "https://esm.sh/clsx";

import { Base64 } from "https://esm.sh/js-base64";

import { render } from "https://esm.sh/preact";

import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";

declare module "https://esm.sh/preact" {

namespace JSX {

"code-mirror": any;

export function HttpClient(props: {

bookmarks: Bookmark[];

<h1 class={"text-4xl font-bold"}>HTTP Client</h1>

render(

<HttpClient bookmarks={bookmarks} history={loadHistory()} />,

document.getElementById("app")!,

redPrimate

@adrianlee

Intro

HTTP (deprecated)

/** @jsxImportSource npm:react **/

import { renderToString } from "npm:react-dom@18/server";

export default (req: Request) => {

return new Response(

harlequinEmu

@stevekrouse

SQLite Explorer (Dev Branch) View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v81) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

HTTP (deprecated)

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

sqliteExplorerApp

@adrianmg

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v81) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

HTTP (deprecated)

- [ ] add schema viewing

- [ ] add refresh to table list sidebar after `CREATE/DROP/ALTER` statements

- [ ] add automatic execution of initial select query on double click

- [x] add views to the sidebar

- [ ] add triggers to sidebar

- [ ] add upload from SQL, CSV and JSON

- [ ] add ability to connect to a non-val town Turso database

- [x] fix wonky sidebar separator height problem (thanks to @stevekrouse)

- [x] make result tables scrollable

return c.render(

HTreeTreeP

@maxm

H🌳🌳P H-Tree-Tree-P https://maxm-htreetreep.web.val.run/

HTTP (deprecated)

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

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

import base32Encode from "npm:base32-encode";

import { renderToString } from "npm:react-dom/server";

// Uncomment to run migrations

// The script we run within the worker. Don't reference anything

// outside of this function as it won't be available within the worker.

const workerScript = () => {

addReactFromValCDN

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

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

export function addReactFromValCDN(): string {

const reactDom = scriptTag({

src: "https://api.val.town/v1/express/liamdanielduffy.REACT_DOM_CDN_VAL",

const react = scriptTag({

src: "https://api.val.town/v1/express/liamdanielduffy.REACT_CDN_VAL",

return [react, reactDom].join(" ");

…

21 22

24 25

…

184