Search

razza

@gio

An interactive, runnable TypeScript val by gio

HTTP

gap: 20px;

.left-side, .right-side {

width: 48%;

font-weight: bold;

const clientScript = `

let existingCodes = [];

</div>

<h2>Existing Chats</h2>

</div>

</body>

stringCodeRunner

@yawnxyz

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

HTTP

'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 (deprecated)

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

/** @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.

SimpleAddition

@efoley

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

function App() {

setNotificationSent(true);

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

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

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

ThreadmarkLISTFetcher

@willthereader

An interactive, runnable TypeScript val by willthereader

HTTP

- (correctOrder.length + outOfOrder.length - (outOfOrder.filter(item => item.expectedIndex === -1).length)),

function client() {

console.log("Initializing client-side application");

const app = App();

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

client();

export default async function server(request) {

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

segYPlotter

@efoley

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

import { parseSegy } from "https://esm.town/v/efoley/parseSegy";

</div>

function client() {

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

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

const css = `

lang_code

@faseeu

@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 { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";

import { tomorrow } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism";

// Updated LangChain-compatible imports

const [error, setError] = useState<string | null>(null);

async function handleSubmit(e: React.FormEvent) {

e.preventDefault();

</div>

function client() {

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

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

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

GDI_AITranslator

@rozek

This val is part of a series of examples to introduce "val.town" in my computer science course at Stuttgart University of Applied Sciences . The idea is to motivate even first-semester students not to wait but to put their ideas into practice from the very beginning and implement web apps with frontend and backend. It contains a simple web page which allows users to enter some german (or other non-english) text and send it to a preconfigured server. That server translates the text with the help of OpenAI and sends the result back to this app where it is finally presented to the user. This val is the companion of https://rozek-gdi_aitranslatorservice.web.val.run/ which contains the server part (aka "backend") for this example. The code was created using Townie - with only a few small manual corrections. This val is licensed under the MIT License.

HTTP

/** @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> {

ThreadmarkLISTFetcher2

@willthereader

// version one is the one with the javascript scenario

HTTP

- (correctOrder.length + outOfOrder.length - (outOfOrder.filter(item => item.expectedIndex === -1).length)),

function client() {

// console.log("Initializing client-side application");

const app = App();

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

client();

export default async function server(request) {

buildExchangeRateAppAndroid

@kingofkwl

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

function CurrencyConverter() {

</div>

function client() {

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

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

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

imageConverterSite

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

function App() {

</div>

function client() {

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

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

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

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

…

32 33

35 36

…

250