Search
valwriter_react_clientside
@stevekrouse
[ ] streaming we can't stream into an actual val - we can only write a full piece of text, i guess we can stream back the code so we don't get bored while we wait [ ] send the code of the valwriter back to gpt only if it's related, might need some threads [ ] send errors, logs back to gpt [ ] get screenshots of the output back to gpt [ ] experiment with applying diffs instead of regenerating from scratch every time could also have it as a conversation as the main thing and only the diffs get applied or the whole code gets replaced, maybe tool use it the key here... which does make it seem like a custom gpt may be the better fit...
HTTP (deprecated)
- [ ] streaming
- we can't stream into an actual val - we can only write a full piece of text, i guess we can stream back the code so we don't get bored while we wait
- [ ] send the code of the valwriter back to gpt
- only if it's related, might need some threads
- [ ] send errors, logs back to gpt
- [ ] get screenshots of the output back to gpt
/** @jsxImportSource https://esm.sh/react@18.2.0 */
export default basicAuth(async (req) => {
const url = new URL(req.url);
if (url.pathname === "/") {
blocks
@tmcw
Unfancy blocks In the old days, there was a website called bl.ocks.org which re-hosted content on GitHub Gists and displayed visualizations made in those gists. It wasn't shiny but it was well-crafted and for the little community that used it, it was very nice. This is a much worse, but very small, version of the same kind of program. This also shows you stuff from blocks. It displays readmes, with Titus's lovely micromark . It uses Ian's collected search index of bl.ocks.org to show you examples and thumbnails. It uses Alpine to pull together a little interface. And, of course, Val Town to make it all work.
Express
# [Unfancy blocks](https://tmcw-blocks.express.val.run/)
[](https://tmcw-blocks.express.val.run/)
In the old days, there was a website called bl.ocks.org which re-hosted content on [GitHub Gists](https://gist.github.com/) and displayed visualizations made in those gists. It wasn't shiny but it was well-crafted and for the little community that used it, it was very nice.
This is a much worse, but very small, version of the same kind of program. This also shows you stuff from blocks. It displays readmes, with Titus's lovely [micromark](https://github.com/micromark/micromark). It uses Ian's [collected search index of bl.ocks.org](https://observablehq.com/@enjalot/blockbuilder-search-data) to show you examples and thumbnails. It uses [Alpine](https://alpinejs.dev/) to pull together a little interface. And, of course, [Val Town](https://www.val.town/) to make it all work.
export let blocks = async (req, res) => {
const { micromark } = await import("npm:micromark");
const [_, user, id, ...file] = req.path.split("/");
if (!user) {
return res.send(`
<html>
VALLErun
@ejfox
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
HTTP (deprecated)
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
/** @jsxImportSource https://esm.sh/react */
function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
content = content.replaceAll("\r\n", "\n");
const regex =
/\[SEARCH_START_SINGLE_LINE\]\n([\s\S]*?)\n\[\/SEARCH_START_SINGLE_LINE\]\s*\[SEARCH_END_SINGLE_LINE\]\n([\s\S]*?)\n?\[\/SEARCH_END_SINGLE_LINE\]\s*\[REPLACE\]\n([\s\S]*?)\n\[\/REPLACE\]/g;
const blocks = [];
let match;
while ((match = regex.exec(content)) !== null) {
blocks.push({
promptSampleTemplatesPartial
@bluemsn
An interactive, runnable TypeScript val by bluemsn
Script
export const promptSampleTemplatesPartial = (async () => {
const { PromptTemplate } = await import("npm:langchain/prompts");
const date = () => new Date().toISOString();
const prompt = new PromptTemplate({
template: "Tell me a {adjective} joke about the day {date}",
inputVariables: ["adjective", "date"],
console.log("prompt:-----\n", prompt);
const partialPrompt = await prompt.partial({ date });
console.log("partialPrompt:-----\n", partialPrompt);
const formattedPrompt = await partialPrompt.format({ adjective: "funny" });
fun
@anilgr
An interactive, runnable TypeScript val by anilgr
Script
export const fun = (() => {
console.log("this is fun !!");
VALLErun
@ubyk
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
HTTP (deprecated)
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
/** @jsxImportSource https://esm.sh/react */
function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
content = content.replaceAll("\r\n", "\n");
const regex =
/\[SEARCH_START_SINGLE_LINE\]\n([\s\S]*?)\n\[\/SEARCH_START_SINGLE_LINE\]\s*\[SEARCH_END_SINGLE_LINE\]\n([\s\S]*?)\n?\[\/SEARCH_END_SINGLE_LINE\]\s*\[REPLACE\]\n([\s\S]*?)\n\[\/REPLACE\]/g;
const blocks = [];
let match;
while ((match = regex.exec(content)) !== null) {
blocks.push({
homepage
@csl_
Got a domain for vals; needs a homepage; minimal effort
HTTP
Got a domain for vals; needs a homepage; minimal effort
* This script creates a minimalist homepage with a beautiful, animated gradient background.
* It features a central business card for Carl Lange with a 3D flip animation on click.
* The front of the card displays Carl's name and an animated subheading, while the back shows a humorous message and links.
/** @jsxImportSource https://esm.sh/react */
function App() {
const subheadings = [
"doing this for fun",
"Donald Duck is my spirit animal",
"talks a good game",
multirouteHono
@vawogbemi
🌐 Multi-Route Website with Hono
HTTP (deprecated)
🌐 Multi-Route Website with Hono
* @title Multi-Route Website with Hono in Val Town
* @description Create a personal portfolio website with multiple pages using Hono framework and JSX.
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
// JSX renderer middleware
app.use(
jsxRenderer(({ children }) => {
console.log(children);
return html`
ittyRouterExample
@rafter
Test readme for itty router
Script
# Test readme for itty router
export const ittyRouterExample = async (request: Request) => {
const { Router, json } = await import("npm:itty-router");
const tester = [{ msg: "hi test msg" }];
const x = (param) => [param, 1, 2, 3, "testing"];
const router = Router();
router.get("/", () => "Hi");
router.get("/test", () => tester);
router.get("/newer/:id", (request) => {
const { params } = request;
semverExample
@tmcw
semver The semver module is the most popular way to parse the Semantic Versioning style of versions. Semantic Versions attempt to convey a lot more information about a version than just a single number - each part of the version indicates breaking changes, features, or minor updates.
Script
# semver
The [semver module](https://www.npmjs.com/package/semver) is the most popular way to parse the [Semantic Versioning](https://semver.org/) style of versions. Semantic Versions attempt to convey a lot more information about a version than just a single number - each part of the version indicates breaking changes, features, or minor updates.
export let semverExample = (async () => {
const { default: semver } = await import("npm:semver");
return semver.parse("1.0.0-beta.1");
salmonCrab
@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)
# SQLite Explorer (Dev Branch)
View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) 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](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/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:
[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
compactBlushGrasshopper
@tempdev
An interactive, runnable TypeScript val by tempdev
Script
const BASEDOM = "https://whisperingauroras.com";
interface Servers {
name: string | null;
dataHash: string | null;
interface APIResponse {
name: string | null;
image: string | null;
mediaId: string | null;
stream: string | null;
interface RCPResponse {
valle_tmp_9687248893374514440365302223592
@janpaul123
// This val responds with "Hello World" to all incoming HTTP requests along with some crazy CSS gradients
HTTP (deprecated)
// This val responds with "Hello World" to all incoming HTTP requests along with some crazy CSS gradients
export default async function main(req: Request): Promise<Response> {
// CSS with crazy gradients
const css = `
body {
background: linear-gradient(45deg, #ee0979, #ff6a00, #ff6a00, #799f0c);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
@keyframes gradient {
0% {
MacTrackpadScale
@perbhat
@jsxImportSource npm:react
HTTP (deprecated)
/** @jsxImportSource npm:react **/
const TrackpadScale = () => {
const [forceText, setForceText] = useState("Place object here");
useEffect(() => {
const maxForce = 3.0;
const gramsPerForceUnit = 1000 / maxForce;
const handleForce = (event: MouseEvent) => {
if ("webkitForce" in event) {
const force = (event as any).webkitForce;
const grams = Math.round(force * gramsPerForceUnit);
nhttpExample
@tmcw
nhttp example This uses the tiny nhttp framework with the Val Town Web API . New frameworks like nhttp works really well with our system because they rely on the standard Request & Response objects! Server examples Hono Peko Itty Router Nhttp
HTTP (deprecated)
# nhttp example
This uses the tiny [nhttp framework](https://github.com/nhttp/nhttp) with the Val Town [Web API](https://docs.val.town/api/web). New frameworks like `nhttp` works really well with our system because they rely on the standard Request & Response objects!
### Server examples
- [Hono](https://www.val.town/v/tmcw.honoExample)
- [Peko](https://www.val.town/v/tmcw.pekoExample)
- [Itty Router](https://www.val.town/v/tmcw.ittyRouterExample)
export const nhttpExample = async (request) => {
const { nhttp } = await import("npm:nhttp-land@1");
const app = nhttp();
app.get("/", () => {