Search
openaistreaminghtml
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP
const openai = new OpenAI();
export default async (req) => {
const stream = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: [{
role: "user",
content: "an html page that contains a story. use tailwindcss for styling in the style of the story",
stream: true,
let { readable, writable } = new TransformStream();
let writer = writable.getWriter();
val_4IiypjugcT
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_4IiypjugcT(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const isSimulation = () => {
const randomValue = Math.random();
return randomValue < 0.5; // 50% chance to simulate a simulation
return isSimulation();
// Return the result in a properly formatted response
return new Response(JSON.stringify({
val_5OBYpMAcsJ
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_5OBYpMAcsJ(req) {
try {
// Ensure request body is consumed
const body = await req.text();
// Create a function from the provided code and execute it
const userFunction = async () => {
const findPrimes = (n) => {
const primes = [];
for (let i = 2; i < n; i++) {
let isPrime = true;
emojiExploder
@stevekrouse
@jsxImportSource npm:hono@3/jsx
HTTP
/** @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>
val_4VZJ1Gz7nR
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
return 100;
return Response.json({ success: true, result });
} catch (error) {
return Response.json({
success: false,
error: error.message
}, { status: 500 });
vibe_playground_upload
@ryanguill
An interactive, runnable TypeScript val by ryanguill
Script
export const vibe_playground_upload = () =>
new Response(
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload PDF Page</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
val_wrXS4vL012
@dhvanil
An interactive, runnable TypeScript val by dhvanil
Script
export default async function handler(req) {
try {
const result = await (async () => {
return 100;
return Response.json({ success: true, result });
} catch (error) {
return Response.json({
success: false,
error: error.message
}, { status: 500 });
val_x1FBmxv9sD
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_x1FBmxv9sD(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const generateRandomNumbers = (count) => {
const numbers = [];
for (let i = 0; i < count; i++) {
numbers.push(Math.random());
return numbers;
const checkForPatterns = (numbers) => {
decentauthdemo
@apitman
// export default handler;
HTTP
const prefix = "/login";
function html(userId, prefix) {
let content;
if (userId) {
content = `<h1>Hi there ${userId}</h1>\n<a href='${prefix}/logout'>Logout</a>`;
else {
content = `<h1>Hi there</h1>\n<a href='${prefix}'>Login</a>`;
return `
<!doctype html>
<html>
helloWorld
@jollytoad
Hello world server, using http functions . Try hitting URLs such as: /world , /world.txt , /world.json , /world.html , or even /<script>.html . This demonstrates how you can import and compose simple functions to construct a router to route based on various aspects of a request, ie. the URL path, method, and even on media-types based on path extension or the Accept header. See routing functions , and response helpers on JSR. For a more detailed guide on building a Deno app, including things like fs based routing, with these fns see... https://jollytoad.deno.dev/blog/http_getting_started
HTTP
Hello world server, using [http functions](https://jsr.io/@http).
Try hitting URLs such as: [/world](https://jollytoad-helloworld.web.val.run/world), [/world.txt](https://jollytoad-helloworld.web.val.run/world.txt), [/world.json](https://jollytoad-helloworld.web.val.run/world.json), [/world.html](https://jollytoad-helloworld.web.val.run/world.html), or even [/\<script>.html](https://jollytoad-helloworld.web.val.run/<script>.html).
This demonstrates how you can import and compose simple functions to construct a router to route based on various aspects of a request, ie. the URL path, method, and even on media-types based on path extension or the `Accept` header.
See [routing functions](https://jsr.io/@http/route), and [response helpers](https://jsr.io/@http/response) on JSR.
For a more detailed guide on building a Deno app, including things like fs based routing, with these fns see... https://jollytoad.deno.dev/blog/http_getting_started
export default handle([
byPattern(
"/:name{.:ext}?",
byMethod({
GET: byMediaType({
manage_users_js
@kajgod
An interactive, runnable TypeScript val by kajgod
Script
const js = `
let addOpen = false;
const addClass = " open";
const addButton = document.querySelector(".add-user_button");
const cancelButton = document.querySelector(".cancel-add-user");
const form = document.querySelector(".add-user_container");
const cancel = ()=>{
addOpen = !addOpen;
if(addOpen){
form.className = form.className + addClass;
linkHandlers
@iamseeley
An interactive, runnable TypeScript val by iamseeley
Script
/** @jsx jsx */
/** @jsxFrag Fragment */
export const addLinkHandler = async (c) => {
try {
const payload = await c.get('jwtPayload');
const body = await c.req.parseBody();
const label = body.label;
const url = body.url;
if (!label || !url) {
return c.json({ error: 'Label and URL are required' }, 400);
softTanSlug
@adagradschool
An interactive, runnable TypeScript val by adagradschool
HTTP
export default function handler(req) {
return new Response(`"\n <!DOCTYPE html>\n <html>\n <head>\n <title>Claude Chat Conversation</title>\n <meta charset=\"UTF-8\">\n <style>\n body {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.5;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background: #f9fafb;\n }\n .message {\n margin: 20px 0;\n padding: 15px;\n border-radius: 8px;\n }\n .human {\n background: #e5e7eb;\n }\n .assistant {\n background: #dbeafe;\n }\n .role {\n font-weight: bold;\n margin-bottom: 8px;\n }\n </style>\n </head>\n <body>\n \n <div class=\"message human\">\n <div class=\"role\">Human</div>\n <div class=\"content\">so, how was your day</div>\n </div>\n \n <div class=\"message assistant\">\n <div class=\"role\">Claude</div>\n <div class=\"content\">I aim to have authentic conversations while being direct about my nature as an AI. While I appreciate the friendly question, I should note that I don't actually experience days in the way humans do. I'd be happy to hear about your day though, or to help you with any questions or tasks you might have.</div>\n </div>\n \n </body>\n"`, {
headers: {
"Content-Type": "text/html",
valle_tmp_68349873444339632722229399189495
@janpaul123
// This val responds with "Hello World" to all incoming HTTP requests with crazy CSS gradients
HTTP
// This val responds with "Hello World" to all incoming HTTP requests with crazy CSS gradients
export default async function main(req: Request): Promise<Response> {
const css = `
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 50px;
const html = `<div style="${css}">Hello World</div>`;
return new Response(html, { headers: { "Content-Type": "text/html" } });
ofScript
@tmcw
An interactive, runnable TypeScript val by tmcw
Script
addEventListener("htmx:pushedIntoHistory", (e) => {
for (const a of document.querySelectorAll("a")) {
a.classList.toggle("active", a.getAttribute("href") === e.detail.path);
addEventListener("keyup", (event) => {
const target = event.target;
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
if (event.key === "j" || event.key === "k") {
const next = document.querySelector(
event.key === "j"
? ".recipe.active + .recipe"