Search
styleSystem
@tmcw
@jsxImportSource npm:hono/jsx
Script
/** @jsxImportSource npm:hono/jsx */
import { ofStyle } from "https://esm.town/v/tmcw/ofStyle";
import { Context } from "npm:hono@3.8.1";
export function styleSystem() {
function StyleTag() {
return (
<style
dangerouslySetInnerHTML={{ __html: ofStyle }}
const styleRoute = (c: Context) => {
return c.body(null);
return { styleRoute, StyleTag };
valle_tmp_563310902711919480463986409263
@janpaul123
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });
const username = "janpaul123";
const app = new Hono();
const jsxResponse = (jsx) => {
return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });
const systemprompt = `The conversation below is your recent interaction with the user. Your entire response should only be TypeScript. Your response should start with \`\`\`ts and end with \`\`\`. Make an HTTP val (other vals are currently not supported to run, even though we have examples for them). Start your response with a comment explaining how your approach will work, what libraries or API calls you will use, and any tradeoffs you're making. Then write the code in a consise way, the simplest way to achieve the goal, though you can add some inline comments to explain your reasoning (not for every line, but for major groups of lines). Don't use any environment variables unless strictly necessary, for example use APIs that don't require a key, prefer internal function imports (using esm.town), and prefer putting API keys as inline variables. Use built-in Deno functions where possible. Unless specified, don't add error handling, make sure that errors bubble up to the caller. There should be no comments like "more content here", it should be complete and directly runnable. The val should create a "export default async function main" which is the main function that gets executed on every HTTP request. `.replace("\n", " ");
// Your response should start with \`\`\`ts and end with \`\`\`. The val should create a "export default async function main() {" which is the main function that gets executed, without any arguments. Don't return a Response object, just return a plain Javascript object, array, or string.
const systemprompt2 = `Since your last response the user might have changed the code. The current version of the code is below. Keep your response as close to their current code as possible, only changing things that are strictly necessary to change.`.replace("\n", "");
const makeBubbleHeader = (emoji: string, id?: string, spin?: boolean) => {
testCodemirrorTsBrowserEmacs
@saolsen
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
export default async function(req: Request): Promise<Response> {
return new Response(
renderToString(
<script type="module" src="https://esm.town/v/saolsen/codemirrorTsBrowserEmacs" />
<form>
<textarea id="editorSource" className="for-codemirror" name="editorSource">
{`let hasAnError: string = 10;
function increment(num: number) {
return num + 1;
starlightFaker
@kylem
Generate fake doc pages for testing in Starlight with its built in components and hacker jargon from Faker . If you are looking to add the required title frontmatter for a batch of files you can use this python script to interpret the title from the filename.
HTTP
Generate fake doc pages for testing in [Starlight](https://starlight.astro.build/) with its built in [components](https://starlight.astro.build/guides/components/) and [hacker jargon](https://fakerjs.dev/api/hacker) from [Faker](https://fakerjs.dev/).
If you are looking to add the required `title` frontmatter for a batch of files you can use [this python script](https://gist.github.com/kmalloy24/6a4e20d30a773a7fc13ebdd4331cc73d) to interpret the `title` from the filename.
/** @jsxImportSource https://esm.sh/react */
function App() {
const [markdown, setMarkdown] = useState("");
const generateLoremIpsum = () => {
const validIconNames = [
'up-caret', 'down-caret', 'right-caret', 'right-arrow', 'left-arrow', 'bars', 'translate', 'pencil', 'pen', 'document',
'add-document', 'setting', 'external', 'moon', 'sun', 'laptop', 'open-book', 'information', 'magnifier', 'forward-slash',
'close', 'error', 'warning', 'approve-check-circle', 'approve-check', 'rocket', 'star', 'puzzle', 'list-format', 'random',
getSampleDocuments
@webup
An interactive, runnable TypeScript val by webup
Script
export async function getSampleDocuments() {
const { Document } = await import("npm:langchain/document");
const docs = [
new Document({
metadata: { foo: "bar" },
pageContent: "pinecone is a vector db",
new Document({
metadata: { foo: "bar" },
pageContent: "the quick brown fox jumped over the lazy dog",
new Document({
d3
@ingenieroariel
//tried to export let d3 for myself, but I get errors about d3.val when I tried to use it from
Script
//tried to export let d3 for myself, but I get errors about d3.val when I tried to use it from
export const d3 = (() => {
const _ = import("npm:d3");
return _;
dynamicImportTypeExample
@neverstew
An interactive, runnable TypeScript val by neverstew
Script
export let dynamicImportTypeExample = async (col: import("npm:xlsx").ColInfo) => {
col.width; // typed
internalStreamThesephistComRSS
@coofdy
An interactive, runnable TypeScript val by coofdy
Script
export const internalStreamThesephistComRSS = (async () => {
const { DOMParser } = await import(
"https://deno.land/x/deno_dom/deno-dom-wasm.ts"
const { default: he } = await import("npm:he");
async function getRss() {
return fetch("https://stream.thesephist.com/?n=25")
.then(function (response) {
return response.text();
.then(function (html) {
var parser = new DOMParser();
cuetip
@pinjasaur
cuetip Generate custom builds for my CSS-only tooltip library, cuetip . Read more . Try it out: https://pinjasaur.github.io/cuetip/customize
HTTP (deprecated)
# cuetip
Generate custom builds for my CSS-only tooltip library, [cuetip](https://github.com/Pinjasaur/cuetip). [Read more](https://paul.af/val-town).
Try it out: <https://pinjasaur.github.io/cuetip/customize>
// import autoprefixer from "https://esm.sh/autoprefixer";
// import postcss from "https://esm.sh/postcss";
const cors = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
const getJSON = async url => (await fetch(url)).json();
const getText = async url => (await fetch(url)).text();
greenSilkworm
@atlted
@jsxImportSource npm:react
HTTP (deprecated)
/** @jsxImportSource npm:react **/
export default (req: Request) => {
return new Response(
renderToString(
<html>
<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1" />
<main>
<h1>Hello atlted!</h1>
<p>This is your first val. Edit this text!</p>
</main>
web
@rauchg
@jsxImportSource npm:react
HTTP (deprecated)
/** @jsxImportSource npm:react **/
export default (req: Request) => {
return new Response(
renderToString(
<html>
<head>
<title>Guillermo Rauch's val</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000" />
<style>
webScrapeDiamondLeague
@djfeld01
An interactive, runnable TypeScript val by djfeld01
Script
const DIAMOND_LEAGUE_EVENT_URL = "https://shanghai.diamondleague.com/programme-results/programme-results-shanghai/";
function normalizeURL(url: string) {
return url.startsWith("http://") || url.startsWith("https://")
? url
: "http://" + url;
async function fetchText(url: string, options?: any) {
const response = await fetch(normalizeURL(url), {
redirect: "follow",
...(options || {}),
return response.text();
townGen
@all
townGen [[https://www.val.town/v/all/promptGen]] [[https://www.val.town/v/stevekrouse/valwriter]] Note : It looks like openai enhancement was dropped at some point when adding all the gizmos;
HTTP
# townGen
- [[https://www.val.town/v/all/promptGen]]
- [[https://www.val.town/v/stevekrouse/valwriter]]
- _Note_: It looks like openai enhancement was dropped at some point when adding all the gizmos;
* This val creates a website called TownGen that generates optimized prompts for Hono and Deno based on user input.
* It uses a simulated API for Hono and Deno features and incorporates a loading animation.
* The prompt is tested and debugged using a simulated API before presenting to the user.
* It includes a pill box multi-select for enhanced features from npm packages, organized into categories.
* A large submit button and a 10-second animation are added when generating the prompt.
* Categories have been updated to focus on specific areas as requested.
preactExample
@maxm
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
export const preactExample = () =>
new Response(render(<div>Test {1 + 1}</div>), {
headers: {
"Content-Type": "text/html",
ssr_react_mini
@stevekrouse
Server-side Render React Mini Framework This is very experimental, more of a prototype of an architecture, than a true framework Example: https://www.val.town/v/stevekrouse/TodoApp
Script
# Server-side Render React Mini Framework
This is very experimental, more of a prototype of an architecture, than a true framework
Example: https://www.val.town/v/stevekrouse/TodoApp
/** @jsxImportSource https://esm.sh/react */
// button that's disabled until client react hydrates
export const Button = (props) => {
const [clientHydrated, setClientHydrated] = useState(false);
useEffect(() => setClientHydrated(true), []);
return <button disabled={!clientHydrated} {...props}></button>;
export const Form = ({ onSubmit, ...props }: any) => {