Search

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

/** @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;

valTownChatGPT

@maxm

ChatGPT Implemented in Val Town Demonstrated how to use assistants and threads with the OpenAI SDK and how to stream the response with Server-Sent Events.

HTTP

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

import OpenAI from "npm:openai";

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

// This uses by personal API key, you'll need to provide your own if

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

const clientCode = () => {

document.getElementById("input").addEventListener("submit", async function(event) {

</form>

</script>

diplomaticOrangeGuineafowl

@ask0ne

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

HTTP

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

import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0";

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

const GRID_SIZE = 20;

</div>

function client() {

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

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

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

multirouteHono

@iamseeley

🌐 Multi-Route Website with Hono

HTTP

<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>

feeds

@stef

Bluesky feed generator

HTTP

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

import React, { useState } from "https://esm.sh/react";

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

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> {

dedicatedAmethystLeopard

@mohsen

@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 App() {

</div>

function client() {

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

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

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

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

- [ ] 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

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>

tldrawClient

@maxm

tldraw client forked from tfayyaz (thanks!) Open https://www.val.town/v/robcobb/tldrawcanvasserver to actually view the page; this is a js script imported into that val. Goal is do some little experiments with the tldraw client: a little tldraw console (like the chrome devtools, but populated with tldraw objects) a little version of microworlds logo, but on a tldraw canvas some other experiments! we'll see Uses a pinned older version of tldraw because the other ones seem to fail on a weird dependency issue. My guess is that the val.town bundler tricks don't work so good on transitive deps, but I don't really know. @use-gesture/react couldn't find the right import for a call to useMemo.

Script

# tldraw client

forked from tfayyaz (thanks!)

Open https://www.val.town/v/robcobb/tldrawcanvasserver to actually view the page; this is a js script imported into that val.

Goal is do some little experiments with the tldraw client:

- a little tldraw console (like the chrome devtools, but populated with tldraw objects)

Uses a pinned older version of tldraw because the other ones seem to fail on a weird dependency issue. My guess is that the v

@use-gesture/react couldn't find the right import for a call to useMemo.

import { Tldraw } from "https://esm.sh/tldraw@2.1.0";

console.log(globalThis.React)

brokenBells

@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 NOTES = {

</div>

function client() {

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

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

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

SermonGPTUI

@mjweaver01

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

HTTP

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

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

import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1";

import React, { ErrorInfo, StrictMode, useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";

class ErrorBoundary extends React.Component<

{ children: React.ReactNode },

constructor(props: { children: React.ReactNode }) {

const handleSubmit = async (e: React.FormEvent) => {

<ReactMarkdown

</ReactMarkdown>

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

/** @jsxImportSource npm:react **/

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

export default (req: Request) => {

return new Response(

…

50 51

53 54

…

252