Search
markedExample
@tmcw
marked marked is a classic Markdown parser in JavaScript. I really don't like it! I don't recommend it! The people who made it and worked on it are great, but I think you really shouldn't use it. It supports a non-standard variation of Markdown, so you can't easily switch to another parser once you've encouraged people to write "in the marked style" It allows but doesn't sanitize HTML, which promotes a lot of XSS attacks It doesn't use an intermediate AST like remark or support plugins. Really it's a much better idea to use micromark or remark .
Script
# marked
[marked](https://www.npmjs.com/package/marked) is a classic [Markdown](https://en.wikipedia.org/wiki/Markdown) parser in JavaScript. I really don't like it! I don't recommend it! The people who made it and worked on it are great, but I think you really shouldn't use it.
- It supports a non-standard variation of Markdown, so you can't easily switch to another parser once you've encouraged people to write "in the marked style"
- It allows but doesn't sanitize HTML, which promotes a lot of XSS attacks
- It doesn't use an intermediate AST like remark or support plugins.
Really it's a much better idea to use [micromark](https://github.com/micromark/micromark) or [remark](https://github.com/remarkjs/remark).
export let markedExample = (async () => {
const marked = await import("npm:marked");
return marked.parse("**Bold text!**");
todo_list
@tmcw
TODO List Every web project needs a todo list, right? This is val.town's first (maybe?) With a healthy dose of htmx and web fundamentals, we're packing the essentials of a TODO list with server persistence and animations into about 60 lines. The data is stored in the @tmcw.todos val, for now. Try it out.
Express
# [TODO List](https://tmcw-todo_list.express.val.run/)
Every web project needs a todo list, right? This is val.town's first (maybe?) With a healthy dose of [htmx](https://htmx.org/) and web fundamentals, we're packing the essentials of a TODO list with server persistence and animations into about 60 lines. The data is stored in the [@tmcw.todos](https://www.val.town/v/tmcw.todos) val, for now. Try it out.
let { todos } = await import("https://esm.town/v/tmcw/todos");
export let todo_list = (async (req, res) => {
const { default: htm } = await import("npm:htm");
const { default: vhtml } = await import("npm:vhtml");
const html = htm.bind(vhtml);
const renderTodo = (todo) => {
return html`<li data-id=${todo.id}>
<label>
sqliteExplorerApp
@alongwill
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.
![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
## Install
Install the latest stable version (v86) by forking this val:
[![Install Stable Release (v86)](https://stevekrouse-button.express.val.run/Install%20Stable%20Release%20(v81))](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
valle_tmp_3735050494903109427870190455998034
@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">
bookmarklets
@vladimyr
Bookmarklet Manager Write your bookmarklets in val.town. Usage You val should export an anonymous function, containing the code that will run when the bookmarklet is triggered. export default () => {
alert("Hi mom!");
} Make sure that your val is either unlisted or public, then navigate to https://pomdtr-bookmarklets.web.val.run/v/:author/:name to generate the bookmarklet link. Sharing a bookmarklet Make sure that your val is public, and add a #bookmarklet tag anywhere in the code. export default () => {
alert("Hi mom!");
}
// #bookmarklet It should automatically appears on https://pomdtr-bookmarklets.web.val.run . ⚠️
If you are using the Arc Browser , you can use the Powerlet extension to install bookmarklets.
HTTP (deprecated)
# Bookmarklet Manager
Write your bookmarklets in val.town.
## Usage
You val should export an anonymous function, containing the code that will run when the bookmarklet is triggered.
```typescript
export default () => {
/** @jsxImportSource https://esm.sh/hono@3.9.2/jsx **/
const app = new Hono();
async function bookmarkletUrl(author: string, name: string) {
const { code } = await api(`/v1/alias/${author}/${name}`);
sqliteExplorerApp
@adamwolf
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.
![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
## Install
Install the latest stable version (v86) by forking this val:
[![Install Stable Release (v86)](https://stevekrouse-button.express.val.run/Install%20Stable%20Release%20(v81))](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
est
@hello_mikkie
An interactive, runnable TypeScript val by hello_mikkie
HTTP (deprecated)
export const htmlExample = () =>
new Response("<h1>Hello, world</h1>", {
headers: {
"Content-Type": "text/html",
carInventory
@konradmoneta
@jsxImportSource https://esm.sh/react
HTTP
/** @jsxImportSource https://esm.sh/react */
const APP_ID = "5518c0f9-481c-4aa8-85cd-eee42bd45319";
function CarWindow({ car, onSave, onClose, title }) {
const [make, setMake] = useState(car?.make || "");
const [model, setModel] = useState(car?.model || "");
const [year, setYear] = useState(car?.year || "");
const [imageUrl, setImageUrl] = useState(car?.imageUrl || "");
const [lastOilChange, setLastOilChange] = useState(car?.lastOilChange || "");
const [insuranceExpiry, setInsuranceExpiry] = useState(car?.insuranceExpiry || "");
const [inspectionExpiry, setInspectionExpiry] = useState(car?.inspectionExpiry || "");
sqliteExplorerApp
@burcs
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.
![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
## Install
Install the latest stable version (v86) by forking this val:
[![Install Stable Release (v86)](https://stevekrouse-button.express.val.run/Install%20Stable%20Release%20(v81))](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
textSummarizationComparisonTool
@sharanbabu
* This val creates a text summarization comparison tool using the Cerebras LLM API.
* It provides a text area with default text, a summarize button, and displays two different summarization results:
* 1. Direct summarization
* 2. Extractive summarization followed by cohesive rewriting
*
* The server handles API calls to Cerebras, while the client manages the UI and user interactions.
HTTP
* This val creates a text summarization comparison tool using the Cerebras LLM API.
* It provides a text area with default text, a summarize button, and displays two different summarization results:
* 1. Direct summarization
* 2. Extractive summarization followed by cohesive rewriting
* The server handles API calls to Cerebras, while the client manages the UI and user interactions.
/** @jsxImportSource https://esm.sh/react */
function App() {
const [inputText, setInputText] = useState("");
const [summary1, setSummary1] = useState("");
const [summary2, setSummary2] = useState("");
example
@chiche1412
An interactive, runnable TypeScript val by chiche1412
Cron
export const example = () => {
return 1 + 1;
classless_css
@stevekrouse
Utilities for Classless CSS Forked from Paul Kinlan's Classless CSS Demo Usage For projects that should be pretty in an unopinionated way import { randomStyle } from "https://esm.town/v/stevekrouse/classless_css";
export default async function(req: Request): Promise<Response> {
return new Response(`<h1>Welcome to Val Town!</h1>${randomStyle}`, {
headers: {
"Content-Type": "text/html",
},
});
}
HTTP (deprecated)
# Utilities for Classless CSS
Forked from [Paul Kinlan's Classless CSS Demo](https://classless-css-demo.deno.dev)
## Usage
For projects that should be pretty in an unopinionated way
```ts
export default async function(req: Request): Promise<Response> {
delete frameworks[""];
function absolutePath(url: string) {
if (url.startsWith("http")) return url;
else return `https://classless-css-demo.deno.dev` + url;
reactExample
@richardkaplan
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)
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>
<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>
/** @jsxImportSource https://esm.sh/react */
const genSVG = (request: Request): string => {
let pathname = new URL(request.url).pathname;
if (pathname === "/comet.svg") {
clickTrackerWebsite
@ankitkr0
// This approach creates a minimalist, full-screen website that tracks the total number of clicks made anywhere on the page.
HTTP
// This approach creates a minimalist, full-screen website that tracks the total number of clicks made anywhere on the page.
// We'll use SQLite for persistence to store the click count and add a confetti effect for each click.
/** @jsxImportSource https://esm.sh/react */
function App() {
const [clicks, setClicks] = useState(0);
useEffect(() => {
fetchClicks();
const fetchClicks = async () => {
const response = await fetch('/clicks');
const data = await response.json();
discordFetch
@vtdocs
An interactive, runnable TypeScript val by vtdocs
Script
export const discordFetch = async (token, route, method = "GET", body = undefined) => {
let res;
while (true) {
res = await fetchJSON(
`https://discord.com/api${route}`,
method,
headers: {
"Authorization": `Bot ${token}`,
body,
if (typeof res?.retry_after === "number") {