Search

Results include substring matches and semantically similar vals. Learn more
tmcw avatar
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 Java
- It supports a non-standard variation of Markdown, so you can't easily switch to another parser once you've encouraged peopl
- 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/rema
export let markedExample = (async () => {
const marked = await import("npm:marked");
return marked.parse("**Bold text!**");
tmcw avatar
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/
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>
alongwill avatar
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/stev
![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.
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
janpaul123 avatar
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">
vladimyr avatar
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}`);
adamwolf avatar
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/stev
![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.
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
hello_mikkie avatar
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",
konradmoneta avatar
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 || "");
burcs avatar
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/stev
![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.
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
sharanbabu avatar
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("");
chiche1412 avatar
example
@chiche1412
An interactive, runnable TypeScript val by chiche1412
Cron
export const example = () => {
return 1 + 1;
stevekrouse avatar
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;
richardkaplan avatar
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") {
ankitkr0 avatar
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();
vtdocs avatar
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") {