Search results for "react client side"

web_5If23gmesX

@dhvanil

An interactive, runnable TypeScript val by dhvanil

0

HTTP

export async function web_5If23gmesX(req) {

return new Response(`<!DOCTYPE html>

<head>

<title>Vibrant Design Showcase</title>

<style>

body {

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

run

@websandbox

An interactive, runnable TypeScript val by websandbox

15

0

Script

type SerializedRequest = {

headers: [string, string][];

method: string;

url: string;

body?: string;

type SerializedResponse = {

headers: [string, string][];

status: number;

statusText: string;

body: string;

decorator_router

@yieldray

Decorator Router Fair simple decorator based router, with GET/POST and middleware support. demo live demo: https://yieldray-decorator_router_demo.web.val.run/ import { get, post, all, use, registered, handler, type Context } from "https://esm.town/v/yieldray/decorator_router"; import { parseBearerAuth, transformResponse } from "https://esm.sh/serve-router@1.1.0/utils"; interface User { id: number; name: string; } const users: User[] = [ { id: 0, name: "Alice" }, { id: 1, name: "Ray" }, ]; class _Server { /** * Decorator @get: Parses URLSearchParams into an object as the first parameter. */ @get("/users") getAllUsers() { return users; // Automatically wrapped in a Response.json } @get("/getUserByName") // GET /getUserByName?name=Alice getUserByName({ name }: Record<string, string>) { const user = users.find((u) => u.name === name); if (user) { return user; // Automatically wrapped as Response.json(user) } // Optionally, manually return a Response object return Response.json({ error: "not found" }, { status: 404 }); } @get("/user/:id") // GET /user/123 user(_: unknown, { params: { id } }: Context) { return users.find((u) => u.id === Number(id)); } /** * Decorator @post: Parses the request body into an object as the first parameter. */ @post("/user") // POST /user async createUser(user: User) { if (users.find((u) => u.id === user.id)) { return { error: "already exists!" }; } await users.push(user); // Assume insertion into a database return { ok: true, users }; } @post("/user/:id") // POST /user/123 async updateUser(user: User, { params: { id }, request }: Context) { const token = parseBearerAuth(request.headers.get("Authorization")!); // Additional logic here... } @all("/") home({ request }: { request: Request }) { return { registered, method: request.method, url: request.url, headers: Object.fromEntries(request.headers.entries()), }; } @use("/*") async corsMiddleware({ next, request }: Context) { const resp = await next(); return transformResponse(resp, { headers: { "Access-Control-Allow-Origin": request.headers.get("origin") || "*", }, }); } } // For Deno: Deno.serve(handler); // For val.town: export default handler;

2 2

0

Script

# Decorator Router

Fair simple decorator based router, with GET/POST and middleware support.

## demo

live demo: <https://yieldray-decorator_router_demo.web.val.run/>

```ts

interface User {

export const app = ServeRouter({

onError(error) {

console.log(error);

const _registered: Array<{ method: string; path: string }> = [];

bbrun

@dglazkov

A simple chat app harness for your board Provides a very simple chat app UI for a Breadboard board. For now, requires you to be running a board server. This harness actually acts as a proxy to the board server run API endpoint , and puts a nice (well, somewhat nice) frontend on top of it. The frontend is somewhat limited in what it can show, currently supporting only LLMContent and array of LLMContent outputs, and only LLMContent array input. The script will look for the BB_LIVE_KEY in your Val Town environment, which must contain your board server API key. To use, create an HTTP val, then import the proxy function from this script and call it like this: import { proxy } from "https://esm.town/v/dglazkov/bbrun"; export default proxy( "url-to-the-board.bgl.json", );

3 6

0

Script

# A simple chat app harness for your board

Provides a very simple chat app UI for a [Breadboard](https://breadboard-ai.web.app/) board.

For now, requires you to be running a board server. This harness actually acts

as a proxy to the board server [run API endpoint](https://breadboard-ai.github.io/breadboard/docs/reference/board-run-api-end

and puts a nice (well, somewhat nice) frontend on top of it.

The frontend is somewhat limited in what it can show, currently supporting only

const DEFAULT_FRONTEND_MODULE = "https://esm.town/v/dglazkov/bbrunfe";

* You can supply these options as a second argument to the `proxy` function.

* These options are used to configure the frontend.

export type FrontendOptions = {

projects

@willthereader

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

3 3

0

HTTP

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

export const projects = (c: Context) => {

return c.html(

<html>

<head>

<title>Projects</title>

<style

dangerouslySetInnerHTML={{

__html:

`:root{--slate1: hsl(200, 7%, 8.8%);--slate2: hsl(195, 7.1%, 11%);--slate3: hsl(197, 6.8%, 13.6%);--slate4: h

site

@nikita

An interactive, runnable TypeScript val by nikita

0

Script

export let site = (req, res) => {

if (req.method === "get") {

res.type("html").send(/* html */ `

<html>

<h1>Welcome</h1>

<label>Email

</label>

<button type="submit">Submit</submit>

hi

@just_be

An interactive, runnable TypeScript val by just_be

1

0

HTTP

export default async function server(req: Request): Promise<Response> {

const html = `

<!DOCTYPE html>

<head>

<title>Hello world</title>

<style>

body {

blackRodent

@stevekrouse

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

0

HTTP

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

export const projects = (c: Context) => {

return c.html(

<html>

<head>

<title>Projects</title>

<style

dangerouslySetInnerHTML={{

__html:

`:root{--slate1: hsl(200, 7%, 8.8%);--slate2: hsl(195, 7.1%, 11%);--slate3: hsl(197, 6.8%, 13.6%);--slate4: h

dynamicFormInput

@yawnxyz

An interactive, runnable TypeScript val by yawnxyz

0

HTTP

/** @jsx jsx */

const app = new Hono();

const Layout = ({ children, title = "Dynamic Form Example" }) => (

<head>

<title>{title}</title>

</head>

<body>

{children}

scarletSole

@tempdev

An interactive, runnable TypeScript val by tempdev

0

HTTP

interface Context {

url: string;

const app = new Hono();

app.get("/dood/:dood", async (c) => {

const { dood } = c.req.param();

const ctx = { url: "https://d000d.com/e/" + dood };

return c.json(await doodstream(ctx));

app.get("/tape/:tape", async (c) => {

const { tape } = c.req.param();

const ctx = { url: "https://streamtape.com/e/" + tape };

scarletSole

@tempguy

An interactive, runnable TypeScript val by tempguy

2

0

HTTP

interface Context {

url: string;

const app = new Hono();

app.get("/dood/:dood", async (c) => {

const { dood } = c.req.param();

const ctx = { url: "https://d000d.com/e/" + dood };

return c.json(await doodstream(ctx));

app.get("/tape/:tape", async (c) => {

const { tape } = c.req.param();

const ctx = { url: "https://streamtape.com/e/" + tape };

searchmessages

@tfayyaz

@jsxImportSource npm:hono/jsx

0

HTTP

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

// import val sqlite

const app = new Hono();

const title = "Click Button Demo";

const View = ({ rows }) => {

// create search form

// create html table from all rows

return (

<html>

<head>

valleBlogV0

@janpaul123

Fork this val to your own profile. Create a Val Town API token , open the browser preview of this val, and use the API token as the password to log in.

7

3

HTTP

* Fork this val to your own profile.

* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API tok

async function main(req: Request): Promise<Response> {

const { readable, writable } = new TransformStream();

const writer = writable.getWriter();

const write = (text) => writer.write(new TextEncoder().encode(text));

(async () => {

write(`<!DOCTYPE html>

<html>

html

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

1 2 1,265

1

Script

export let html = (content, options = {}) =>

new Response(content, {

headers: {

"Content-Type": "text/html",

...(options.headers ?? {}),

monacoEditor

@yawnxyz

An interactive, runnable TypeScript val by yawnxyz

0

HTTP

const app = new Hono();

app.get('/', (c) => {

const html = `

<!DOCTYPE html>

<head>

<title>Monaco Editor with Hono</title>

<style>