Search

townGen

@cofsana

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.

valle_tmp_4507707191590409272114395062097

@janpaul123

// Initialize SQLite database and comments table if it doesn't exist

HTTP (deprecated)

// Initialize SQLite database and comments table if it doesn't exist

const initDB = async () => {

await sqlite.execute(`

CREATE TABLE IF NOT EXISTS comments (

id INTEGER PRIMARY KEY AUTOINCREMENT,

text TEXT NOT NULL,

timestamp DATETIME DEFAULT CURRENT_TIMESTAMP

await initDB();

const app = new Hono();

// Serves the comment page

HtmlFormatter

@chet

An interactive, runnable TypeScript val by chet

HTTP (deprecated)

const title = "HTML Formatter";

const html = (url: string) => `

<!DOCTYPE html>

<head>

<title>${title}</title>

<style>

body {

openapi_playground

@stainless_em

openapi playground temporarily host swagger and prism for your openapi spec

HTTP

# openapi playground

temporarily host swagger and prism for your openapi spec

/** @jsx jsx */

/** @jsxFrag Fragment */

createContext,

type FC,

Fragment,

jsx,

type PropsWithChildren,

useContext,

blushHarrier

@stevekrouse

@jsxImportSource https://esm.sh/hono@latest/jsx

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/hono@latest/jsx **/

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

const app = new Hono();

app.get("/", (c) =>

c.html(

<html>

{renderHead()}

{renderBody()}

</html>

export default app;

grayMinnow

@justinenerio

@jsxImportSource npm:react

HTTP (deprecated)

/** @jsxImportSource npm:react **/

export default (req: Request) => {

return new Response(

renderToString(

<html>

<main>

<h1>Hello justinenerio!</h1>

<p>This is your first val. Edit this text!</p>

</main>

testScriptTag

@nbbaier

@jsxImportSource https://esm.sh/preact

Script

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

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

export function testScriptTag() {

return preact(

<script

type="module"

src="https://esm.town/v/nbbaier/loadWC"

{/* import { loadWC } from "https://esm.town/v/nbbaier/loadWC"; */}

<x-greeting></x-greeting>

scrapeFargoGolf

@radarthreat

An interactive, runnable TypeScript val by radarthreat

Script

const FARGO_GOLF_URL = "https://foreupsoftware.com/index.php/booking/a/19956/18#/teetimes";

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();

tomatoSpider

@tfayyaz

Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */ import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; import { useState } from "https://esm.sh/react@18.2.0"; export function App() { const [ count, setCount ] = useState(0) return ( <div> <h1>Example App</h1> </div> ) } export default () => react_http({ component: App, sourceURL: import.meta.url, head: `<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Example App</title>` }) Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.

Script

# Client Side React Helper

## Example Usage

```tsx

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

export function App() {

const [ count, setCount ] = useState(0)

export default function({ component, sourceURL, head }: { component: Function; sourceURL: string; head?: string }) {

return new Response(

`<html>

blobCommentsReact

@keenanzucker

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

function App() {

const [data, setData] = useState();

useEffect(() => {

async function fetchSchedule() {

await fetch("/schedule")

.then(response => {

return response.json();

.then(data => {

console.log("DATA: ", data);

valle_tmp_168173191488171673357222933830397

@janpaul123

// This is a minimal formatter for JavaScript code using the Prettier library.

HTTP (deprecated)

// This is a minimal formatter for JavaScript code using the Prettier library.

// The formatter will receive JavaScript code through a POST request and return the formatted code.

import { Hono } from "npm:hono";

import prettier from "npm:prettier";

const app = new Hono();

app.post("/", async (c) => {

const jsCode = await c.req.text(); // Get the JS code from the request body

const formattedCode = prettier.format(jsCode, { parser: "babel" }); // Format the JS code using Prettier

return c.text(formattedCode); // Return the formatted code as text

export default app.fetch;

Chatprincipal

@arthrod

@jsxImportSource https://esm.sh/react

HTTP

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

const GlobalStyle = createGlobalStyle`

body {

margin: 0;

padding: 0;

font-family: 'Roboto', sans-serif;

background-color: #FFFFFF;

color: #1D1D1D;

line-height: 1.6;

overflow-x: hidden;

effector

@effector

An interactive, runnable TypeScript val by effector

Script

export async function effector() {

const effector = await import("https://esm.sh/effector@22.8.6");

return effector;

acornExample

@tmcw

acorn Acorn is a JavaScript parser written in JavaScript! It's one of the most established, and best, options - written by the same main contributor as CodeMirror and ProseMirror. At Val Town, we use Acorn internally, as well as CodeMirror for the code editor. With Acorn, you can parse JavaScript, modify it, and generate strings from that parsed JavaScript. It's a lot more robust and productive than processing source code as strings.

Script

# acorn

[Acorn](https://github.com/acornjs/acorn/) is a JavaScript parser written in JavaScript! It's one of the most established, an

With Acorn, you can parse JavaScript, modify it, and generate strings from that parsed JavaScript. It's a lot more robust and

export let acornExample = (async () => {

const acorn = await import("npm:acorn");

return acorn.parse("1 + 1");

valshot

@burningion

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme

HTTP (deprecated)

# Val Shot

[![](https://vladimyr-licensebadge.web.val.run/v/vladimyr/valshot)](https://spdx.org/licenses/0BSD.html)

Generate val source code screenshot using [sourcecodeshots.com](https://sourcecodeshots.com)

⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs

📣 Special thanks to @pomdtr for their help and contributions!

## Usage

// SPDX-License-Identifier: 0BSD

const router = new Hono();

// router.get("/", toHonoHandler(serveReadme(import.meta.url)));

router.get("/", async (c) => {

…

20 21

23 24

…

364