Search

honoHtmxJsTemplate

@tfayyaz

@jsxImportSource npm:hono/jsx

HTTP

/** @jsxImportSource npm:hono/jsx **/

const app = new Hono();

const title = "Click Button Demo";

const View = () => {

return (

<html>

<head>

{html`

</head>

pageshot

@yawnxyz

// Inlined content from ./middleware.js

1 1

HTTP

// Inlined content from ./middleware.js

export const pipeline_url = `https://yawnxyz-executeproxy.web.val.run/execute`;

// export const pipeline_url = `http://localhost:9999/execute`;

export const pageshotHandler = async (c) => {

const body = await c.req.json();

const { url, useCache } = body;

console.log("url::", url)

// return c.json(url)

const pipeline = [

"name": "getContent",

realtimeFormLogic

@iamseeley

An interactive, runnable TypeScript val by iamseeley

Script

document.addEventListener("DOMContentLoaded", () => {

const promptInput = document.getElementById("prompt");

const resultDiv = document.getElementById("result");

const modelSelect = document.getElementById("realtimeModel");

let debounceTimeout;

let abortController = null;

promptInput.addEventListener("input", () => {

clearTimeout(debounceTimeout);

debounceTimeout = setTimeout(generateImages, 500);

async function generateImages() {

web_aS5dw4wx47

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_aS5dw4wx47(req) {

return new Response(`<!DOCTYPE html>

<head>

<title>EPIC WEBSITE THAT POPS!</title>

<style>

body {

background: linear-gradient(45deg, #ff00cc, #3494e6);

anime

@tempguy

@jsxImportSource npm:hono@3/jsx

HTTP

/** @jsxImportSource npm:hono@3/jsx */

const app = new Hono();

app.get("/embed/:id/:ep/:dub", async (c) => {

const id = c.req.param("id");

const ep = Number(c.req.param("ep"));

const dub = c.req.param("dub") === "dub";

const results = [];

const metaResponse = await fetch(

`https://cool-proxy.koyeb.app/hdiuhmalkmc9d0ck7UCFVGBJHN?destination=https://api.malsync.moe/mal/anime/${id}`,

const metaData = await metaResponse.json();

ForexDataHub

@samweist

An interactive, runnable TypeScript val by samweist

HTTP

function generateFutureEvents(months = 6) {

const events = [];

const startDate = new Date();

const endDate = addMonths(startDate, months);

const countries = ["USA", "EU", "China", "UK", "Japan", "Australia", "Canada", "Switzerland"];

const eventTypes = [

"Interest Rate Decision",

"GDP Release",

"CPI Data",

"Unemployment Rate",

squishyform

@yawnxyz

- this version collects data from three ways: a free-form paragraph, a JSON text area, or a table (mimicking a form) - it's really tempting to create a form that lets people "write anything" in a text box and have the data properly formatted by the AI, it's still kind of an accessibility nightmare. - I can see this appearing everywhere, maybe for the novelty, but current forms with labels and ARIA etc. will still reign supreme for data-heavy bureaucratic data collection tasks - for casual inputs though like guest books this could be a simpler alternative - for "real data applications" like collecting info for shipping and CC, still use a "real" form - for "real applications" this can still be used to catch errors quickly, like misspellings (which happen a LOT) - using a really fast/cheap model like llama3.1 8b (or even smaller) is a good use case, but it should support structured outputs

HTTP

- this version collects data from three ways: a free-form paragraph, a JSON text area, or a table (mimicking a form)

- it's really tempting to create a form that lets people "write anything" in a text box and have the data properly formatte

- I can see this appearing everywhere, maybe for the novelty, but current forms with labels and ARIA etc. will still reign

- for casual inputs though like guest books this could be a simpler alternative

- for "real data applications" like collecting info for shipping and CC, still use a "real" form

- for "real applications" this can still be used to catch errors quickly, like misspellings (which happen a LOT)

- using a really fast/cheap model like llama3.1 8b (or even smaller) is a good use case, but it should support structured o

const app = new Hono();

const module = `<script type="module">

import { atom, computed } from 'https://cdn.jsdelivr.net/npm/nanostores@0.11.3/+esm'

web_ZOT5N4yReQ

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_ZOT5N4yReQ(req) {

return new Response(`<!DOCTYPE html>

<html>

<head>

<title>Retro Space Interface</title>

<style>

body {

margin: 0;

anime

@tempdev

@jsxImportSource npm:hono@3/jsx

HTTP

/** @jsxImportSource npm:hono@3/jsx */

const app = new Hono();

app.get("/embed/:id/:ep/:dub", async (c) => {

const id = c.req.param("id");

const ep = Number(c.req.param("ep"));

const dub = c.req.param("dub") === "dub";

const results = [];

const metaResponse = await fetch(

`https://cool-proxy.koyeb.app/hdiuhmalkmc9d0ck7UCFVGBJHN?destination=https://api.malsync.moe/mal/anime/${id}`,

const metaData = await metaResponse.json();

spinner

@iamseeley

@jsxImportSource npm:hono@3/jsx

HTTP

/** @jsxImportSource npm:hono@3/jsx */

const app = new Hono();

const createMainPage = () => (

<head>

<style>

body, html {

margin: 0;

GltfXR

@andybak

An interactive, runnable TypeScript val by andybak

HTTP

export default function server(req: Request): Response {

const html = `

<!DOCTYPE html>

<head>

<title>GLTF Viewer with WebXR</title>

<style>

body { margin: 0; }

web_TpGd7zQvpG

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_TpGd7zQvpG(req) {

return new Response(`<!DOCTYPE html>

<html>

<head>

<title>Neon Dynamic Website</title>

<style>

body {

margin: 0;

elegantJadeParrotfish

@temptemp

@jsxImportSource npm:hono@3/jsx

HTTP

/** @jsxImportSource npm:hono@3/jsx */

const port = parseInt(Deno.env.get("PORT") ?? "8000");

// import { decryptSource, getMeta, getWasm } from "https://esm.town/v/tempdev/rabbitstreamUtils";

// import { decrypt } from "https://files.catbox.moe/vlxq94.ts";

const app = new Hono();

async function archive(url: string) {

const response = await fetch(url);

const body = await response.text();

const $ = load(body);

const questions = $("[class*='question_content_']");

web_R95aGna5v9

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_R95aGna5v9(req) {

return new Response(`<!DOCTYPE html>

<html>

<head>

<title>Cyberpunk Dreams</title>

<style>

body {

margin: 0;

welcomeEmail

@rodrigotello

An interactive, runnable TypeScript val by rodrigotello

676

Script

export let welcomeEmail = `

<p>Welcome to Val Town! Here are some resources to help you set up:</p>

<p>A val is small JavaScript or TypeScript snippet of code, written in the browser and run in our servers.

Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.<p>

</li>

<h3>Join our Discord</h3>

…

117 118

119

120 121

…

252