Search

svg_card

@jxnblk

@jsxImportSource https://esm.sh/preact

1 1

Script

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

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

const HEXRE = /^[A-Fa-f0-9]{3,6}$/;

const toHex = (str) => HEXRE.test(str) ? "#" + str : str;

someDom

@stevekrouse

@jsxImportSource https://esm.sh/preact

Script

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

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

const x = 1;

export const someDom = render(<div>Test {x}</div>);

rssProxy

@lchtao26

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

import { fetch } from "https://esm.town/v/std/fetch";

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

const getFeedUrl = (request: Request) => {

const search = new URL(request.url).searchParams;

sparklineSVGReact

@stevekrouse

@jsxImportSource https://esm.sh/react

Script

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

export function SparklineSVG({ strokeWidth, data, height, width, fill, stroke }) {

const padding = 2;

minhtml

@yieldray

An interactive, runnable TypeScript val by yieldray

HTTP (deprecated)

minify_css_level_3: boolean;

* Minify JavaScript in <script> tags using minify-js.

* Only <script> tags with a valid or no MIME type is considered to contain JavaScript, as per the specification.

minify_js: boolean;

* Remove all bangs.

VALLEDRAW

@oijoijcoiejoijce

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",

vimarkdown

@m3e

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

import { render } from "https://esm.town/v/jxnblk/resrvStreaming";

// preview

import ReactMarkdown from "https://esm.sh/react-markdown@9";

import rehypeSanitize from "https://esm.sh/rehype-sanitize@6";

console.log("vim-mode-change", e);

const handleKeyDown = (e: React.KeyboardEvent) => {

// check for insert mode?

</pre>

<ReactMarkdown

children={content}

staticChessV2

@maxm

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { Chess, Move, Square } from "npm:chess.js";

import minify from "npm:css-simple-minifier";

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

class StaticChess {

size = 8;

valtownByExample

@pomdtr

Val town by example Usage Simple Example To add an example, just create a val. The val should start with a JSDoc style multi line comment that describes the example: /** * @title HTTP server: Hello World * @description An example of a HTTP server that serves a "Hello World" message. */ // this comment will be displayed on the left export const server = () => new Response("Hello world!") The title is required. Then, you can write the code. Code can be prefixed with a comment that describes the code. The comment will be rendered next to the code in the example page. Make sure your val is public, then go to https://pomdtr-val_town_by_example.web.val.run/v/<your-username>/<your-val> Using multiple vals You can add another val to your example by adding an @include directive /** * @title HTTP server: Hello World * @description An example of a HTTP server that serves a "Hello World" message. * @include pomdtr/secondary_val */ See @pomdtr/react_example Adding external resources to your example You can attach an external link to your val by using the @resource directive. External resources are specified using a markdown link. /** * @title HTTP server: Hello World * @description An example of a HTTP server that serves a "Hello World" message. * @resource [Val Town Docs](https://docs.val.town) **/ Adding examples to the homepage Just add your val in @pomdtr/val_town_by_example_toc

HTTP (deprecated)

* @include pomdtr/secondary_val

See @pomdtr/react_example

### Adding external resources to your example

isthegtrainfucked

@pbt

@jsxImportSource https://esm.sh/preact

1 1

HTTP (deprecated)

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

import { activeGTrainAlerts } from "https://esm.town/v/pbt/gtrainalerts?v=36";

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

import Uwuifier from "npm:uwuifier";

</main>

<p>

</p>

</aside>

testVTClient2

@stevekrouse

// Forked from @stevekrouse.testsVTClient

Script

export const testVTClient2 = (async () => {

const { createApiClient } = await import(

"https://esm.sh/gh/nbbaier/valtown-zodios/src/spec/valtown-client.ts"

const apiClient = createApiClient("https://api.val.town");

const params = {

params: { username: "nbbaier", val_name: "hello" },

const user = await apiClient.getValname(params);

return user;

// Forked from @stevekrouse.testsVTClient

// Forked from @nbbaier.testVTClient

renderHTMLWithHono

@tristanmagne

// This val uses Hono, a lightweight web framework, to create a simple HTML page.

HTTP

// This val uses Hono, a lightweight web framework, to create a simple HTML page.

// It demonstrates how to use Hono's HTML templating and routing capabilities.

// Side note: This code is generated using Townie AI.

import { Hono } from "https://esm.sh/hono";

import { html } from "https://esm.sh/hono/html";

favFarm

@stevekrouse

Clone of fav.farm by @wesbos A little favicon service

HTTP (deprecated)

<h1>I bet you need a quick favicon</h1>

<p>

This startup returns an emoji inside an SVG<br />so you can pop that sucker into a favicon.

</p>

<p>

markdocReactExample

@pomdtr

Markdoc Playground This readme is rendered using markdoc . {% val author="pomdtr" name="markdocReactExample" %}

HTTP (deprecated)

# [Markdoc Playground](https://pomdtr-markdocReactExample.web.val.run)

This readme is rendered using [markdoc](https://markdoc.dev/).

{% val author="pomdtr" name="markdocReactExample" %}

/** @jsxImportSource npm:react */

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

import Markdoc from "npm:@markdoc/markdoc";

import React from "npm:react";

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

const tags = {

return <iframe width="600" height="300" frameBorder="0" src={`https://www.val.town/embed/${author}/${name}`} />;

export async function markdocReactExample(req: Request) {

// extract the current val readme

const content = Markdoc.transform(ast, { tags }); // register the val tag

const rendered = Markdoc.renderers.react(content, React, {

components: {

private_model

@turbo1912

@jsxImportSource https://esm.sh/react

Cron

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

import fal from "npm:@fal-ai/serverless-client";

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

export default async function(interval: Interval) {

…

41 42

44 45

…

184