Search

const websites = [

{ name: 'React-Client', url: 'https://iamseeley-reactserver.web.val.run/' },

{ name: 'React-Client-CDN', url: 'https://iamseeley-clientmultiroutereact.web.val.run/' },

{ name: 'Vue', url: 'https://iamseeley-multiroutevue.web.val.run/' },

{ name: 'Svelte', url: 'https://iamseeley-multiroutesvelte.web.val.run/' },

{ name: 'Preact', url: 'https://iamseeley-multiroutepreact.web.val.run/' },

{ name: 'React', url: 'https://iamseeley-multiroutereact.web.val.run/' },

{ name: 'Hono', url: 'https://iamseeley-multiroutehono.web.val.run/' },

2. HTMX is used for handling AJAX requests without writing JavaScript.

3. Alpine.js provides reactivity for the clipboard functionality.

4. The Turndown library is used to convert HTML to Markdown.

* This val creates a simple web interface using Hono framework to convert HTML to Markdown.

* It uses HTMX for dynamic updates and Alpine.js for reactivity.

* The Turndown library is used for HTML to Markdown conversion.

* The interface includes two text areas (input and output) and buttons for conversion and copying.

import { render } from "https://deno.land/x/resvg_wasm/mod.ts"

import satori from "npm:satori"

import { renderToString } from "npm:react-dom/server";

const itemStyle = {

padding: "10px",

export default function About() {

const linkClass = "text-sky-600 hover:text-sky-500";

The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default `sketch` export) so you can't call any Deno functions, environment variables, or other server side apis.

state: z.string(),

country: z.string(),

const client = new OpenAI({ apiKey: Deno.env.get("OPENAI_API_KEY") });

async function main() {

const stream = client.beta.chat.completions.stream({

model: "gpt-4o-mini",

messages: [{

window.addEventListener('resize', onWindowResize);

function onMouseMove(event) {

currentPoint.set(event.clientX, window.innerHeight - event.clientY);

if (isPressed) {

dragVector.subVectors(currentPoint, clickPoint);

function onMouseDown(event) {

isPressed = true;

clickPoint.set(event.clientX, window.innerHeight - event.clientY);

currentPoint.copy(clickPoint);

dragVector.set(0, 0);

} from "npm:@fortawesome/free-brands-svg-icons";

import { FontAwesomeIcon } from "npm:@fortawesome/react-fontawesome";

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

import { sqlite } from "https://esm.town/v/std/sqlite?v=6";

import { html } from "https://esm.town/v/stevekrouse/html";

import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";

import { renderToString } from "npm:react-dom/server";

function StatusRow({ rows }) {

import { httpClient } from "https://esm.town/v/pomdtr/http_client";

export default httpClient((req) => {

return new Response("Hello World!");

bookmarks: [

export const authenticateReddit = async (

CLIENT_ID,

CLIENT_SECRET,

ACCESS_CODE,

Buffer.from(

`${CLIENT_ID}:${CLIENT_SECRET}`,

).toString("base64")

Manage your vals from a webdav client (ex: https://cyberduck.io/)


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

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!");

type: "http",

prompt: "Generate a val that uses React to render HTML",

code: `/** @jsxImportSource https://esm.sh/react */

import { renderToString } from "npm:react-dom/server";

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

prompt: null,

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export const preactExample = (request: Request) =>

new Response(render(<div>Test {1 + 1}</div>), {

type: "http",

code: `/** @jsxImportSource https://esm.sh/preact */

import { render } from "npm:preact-render-to-string";

export default async function(req: Request) {