Search
CLIBlog
@joodaloop
An interactive, runnable TypeScript val by joodaloop
Script
export const CLIBlog = (async () => {
// let response = await fetch(
// "https://example-files.online-convert.com/document/txt/example.txt",
// if (response.status != 200) {
// throw new Error("Server Error");
// // read response stream as text
// let text_data = await response.text();
// let lines = text_data.split("\n");
// return lines;
let entries = [
HTHTMX
@wilhelm
A simple website using Hono, Twind and HTMX. Hono is a tiny web server library. Now with JSX! Twind is a tiny Tailwind replacement HTMX is a tiny way to add interactivity
HTTP (deprecated)
A simple website using Hono, Twind and HTMX.
[Hono](https://hono.dev/) is a tiny web server library. Now with JSX!
[Twind](https://twind.dev/) is a tiny Tailwind replacement
[HTMX](https://htmx.org/) is a tiny way to add interactivity
/** @jsx jsx */
const app = new Hono();
const TopBar: FC = () => (
<div class="w-full p-4 flex font-bold place-content-between flex-row">
<a href="/">⚙️ Control Panel</a>
<a href="https://www.val.town/v/wilhelm/HTHTMX"></></a>
websiteStyles
@iamseeley
An interactive, runnable TypeScript val by iamseeley
Script
export const websiteStyles = `
body {
font-family: Inter, sans-serif;
line-height: 1.6;
color: #000;
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #fff;
header {
msw_example
@vladimyr
// import { setupWorker } from "npm:msw/browser";
Script
// import { setupWorker } from "npm:msw/browser";
const server = setupServer(
http.all("*", ({ request }) => handler(request)),
server.listen();
// @see: https://www.val.town/v/postpostscript/fetchWorkerExample?v=39#L18-27
const resp = await fetch("/", {
method: "POST",
body: JSON.stringify({
test: 1,
headers: {
valle_tmp_04779227870600944224693473656022
@janpaul123
// Initialize sample stories and store them in blob storage
HTTP (deprecated)
const SAMPLE_STORIES_KEY = "hn_sample_stories";
// Initialize sample stories and store them in blob storage
async function initializeSampleStories() {
const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);
if (!existingStories) {
const sampleStories = Array.from({ length: 30 }).map((_, idx) => ({
id: idx + 1,
title: faker.lorem.sentence(),
url: faker.internet.url(),
votes: faker.datatype.number({ min: 0, max: 100 }),
powerfulLimeGuppy
@movienerd
* This clicker game allows users to earn virtual money by clicking.
* It includes an upgrade system where users can purchase multiple auto-clickers and dime-smithers.
* Each upgrade adds to the overall effect, increasing earnings per second.
* Upgrades are hidden until they are unlocked for the first time.
* The game state is stored client-side using localStorage for persistence.
* React is used for the UI, and setInterval for the auto-upgrade functionality.
HTTP
* This clicker game allows users to earn virtual money by clicking.
* It includes an upgrade system where users can purchase multiple auto-clickers and dime-smithers.
* Each upgrade adds to the overall effect, increasing earnings per second.
* Upgrades are hidden until they are unlocked for the first time.
* The game state is stored client-side using localStorage for persistence.
* React is used for the UI, and setInterval for the auto-upgrade functionality.
/** @jsxImportSource https://esm.sh/react */
function App() {
const [money, setMoney] = useState(() => {
const saved = localStorage.getItem("money");
sqliteExplorerApp
@axelknock
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,
dom2semWorking
@yawnxyz
An interactive, runnable TypeScript val by yawnxyz
Script
import { JSDOM } from "npm:jsdom";
const html = "<h1>Hello, World!</h1><p>This is a <strong>test</strong>.</p>";
const dom = new JSDOM(html);
const markdown = convertHtmlToMarkdown(html, { overrideDOMParser: new dom.window.DOMParser() });
console.log(markdown);
nasaAPOD
@baiheinet
// Returns NASA's Astronomy Picture of the Day (APOD)
Script
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
// Returns NASA's Astronomy Picture of the Day (APOD)
export const nasaAPOD = fetchJSON("cutt.ly/T7ksirK");
// Forked from @iBrokeit.nasaAPOD
blobCommentDemo
@stevekrouse
@jsxImportSource npm:hono@3/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
app.get("/", async (c) => {
const comments = await blob.getJSON("comments") || [];
return c.html(
<div>
<h2>Comments</h2>
<div>
{comments.map((comment) => (
<div key={comment.id} style={{ marginBottom: "10px", padding: "10px", border: "1px solid #ccc" }}>
dynamicFormInput
@yawnxyz
An interactive, runnable TypeScript val by yawnxyz
HTTP (deprecated)
/** @jsx jsx */
const app = new Hono();
const Layout = ({ children, title = "Dynamic Form Example" }) => (
<html lang="en">
<head>
<title>{title}</title>
<script src="https://unpkg.com/htmx.org@1.9.9"></script>
</head>
<body>
{children}
json2ts_example
@varharrie
An interactive, runnable TypeScript val by varharrie
Script
import { json2ts } from "npm:@cyly/json2ts@0.2.6";
console.log(json2ts(`{"foo": "", "bar": ""}`));
console.log(json2ts(`{"foo": [{"bar": ""}]}`));
kyExample
@tmcw
ky The ky module is a nice abstraction around the fetch API , which is easily compatible with Deno. It's by the same creator as got , which more explicitly targets Node.js. Most of the time, the fetch method is all you need! But in a pinch, you can use ky to make things a little fancier.
Script
# ky
The [ky module](https://www.npmjs.com/package/ky) is a nice abstraction around the [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), which is easily compatible with Deno. It's by the same creator as [got](https://npmjs.com/got), which more explicitly targets Node.js.
Most of the time, the `fetch` method is all you need! But in a pinch, you can use `ky` to make things a little fancier.
export let kyExample = (async () => {
const { default: ky } = await import("npm:ky");
return ky("https://macwright.com/").text();
chat
@darrinm
// https://api.val.town/express/@darrinm.chat
Script
// https://api.val.town/express/@darrinm.chat
export const chat = (req, res) => {
const messages = chatMessages.map(({ message, sender }) =>
`<li><span class="font-semibold text-gray-900">${sender}: </span>${message}</li>`
.reverse()
.join("");
res.set("Content-Type", "text/html");
res.send(`
<!doctype html>
<html>
lucia_middleware_vanilla
@stevekrouse
Lucia Middleware Import users. Backed by Val Town SQLite. Demo: @stevekrouse/lucia_middleware_demo Initially built by @pomdtr.
HTTP (deprecated)
# Lucia Middleware
Import users. Backed by Val Town SQLite.
Demo: @stevekrouse/lucia_middleware_demo
Initially built by @pomdtr.
// This approach uses the Lucia authentication library with a custom ValTownAdapter.
// It provides signup, login, and logout functionality with session management.
// The main tradeoff is the complexity of setting up Lucia, but it offers robust auth features.
/** @jsxImportSource https://esm.sh/react */
const userTable = "user";
const sessionTable = "session";