Search

stringCodeRunner

@yawnxyz

Val.town somehow doesn't run multi-line code. Does work with "3+3" but not more complex stuff.

HTTP (deprecated)

'Content-Type': 'application/json'

return c.json(response);

// Server-side rendering

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

const html = (

reactSSRExample

@vtdocs

An interactive, runnable TypeScript val by vtdocs

Express

export const reactSSRExample = async (req: express.Request, res: express.Response) => {

// 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 }),

res.send(html);

crimsonLynx

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

export const personalWebsite = (request: Request) => {

<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.

successiveVioletGrouse

@ankitkr0

* This game challenges players to click and hold a button for as long as possible. * It uses React for the UI, SQLite for storing high scores, and includes a leaderboard. * The game features vibrant colors and a pre-game explanation.

HTTP

* This game challenges players to click and hold a button for as long as possible.

* It uses React for the UI, SQLite for storing high scores, and includes a leaderboard.

* The game features vibrant colors and a pre-game explanation.

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

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

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

function App() {

</div>

function client() {

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

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

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

dateme_react_client

@stevekrouse

Date Me Directory This is entry-point val for the source code for the Date Me Directory. Contributions welcome! This app uses Hono as the server framework and for JSX . The vals are stored in Val Town SQLite . Contributing Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. This script should do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya! Todos [ ] Make the SQLite database forkable and build a widget/workflow for that, ie fix @stevekrouse/dateme_sqlite [ ] Require an email (that isn't shared publicly) [ ] Verify the email address with a "magic link" [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles

HTTP

import { loader as browse_loader } from "https://esm.town/v/stevekrouse/dateme_browse_react";

import { action as submit_action } from "https://esm.town/v/stevekrouse/dateme_form_react";

async function server(req: Request) {

return new Response("Not found", { status: 404 });

function client(req: Request) {

return new Response(

} else {

return client(req);

genimage

@motyar

// This program creates an image generation service using the maxm-imggenurl API.

HTTP

// The generated images are displayed in a grid, and clicking on an image shows a popup with the image and prompt.

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

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

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

// Define a type for our generated images

console.error("Error fetching images:", error);

React.useEffect(() => {

fetchImages();

</div>

function client() {

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

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

client();

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

personalWebsite

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

export const personalWebsite = (request: Request) => {

return new Response(

valleBlogV0

@trantion

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.

HTTP (deprecated)

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

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

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

function App() {

</div>

function client() {

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

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

client();

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

dbpedia

@ejfox

An API and basic interface for entity searching from DBPedia, enhanced with images

HTTP (deprecated)

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

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

return React.createElement(

React.createElement("h1", { className: "text-3xl font-bold text-center mb-8" }, "DBpedia Entity Search"),

React.createElement(

React.createElement("input", {

React.createElement(

results.length > 0 && React.createElement(

React.createElement("h2", { className: "text-2xl font-semibold mb-4" }, "Results:"),

React.createElement(

blobCommentsReact

@keenanzucker

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { Hono } from "https://esm.sh/hono";

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

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

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

import { blob } from "https://esm.town/v/std/blob?v=10";

weeksummary

@ejfox

@jsxImportSource https://esm.sh/react

HTTP

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

import { createClient } from "https://esm.sh/@supabase/supabase-js";

import DOMPurify from "https://esm.sh/dompurify";

import { marked } from "https://esm.sh/marked";

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

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

interface Metadata {

</div>

function client() {

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

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

client();

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

headers: { "Content-Type": "application/json" },

const supabase = createClient(supabaseUrl, supabaseKey);

const weekParam = url.searchParams.get("week");

redBallComponent

@arthrod

@jsxImportSource https://esm.sh/react

HTTP

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

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

const pulseKeyframes = `

<title>Red Ball Component</title>

animation: "pulse 2s infinite ease-in-out",

ReactDOM.render(<RedBall />, document.getElementById('root'));

</script>

indie_auth

@pomdtr

@jsxImportSource npm:preact

Script

/** @jsxImportSource npm:preact **/

import { html } from "https://esm.town/v/stevekrouse/html?v=5";

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

type HandlerFunc = (req?: Request) => Response | Promise<Response>;

export function indieauth(handler: HandlerFunc, params: {

clientID: string;

}): HandlerFunc {

</p>

valle_tmp_3173618096166977554668362851031

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";

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";

bioFeeler

@o_sv

@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 sha256 from 'https://esm.sh/crypto-js/sha256';

</div>

function client() {

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

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

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

…

11 12

14 15

…

184