Search

openAiExample

@yawnxyz

// Server-side rendering

HTTP (deprecated)

allowMethods: ['GET', 'POST'],

allowHeaders: ['Content-Type'],

// Server-side rendering

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

const html = (

allFont

@all

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

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

const popularCombos = [

</div>

function client() {

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

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

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

LofiGirlSimpleRunner

@macro21kgb

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

const LOFI_GIRL_URL = "https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1";

</div>

function client() {

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

if (typeof document !== "undefined") {

client();

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

dbToAPIFrontend

@nbbaier

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

Script

<h1 class="text-2xl font-bold my-6">Resources</h1>

<p>The following resources are available</p>

{props.resources.map((resource) => {

return (

reactSSRExample

@neverstew

An interactive, runnable TypeScript val by neverstew

HTTP (deprecated)

export const reactSSRExample = async (req: Request) => {

// Import React

const React = await import("npm:react");

const ReactDOMServer = await import("npm:react-dom/server");

// Define some components

function TodoItem(props) {

return React.createElement("li", null, props.text);

function TodoList(props) {

const todoItems = props.items.map((item, index) =>

React.createElement(TodoItem, { key: index, text: item })

return React.createElement("ul", null, todoItems);

const items = ["Buy groceries", "Do laundry", "Walk the dog"];

// Render the page

const html = ReactDOMServer.renderToString(

React.createElement(TodoList, { items: items }),

return new Response(html, { headers: { "Content-Type": "text/html" } });

page

@rwev

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { Hono } from "npm:hono@3";

import { getAllPageEntriesDb, getLatestPageEntryDb } from "https://esm.town/v/rwev/pageEntriesDb";

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

const app = new Hono();

const stylesheet = (

reactExample

@dm

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

function HelloWorld() {

</body>

function reactExample(request: Request) {

const renderedString = renderToString(<Html content={<HelloWorld />} />);

return response;

export default reactExample;

valle_tmp_563310902711919480463986409263

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

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

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

valledrawclient

@janpaul123

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

2 12

Script

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

// "react-dom": "18.3.1",

// "react": "18.3.1",

// "@reecelucas/react-use-hotkeys": "2.0.0",

// export * as ReactDOM from "react-dom";

// export * as React from "react";

// import useHotkeys from "@reecelucas/react-use-hotkeys";

window.makeValleDrawClient({

(window as any).makeValleDrawClient = async function({ iframeSrc, model }) {

ReactDOM,

valleGetValsContextWindow

@janpaul123

An interactive, runnable TypeScript val by janpaul123

2 99

Script

type: "http",

prompt: "Generate a val that uses React to render HTML",

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

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

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

prompt: null,

code: `/** @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>), {

type: "http",

code: `/** @jsxImportSource https://esm.sh/preact */

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

export default async function(req: Request) {

valle_tmp_140068690648343496787358158586876

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

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

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "jsherfavr"; // Replace with your Val Town username

honoExample

@willthereader

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

HTTP (deprecated)

change my understanding. I really like{" "}

<a className="text-blue-500 hover:underline" href="https://www.readtangle.com">Tangle</a>{" "}

because it offers perspectives from all sides. I dislike when people assume the worst of their opponents and

when I can't tell who's right because no one addresses the best arguments from their opponents.

</p>

reactTodoListWebsite

@root

// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite

Script

import { REACT_TODO_LIST_CONTENTS } from "https://esm.town/v/root/REACT_TODO_LIST_CONTENTS";

import { addReactFromValCDN } from "https://esm.town/v/root/addReactFromValCDN";

import { buildHtml } from "https://esm.town/v/root/buildHtml";

// https://api.val.town/v1/express/liamdanielduffy.reactTodoListWebsite

export function reactTodoListWebsite(req, res) {

console.log(res);

res.send(buildHtml({

scripts: [addReactFromValCDN()],

styles: REACT_TODO_LIST_CONTENTS.styles,

body: REACT_TODO_LIST_CONTENTS.body,

// Forked from @liamdanielduffy.reactTodoListWebsite

passkeys_demo

@hlobil

Passkeys Demo Passkeys are pretty neat! I wanted to get a demo working in Val Town so I ported over https://github.com/maximousblk/passkeys-demo. One challenge was that the original extensively uses DenoKV store with compound keys and values. I created @stevekrouse/DenoSyntheticKV as a replacement for DenoKV. It uses SuperJSON to encode the keys and values. You can find the client-side script for the main page here: @stevekrouse/passkey_script

HTTP (deprecated)

You can find the client-side script for the main page here: @stevekrouse/passkey_script

residentKey: "required",

const clientData = JSON.parse(atob(cred.response.clientDataJSON));

console.log({ clientData });

const challenge = await kv.get<Challenge>(["challenges", clientData.challenge]);

expectedChallenge: clientData.challenge,

await kv.delete(["challenges", clientData.challenge]);

const clientData = JSON.parse(atob(cred.response.clientDataJSON));

console.log({ clientData });

const challenge = await kv.get<Challenge>(["challenges", clientData.challenge]);

expectedChallenge: clientData.challenge,

VALLErun

@jxnblk

The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE

HTTP (deprecated)

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

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

consider it part of the current conversation. The conversation below is your recent interaction with the user.

You can use React but you don't have to.

currentCode = `/** @jsxImportSource https://esm.sh/react */

import React from "npm:react";

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

You can use React but you don't have to.

DON'T respond with a preamble (aside from saying "Certainly", "Of course", "Let's do it", or something similar) or further ex

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

…

13 14

16 17

…

184