Search

GDI_HelloWorld

@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 very simple (but still a bit visually impressive) "Hello, World!" web page made with Townie. This val is licensed under the MIT License.

HTTP

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

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

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

function App() {

</div>

function client() {

const root = document.getElementById('root');

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

client();

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

zyloxAIChatApp

@gigmx

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

HTTP

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

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

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

import OpenAI from "https://esm.sh/openai@4.28.4";

const handleMouseMove = (e) => {

const opacity = 0.3 + (e.clientY / window.innerHeight) * 0.4;

setBackgroundOpacity(Math.min(opacity, 0.7));

</div>

function client() {

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

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

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

simpleChatAPI

@haeliyan

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

HTTP

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

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

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

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

chatgptPromptWebsite

@tarekr93

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

HTTP

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

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

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

function AdvancedPromptGenerator() {

</div>

function client() {

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

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

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

buildagency

@elliotbraem

@jsxImportSource https://esm.sh/react

HTTP

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

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

genuineGrayWren

@stevekrouse

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

HTTP

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

import { HTML5Backend } from "https://esm.sh/react-dnd-html5-backend@16.0.1";

import { DndProvider, useDrag, useDrop } from "https://esm.sh/react-dnd@16.0.1";

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

import React, {

} from "https://esm.sh/react@18.2.0";

const dropRect = dropRef.current.getBoundingClientRect();

const clientOffset = monitor.getClientOffset();

if (!clientOffset) return;

const left = Math.round(clientOffset.x - dropRect.left);

tsParticlesVal

@all

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import Particles from "https://esm.sh/react-tsparticles";

import { loadFull } from "https://esm.sh/tsparticles@2.9.3";

</div>

function client() {

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

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

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

intellectualMaroonMockingbird

@stevekrouse

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

import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter";

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

async function handleSubmit(e: React.FormEvent) {

function client() {

client();

const client = new Cerebras();

const completion = await client.chat.completions.create({

notUberFolder

@toowired

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

const prefixedVals = [

</div>

function client() {

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

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

client();

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

QRCodeScanner

@curtcox

* This val creates a QR code scanner using the device's camera. * It uses the jsQR library to decode QR codes from video frames. * The app displays the scanned QR code content and additional information. * * We'll use the following approach: * 1. Set up a video element to capture camera feed * 2. Use canvas to process video frames * 3. Use jsQR to decode QR codes from the frames * 4. Display the QR code content and additional information * 5. Add extensive debugging to identify issues

HTTP

* 5. Add extensive debugging to identify issues

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

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

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

import jsQR from "https://esm.sh/jsqr";

</div>

function client() {

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

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

client();

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

postmanClone

@maxm

* This val creates a Postman-like interface for testing HTTP requests directly in the browser. * It uses React for the UI and the Fetch API to make requests. * The server function serves the HTML and handles the API requests.

HTTP

* This val creates a Postman-like interface for testing HTTP requests directly in the browser.

* It uses React for the UI and the Fetch API to make requests.

* The server function serves the HTML and handles the API requests.

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

notUber

@vawogbemi

notUber -- It's kinda like Lyft I built this as part of a larger project, as well a demo. The stack consists of Clerk for Auth, InstantDB for my database, and the Google maps api for maps and routing etc. All the vals are located here . Getting Started Fork all the vals, the link is here . Refactors the imports so they're importing from your vals and not this val. Visit Clerk , InstantDB , Google maps api and create accounts and get ur api keys. Enter your api Keys into your notUberConsts and notUberMapComponent vals. Follow me on X . THIS IS THE MOST IMPORTANT STEP. Please questions or give feedback!

HTTP

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

} from "https://esm.sh/@clerk/clerk-react?bundle-deps&deps=react@18.2.0";

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

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

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

} from "https://esm.sh/react-router-dom?bundle-deps&deps=react@18.2.0";

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

clientName: "notUber",

onChange: (e: React.ChangeEvent<HTMLInputElement>) => void,

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

honoJsxAlpineReactive

@yawnxyz

Basic demo of getting reactive Alpine.js working on a hono/jsx "backend" For server <> frontend interaction, do form POST submissions (or potentially POST json to the public val address?) https://alpinejs.dev/start-here#building-a-counter

HTTP

Basic demo of getting reactive Alpine.js working on a hono/jsx "backend"

- For server <> frontend interaction, do form POST submissions (or potentially POST json to the public val address?)

import { jsx } from "npm:hono@3/jsx";

const app = new Hono();

// Server-side rendering

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

const html = (

tiny_jest_example

@willthereader

@jsxImportSource https://esm.sh/react

Script

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

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

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

import { expect, prettify, Test } from "https://esm.sh/tiny-jest@1.1.1";

</div>

function client() {

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

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

client();

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

tidyRedWhale

@websrai

@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 AssistantChat() {

const [isLoading, setIsLoading] = useState(false);

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

e.preventDefault();

</div>

function client() {

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

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

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

…

17 18

20 21

…

249