Search
valle_tmp_767612537409962736882223362511657
@janpaul123
// This val will serve an HTML page emulating a Hacker News clone.
HTTP (deprecated)
// This val will serve an HTML page emulating a Hacker News clone.
// It uses plain HTML and CSS to create the frontend. Eventually,
// we can make it interactive with additional scripts.
export default async function(req: Request): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
resrv
@jxnblk
React SSR and client-side hydration for Val Town For streaming responses use ReactStream Usage /** @jsxImportSource https://esm.sh/react */
import resrv, { React } from "https://esm.town/v/jxnblk/resrv";
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Resrv</h1>
<p>React SSR with client-side hydration in Val Town</p>
<pre>{count}</pre>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
export default resrv(App, import.meta.url); Live example React requires matching versions for SSR and hydration.
Import React from https://esm.town/v/jxnblk/resrv to ensure your component uses the same version as this library (currently react@18.3.1). HTML Root Hydration To render a component that includes a <head> and <body> tag, pass root: true to the third options argument: function App ({ script }) {
return (
<body>
<h1>Hello</h1>
{script}
</body>
);
}
export default resrv(App, import.meta.url, { root: true }); Inspired by https://www.val.town/v/stevekrouse/react_http
Script
React SSR and client-side hydration for Val Town
For streaming responses use [ReactStream]
[ReactStream]: https://www.val.town/v/jxnblk/ReactStream
## Usage
```tsx
/** @jsxImportSource https://esm.sh/react */
/** @jsxImportSource https://esm.sh/react */
// API:
// import resrv, { React } from "https://esm.town/v/jxnblk/resrv";
// export default resrv(Component, import.meta.url);
sqliteExplorerApp
@andrewn
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)
# SQLite Explorer
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 (v86) by forking this val:
[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
emojiGuessr
@jdan
Calorie Count via Photo Uploads your photo to ChatGPT's new vision model to automatically categorize the food and estimate the calories.
HTTP (deprecated)
# Calorie Count via Photo
Uploads your photo to ChatGPT's new vision model to automatically categorize the food and estimate the calories.
/** @jsxImportSource npm:hono@3/jsx */
function esmTown(url) {
return fetch(url, {
headers: {
"User-Agent":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.142.86 Safari/537.36",
}).then(r => r.text());
const app = new Hono();
reactTodoListWebsite
@root
// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite
Script
import { buildHtml } from "https://esm.town/v/root/buildHtml";
// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite
export function reactTodoListWebsite(req, res) {
console.log(res);
res.set("Content-Type", "text/html");
res.send(buildHtml({
scripts: [addReactFromValCDN()],
styles: REACT_TODO_LIST_CONTENTS.styles,
body: REACT_TODO_LIST_CONTENTS.body,
// Forked from @liamdanielduffy.reactTodoListWebsite
valle_tmp_86768439956087117587941274446584
@janpaul123
// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat
HTTP (deprecated)
// This val will respond to any request with an HTML "Hello, world!" message with some fun CSS styles and an animated cat
export default async function(req: Request): Promise<Response> {
const html = `
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
cors_example
@neverstew
CORS issues are the bane of frontend engineers. In Val Town, if you don't customize any CORS headers, we add these defaults: Access-Control-Allow-Origin: "*"
Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE" You can override them if you wish to disallow CORS. Check out @neverstew/setCorsHeaders for the easiest way to do this in your code. This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.
HTTP (deprecated)
[CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues are the bane of frontend engineers.
In Val Town, if you don't customize any CORS headers, we add these defaults:
Access-Control-Allow-Origin: "*"
Access-Control-Allow-Methods: "GET,HEAD,PUT,PATCH,POST,DELETE"
You can override them if you wish to disallow CORS. Check out [@neverstew/setCorsHeaders](https://www.val.town/v/neverstew/setCorsHeaders) for the easiest way to do this in your code.
This val is a client-side-rendered React app that makes requests to @stevekrouse/cors_example_backend. The backend is in a different val because CORS applies to requests on different domains. The backend has examples of the default permissive CORS behavior and disabled CORS.
/** @jsxImportSource https://esm.sh/react */
const BASE_URL = "https://stevekrouse-cors_example_backend.web.val.run";
export function App() {
const [logs, setLogs] = useState([]);
VALLErun
@tmcw
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 */
export default function(
{ tempValsParentFolderId }: { tempValsParentFolderId: string },
const { author, name } = extractValInfo(import.meta.url);
const username = author;
const valTownToken = Deno.env.get("valtown");
const vt = new ValTown({ bearerToken: valTownToken });
const app = new Hono();
const jsxResponse = (jsx) => {
testNasa
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import process from "node:process";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON";
export const testNasa = fetchJSON(
`https://api.nasa.gov/planetary/apod?api_key=${process.env.nasa}&date=1995-06-16`,
chat
@chatgpt
// Forked from @webup.chat
Script
export const chat = async (
prompt: string | object = "Hello world",
options = {},
// Initialize OpenAI API stub
const { Configuration, OpenAIApi } = await import("https://esm.sh/openai");
const configuration = new Configuration({
apiKey: process.env.OPENAI,
const openai = new OpenAIApi(configuration);
// Request chat completion
const messages = typeof prompt === "string"
newChatGPT35
@bingo16
An interactive, runnable TypeScript val by bingo16
Script
export let newChatGPT35 = async ({ req, res }) => {
const postData = {
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "You are a powerful chatGPT assistant." },
role: "user",
content: "θ―·δ»η»δΈδΈδ½ θͺε·±",
const getCompletion = async () => {
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
hardwarebingo
@stevekrouse
Hardware Startup 2024 Bingo Made with Claude Artifacts
HTTP (deprecated)
# Hardware Startup 2024 Bingo
Made with Claude Artifacts
<img width="300px"
src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3618d5f1-fe2c-4b44-bdef-3c679f390700/public"/>
/** @jsxImportSource https://esm.sh/react */
const App = () => {
const items = [
"tweet steve jobs quotes",
"raise $$$",
"buy clever domain name",
sqliteExplorerApp
@stef
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)
# SQLite Explorer
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 (v86) by forking this val:
[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
vtghBlog
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
const app = new Hono();
const homepage = extractValInfo(import.meta.url);
const repo = "nbbaier/tidal-triaxial";
const content = "posts";
const apiUrl = `https://api.github.com/repos/${repo}/contents/${content}`;
const contentUrl = `https://raw.githubusercontent.com/${repo}/main/${content}`;
const editUrl = `https://github.com/${repo}/edit/main/${content}`;
app.get("/", async c => {
const posts = await getPosts(
apiUrl,
