Search

notUberNew

@vawogbemi

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

Script

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

import { id, init, tx } from "https://esm.sh/@instantdb/react?bundle-deps&deps=react@18.2.0";

import {

IconSquareFilled,

} from "https://esm.sh/@tabler/icons-react?deps=react@18.2.0";

import React, { useEffect, useMemo, useState } from "https://esm.sh/react@18.2.0";

import { INSTANTDB_APP_ID } from "https://esm.town/v/vawogbemi/notUberConsts";

versatileAmethystMole

@genlock

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect, createContext, useContext } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import {

useNavigate

} from "https://esm.sh/react-router-dom";

import * as jwt from "https://esm.sh/jsonwebtoken";

// The rest of the code remains exactly the same as in the previous implementation

// (Authentication Context, AuthProvider, LoginPage, Dashboard, PrivateRoute, App, client function, and server handler)

// I'm omitting those for brevity, but they should be identical to the previous submission.

ThumbMaker

* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing. * It allows users to upload images, specify output options, and generate a composite thumbnail image. * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality. * * The process is divided into two steps: * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails. * 2. Rendering: Users can create and export the final composite image with options for format and quality. * This two-step process allows changing format or quality without re-rendering the entire canvas. * * Additional features: * - Users can go back from the second step to the first one to regenerate thumbnails. * - Dropping new files takes the user back to the first step. * - A "Download Metadata" button is added to download a JSON file with thumbnail information.

HTTP

* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image process

* It allows users to upload images, specify output options, and generate a composite thumbnail image.

* The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.

VALLEDRAW

@janpaul123

VALL-E-DRAW LLM code generation for vals, on a canvas! Make apps with a frontend, backend, and database. First you need a working version of VALL-E. Follow the steps here . Fork this val, and update the iframeSrc to point to your working version of VALL-E. Type text prompts, select it, press "Q". Select a previous generation with a new text prompt to keep iterating. Selecting shapes doesn't work yet. Have fun!

HTTP

import valledrawclient from "https://esm.town/v/janpaul123/valledrawclient";

export default valledrawclient({

iframeSrc: "https://janpaul123-valle.web.val.run",

home

@patrick6971

@jsxImportSource https://esm.sh/react

HTTP

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

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

return new Response(

neighborhoodOrderApp

@zlpkhr

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import Cookies from "https://esm.sh/js-cookie";

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

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

serveReactDemo

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

import { reactDemo } from "https://esm.town/v/liamdanielduffy/reactDemo";

import { serveAsHTML } from "https://esm.town/v/liamdanielduffy/serveAsHTML";

export function serveReactDemo(req, res) {

serveAsHTML(req, res, reactDemo());

bio

@triptych

@jsxImportSource https://esm.sh/react

HTTP

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

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

return new Response(

gif_upload

@mozzius

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useRef } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

import {

img.src = URL.createObjectURL(file);

const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {

const file = e.target.files?.[0];

setAspectRatio(ratio);

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {

e.preventDefault();

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

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

qualityBrownTyrannosaurus

@natsa

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useEffect, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const STORAGE_KEY = "nodeJSLearningPath";

</div>

function client() {

createRoot(document.getElementById("root")).render(<NodeJSLearningRoadmap />);

if (typeof document !== "undefined") { client(); }

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

http_client

@pomdtr

HTTP Client Attach a postman-like http client to your vals, with bookmarks and history support Usage Wrap your http handler in an the httpClient middleware. import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }) The http client will be shown on the root. Adding bookmarks You might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option: import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { bookmarks: [ { "label": "Dummy Request", "request": new Request("https://dummyjson.com/products") } ]}) Customizing the client path import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { path: "/http-client" }) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request

1 2 8

HTTP

# HTTP Client

Attach a postman-like http client to your vals, with bookmarks and history support

Wrap your http handler in an the httpClient middleware.

import {httpClient} from "https://esm.town/v/pomdtr/http_client"

export default httpClient((req) => {

/** @jsxImportSource npm:preact **/

import { render } from "npm:preact-render-to-string";

<title>REST Client</title>

export function httpClient(next: (req: Request) => Response | Promise<Response>, options: {

Snake_game

@ilianp

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useState, useEffect, useCallback } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const BOARD_SIZE = 20;

</div>

function client() {

createRoot(document.getElementById("root")).render(<SnakeGame />);

if (typeof document !== "undefined") { client(); }

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

spiroplot

@efoley

@jsxImportSource https://esm.sh/react

HTTP

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

import Chart from "https://esm.sh/chart.js/auto";

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

import { createRoot } from "https://esm.sh/react-dom/client";

const R = 120; // Set R as a constant

return { re: a.re + b.re, im: a.im + b.im };

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

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

webgen

@jonataaroeira

To-dos: Spruce up styles a bit Write this README ~Add a cache!~ ~Try moving style tag to the bottom by prompting so content appears immediately and then becomes styled~ didn't work b/c CSS parsing isn't progressive Need more prompting to get the model not to generate placeholder-y content Better root URL page / index page with links to some good sample generations

HTTP

Your description should include:

- What content is on the page

- Other elements like sidebars, links, images that may be in the page

- The author and origin of the page

- The stylistic aesthetic of the page

requestCollector

@maxm

* This request collector val saves information about incoming requests * and displays summary statistics on the home page. It uses SQLite for * persistence and server-side React for rendering the UI. Users can click * on a request ID to view full details of that request.

HTTP

* and displays summary statistics on the home page. It uses SQLite for

* persistence and server-side React for rendering the UI. Users can click

* on a request ID to view full details of that request.

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

import React from "https://esm.sh/react";

import { renderToString } from "https://esm.sh/react-dom/server";

interface RequestData {

…

43 44

46 47

…

251