Search
html
@neverstew
@jsxImportSource npm:preact
Script
/** @jsxImportSource npm:preact */
import type { VNode } from "npm:preact";
import { render } from "npm:preact-render-to-string";
export const html = (html: VNode) =>
render(
<div id="root">
{html}
</div>,
npmRegistry
@vladimyr
An interactive, runnable TypeScript val by vladimyr
Script
const REGISTRY_URL = "https://registry.npmjs.org/";
const VersionSchema = object({
version: string(),
dist: object({
tarball: string([url()]),
deprecated: optional(string()),
const PkgInfoSchema = object({
name: string(),
"dist-tags": record(string()),
versions: record(VersionSchema),
emojiExploder
@jdan
@jsxImportSource npm:hono@3/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
app.get("/", async (c) => {
return c.html(
<div>
<h1>Emoji exploder</h1>
<div>Enter an emoji and see what it's composed of</div>
<form action="/emoji" method="get">
<input type="text" name="emoji" /> <input type="submit" />
</form>
tomatoSawfish
@tempguy
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
export default async function(req: Request) {
return new Response(
render(
<html>
<head>
<title>Title</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
valwriter_output
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP (deprecated)
const app = new Hono();
const WEATHER_API_KEY = Deno.env.get('WEATHER_API_KEY'); // Replace with your actual weather API key
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";
app.get("/", async (c) => {
const response = await fetch(
`${BASE_URL}?q=Brooklyn&units=metric&appid=${WEATHER_API_KEY}`
const weatherData = await response.json();
return c.json({
location: weatherData.name,
temperature: weatherData.main.temp,
tanHedgehog
@greatcode
An interactive, runnable TypeScript val by greatcode
HTTP (deprecated)
const app = new Hono();
type X = "asdf" | "qwer";
app.get("/api/page", (c) => {
const y: X = "zxcv";
return c.json({ message: "You are authorized" });
app.post('/gmail', async (c) => {
try {
const body = await c.req.json();
console.log(body)
} catch (e) {
denoImportEx
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
export let denoImportEx = (async () => {
const { DOMParser } = await import(
"https://deno.land/x/deno_dom@v0.1.38/deno-dom-wasm.ts"
const document = new DOMParser().parseFromString(
`<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello from Deno</title>
</head>
<body>
denoImportEx
@libo
An interactive, runnable TypeScript val by libo
Script
export let denoImportEx = (async () => {
const { DOMParser } = await import(
"https://deno.land/x/deno_dom/deno-dom-wasm.ts"
const url = "https://blog.samaltman.com/how-to-be-successful";
const res = await fetch(
"https://extractus.deno.dev/extract?apikey=rn0wbHos2e73W6ghQf705bdF&type=article&url=" +
url
const json = await res.json();
const doc = new DOMParser().parseFromString(json.data.content, "text/html")
.documentElement.textContent;
requiredOrangeRattlesnake
@tfayyaz
@jsxImportSource npm:hono/jsx
HTTP (deprecated)
/** @jsxImportSource npm:hono/jsx */
// Simulated database
let contact = {
id: 1,
firstName: "Joe",
lastName: "Blow",
email: "joe@blow.com"
const app = new Hono();
app.get('*', jsxRenderer(({ children }) => (
<html>
honoDatabricksU2MAuth
@tfayyaz
Modify manually generate access token to work with Val Town web app [ ] Rewrite Python script to generate a unique code verifier and code challenge pair to Nodejs (Typescript) [ ] Create button open auth URL in new tab [ ] Create a redirect URL to handle oauth
HTTP (deprecated)
- Modify [manually generate access token](https://learn.microsoft.com/en-us/azure/databricks/dev-tools/auth/oauth-u2m#--manually-generate-and-use-access-tokens-for-oauth-user-to-machine-u2m-authentication) to work with Val Town web app
- [ ] Rewrite Python script to generate a unique code verifier and code challenge pair to Nodejs (Typescript)
- [ ] Create button open auth URL in new tab
- [ ] Create a redirect URL to handle oauth
/** @jsxImportSource npm:hono/jsx **/
const app = new Hono();
const title = "Click Button Demo";
const View = () => {
return (
<html>
Debugging_Guide
@willthereader
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
// last stable version is 61
console.log("[Init] Starting Debugging_Guide val", new Date().toISOString());
export const Debugging_Guide = (c: any) => {
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<title>Debugging Guide</title>
<style>
body {
oldfashioned
@tmcw
@jsxImportSource npm:hono/jsx
HTTP
/** @jsxImportSource npm:hono/jsx */
// TODO: Deno doesn't have a pattern for this?
const app = new Hono();
const { styleRoute, StyleTag } = styleSystem();
function MaterialsList() {
const c = useContext(RequestContext);
const mats = getMaterialIds(c);
return (
<plank id="materials-list" hx-swap-oob="true">
<details open>
getJoke
@thu
An interactive, runnable TypeScript val by thu
Script
export const getJoke = (async () => {
const { ChatCompletion } = await import("npm:openai");
const result = await ChatCompletion.create({
model: "gpt-3.5-turbo",
messages: [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: "Tell me a joke." },
return result.choices[0].message.content;
preactExample
@iamseeley
@jsxImportSource https://esm.sh/preact
HTTP (deprecated)
/** @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>), {
headers: {
"Content-Type": "text/html",
preactTest
@tmcw
An interactive, runnable TypeScript val by tmcw
Script
export const preactTest = (async () => {
const { useState, h, htm, renderToString } = await import(
"https://npm.reversehttp.com/preact,htm,preact/hooks,preact-render-to-string"
const html = htm.bind(h);
function Component() {
const [count, setCount] = useState(0);
return html`<div class="foo">${count}</div>`;
return renderToString(h(Component));