Search
modifyIframeResponse
@nbbaier
Prevents your http vals from being viewed inside iframes. If it's a valtown iframe, a helpful message is displayed. Usage: import modifyIframeResponse from "https://esm.town/v/nbbaier/modifyIframeResponse";
export default modifyIframeResponse(async (req: Rquest): Promise<Response> => {
return Response.json({ ok: true })
});
Script
Prevents your http vals from being viewed inside iframes. If it's a valtown iframe, a helpful message is displayed. Usage:
```ts
vimarkdown
@mk1123
vimarkdown Try it now A VIM-mode markdown editor built with Val Town . Features Write markdown in the browser with VIM keybindings Minimal, focused UI Saves to localStorage Multiple color modes Markdown -> HTML preview (⌘+P) NOT mobile-friendly Fork this editor on Val Town to make it your own Inspired by iA Writer
Made by Jxnblk TODO [ ] Add syntax highlighting to frontmatter block [ ] Support multiple fonts
HTTP
/** @jsxImportSource https://esm.sh/react */
import { ViewUpdate } from "https://esm.sh/@codemirror/view";
import graymatter from "https://esm.sh/gray-matter";
import { useEffect, useMemo, useState } from "https://esm.sh/react";
import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts";
// preview
import ReactMarkdown from "https://esm.sh/react-markdown@9";
import rehypeSanitize from "https://esm.sh/rehype-sanitize@6";
// vals
import { render } from "https://esm.town/v/jxnblk/ReactStream";
import { EditorView, Prec, useCodemirror } from "https://esm.town/v/jxnblk/useCodemirrorVimMD";
console.log("vim-mode-change", e);
const handleKeyDown = (e: React.KeyboardEvent) => {
// check for insert mode?
</pre>
<ReactMarkdown
children={content}
honoReactExportModeScript
@tfayyaz
@jsxImportSource https://esm.sh/react
Script
/** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
function MyButton() {
const [count, setCount] = useState(0);
bonsaiReducer
@beneskildsen
An interactive, runnable TypeScript val by beneskildsen
Script
// don't even use doSnip on here since it's too slow
const { pos, clientID, grammar } = action;
if (clientID != 1 && state.snips[clientID]) {
return state;
state.snips[clientID] = true;
return { ...state, grammar };
createRelevantComment
@thomasatflexos
An interactive, runnable TypeScript val by thomasatflexos
Script
.json({
message: "The content and url parameter is required for this end point",
const { createClient } = await import(
"https://esm.sh/@supabase/supabase-js@2"
const supabase = createClient(
process.env.supabaseURL,
process.env.supabaseKey,
vimarkdown
@jxnblk
vimarkdown Try it now A VIM-mode markdown editor built with Val Town . Features Write markdown in the browser with VIM keybindings Minimal, focused UI Saves to localStorage Multiple color modes Markdown -> HTML preview (⌘+P) NOT mobile-friendly Fork this editor on Val Town to make it your own Inspired by iA Writer
Made by Jxnblk TODO [ ] Add syntax highlighting to frontmatter block [ ] Support multiple fonts
HTTP
/** @jsxImportSource https://esm.sh/react */
import { ViewUpdate } from "https://esm.sh/@codemirror/view";
import graymatter from "https://esm.sh/gray-matter";
import { useEffect, useMemo, useState } from "https://esm.sh/react";
import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts";
// preview
import ReactMarkdown from "https://esm.sh/react-markdown@9";
import rehypeSanitize from "https://esm.sh/rehype-sanitize@6";
// vals
import { render } from "https://esm.town/v/jxnblk/ReactStream";
import { EditorView, Prec, useCodemirror } from "https://esm.town/v/jxnblk/useCodemirrorVimMD";
console.log("vim-mode-change", e);
const handleKeyDown = (e: React.KeyboardEvent) => {
// check for insert mode?
</pre>
<ReactMarkdown
children={content}
sqliteStyle
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
background: var(--bg);
.sidebar-layout {
display: flex;
width: 100%;
.sidebar {
width: fit-content;
.not-sidebar {
flex: 1;
overflow: auto;
.not-sidebar > div:first-child,
.not-sidebar > form:first-child {
padding-top: 0.5rem;
min-height: 12rem;
.not-sidebar > form {
margin: 0;
font-family: var(--mono-font);
padding: 4px var(--gap) var(--gap) var(--gap); /* No padding on top, and padding on other sides */
white-space: wrap;
valTownSearch
@pomdtr
Val Town Search Search for vals using the Github API. Either use the provided UI, or the query param: https://val-town-search.pomdtr.me/search?q=fetchJSON How does it work ? I've wrote about it! Todos [x] Embed the results in the UI [x] Refresh the vals on a cron using a github action [ ] Improve layout on small screens [ ] Support json Accept header [ ] Add pagination params [ ] Allow to filter by authors
HTTP (deprecated)
/** @jsxImportSource npm:preact **/
import codeOnValTown from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import { render } from "npm:preact-render-to-string";
const githubQuery = (query: string) => encodeURIComponent(`${query} repo:pomdtr/val-town-mirror path:vals/`);
async function handler(req: Request) {
ChatGPTTextDefinitionUserscript
@xsec
// @name Improved ChatGPT Text Definition
Script
const contentElement = document.querySelector(".p-body-inner");
if (!contentElement) return { width: window.innerWidth, height: window.innerHeight };
const contentRect = contentElement.getBoundingClientRect();
const availableWidth = window.innerWidth - contentRect.right;
const availableHeight = window.innerHeight;
purpleOctopus
@stevekrouse
Date Me Directory This is the source code for the Date Me Directory. Contributions welcome! Architecture This version of the site still uses Notion to store the data and NoteForms for the form to get your submission into Notion. I intend to cut Notion out of the equation shortly by building our own HTML form that writes data directly to my sqlite database. This val is the router for the application @stevekrouse/getDocs pulls the date me docs from my sqlite database. @stevekrouse/dateme_notion_sync syncs my data from Notion to my sqlite database every 10 minutes Todos [ ] Make a form to send data directly to sqlite (in progress: @stevekrouse/date_me_form) [ ] Require an email (that isn't shared publicly) [ ] Filters: Gender, Interested In, Style, Location, etc [ ] Table: hide location, location flexibility, community, contact, last updated in more details [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
import browse from "https://esm.town/v/stevekrouse/dateme_browse";
val_town_client
@stevekrouse
* Create a Valtown API client
* @param options - Valtown API client options
* @param options.baseUrl - API base URL
* @param options.token - API token (if null, no token will be used, if undefined, the token from the environment variable "valtown" will be used)
Script
import { paths } from "https://esm.town/v/pomdtr/openapi_schema";
import createClient2 from "npm:openapi-fetch";
* Create a Valtown API client
* @param options - Valtown API client options
* @param options.baseUrl - API base URL
* @param options.token - API token (if null, no token will be used, if undefined, the token from the environment variable "valtown" will be used)
export default function createClient(options: {
baseUrl?: string;
token?: string | null | undefined;
return createClient2<paths>({
baseUrl: options?.baseUrl ?? "https://api.val.town",
ilyBday
@emilycoe
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
export default async function(req: Request) {
return new Response(
bookmark
@ramkarthik
A minimal bookmarking tool This allows you to bookmark links and view them later. Completely powered by ValTown and SQLite. To set this up for yourself Fork the val From your ValTown settings page, add an environment variable named bookmarks_client_id and give it a value (you will be using this for saving) Add another environment variable named bookmarks_client_secret and give it a value (you will also be using this for saving) At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table To do this, add a bookmarklet to your browser with this value (replace BOOKMARKS-CLIENT-ID and BOOKMARKS-CLIENT-SECRET with the values you added to the environment variables, and replace BOOKMARKS-URL with your VAL's URL): javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450')) Click this bookmarklet to bookmark the URL of the current active tab Go to your VAL URL homepage to see the bookmark Demo Here are my bookmarks:
https://ramkarthik-bookmark.web.val.run/ Note Make sure you don't share bookmarks_client_id and bookmarks_client_secret . It is used for authentication before saving a bookmark.
HTTP (deprecated)
1. Fork the val
2. From your ValTown settings page, add an environment variable named `bookmarks_client_id` and give it a value (you will be using this for saving)
3. Add another environment variable named `bookmarks_client_secret` and give it a value (you will also be using this for saving)
4. At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table
5. To do this, add a bookmarklet to your browser with this value (replace `BOOKMARKS-CLIENT-ID` and `BOOKMARKS-CLIENT-SECRET` with the values you added to the environment variables, and replace `BOOKMARKS-URL` with your VAL's URL):
javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450'))
6. Click this bookmarklet to bookmark the URL of the current active tab
### Note
Make sure you don't share `bookmarks_client_id` and `bookmarks_client_secret`. It is used for authentication before saving a bookmark.
return c.text("Authentication details (ID/Secret) missing!");
if (id != Deno.env.get("bookmarks_client_id") || secret != Deno.env.get("bookmarks_client_secret")) {
return c.text("Unauthorized!");
VALLEDRAW
@t4t8dd_val_town
VALL-E-DRAW LLM code generation for vals, on a canvas! Make apps with a frontend, backend, and database. First you need a working version of VALL-E. Follow the steps here . Fork this val, and update the iframeSrc to point to your working version of VALL-E. Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!
HTTP
import valledrawclient from "https://esm.town/v/janpaul123/valledrawclient";
export default valledrawclient({
iframeSrc: "https://janpaul123-valle.web.val.run",
cohostSanitize
@easrng
// list pulled from dompurify
Script
attributes: {
"*": ["style"],
tagNames: ["video", "audio", "aside"], // consistency with current rules,
additionalVisitor(hast) {
visit(hast, "element", (node, index, parent) => {
attributes: {
"*": ["style"],
tagNames: ["video", "audio", "aside"], // consistency with current rules,
additionalVisitor(hast) {
// run the previous age's visitor first