Search

server

@stevekrouse

tldraw example with builder, for consistent React versions.

HTTP

tldraw example with builder, for consistent React versions.

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

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

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

import { Tldraw } from "https://esm.sh/@tldraw/tldraw@2.3.0";

</div>

function client() {

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

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

export const server = (req) =>

WeatherAndTime

@ton3m

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

HTTP

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

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

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

const LOCATIONS = {

</div>

function client() {

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

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

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

shoppingApp

@Mr_Mobashshir

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

templateModalTest

@iamseeley

An interactive, runnable TypeScript val by iamseeley

HTTP

<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.

</svg>

<div class="font-semibold group-hover:text-black">ReactJS</div>

</button>

<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-l

<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.

</svg>

<div class="font-semibold group-hover:text-black">Preact</div>

</button>

<button class="group bg-gray-50 border-gray-300 flex items-center gap-2 overflow-hidden rounded border p-3 text-l

rollADice

@liyi

Roll a Dice All codes are generated by Townie AI.

HTTP

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

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

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

/** Utility functions */

</div>

function client() {

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

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

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

simpletype

@dantaloupe

@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 symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?`~";

</div>

function client() {

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

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

client();

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

spotlessBrownBobolink

@stevekrouse

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

const { default: Steel } = await import("https://esm.sh/steel-sdk");

const client = new Steel({ steelAPIKey: apiKey });

const puppeteer = new PuppeteerDeno({

try {

session = await client.sessions.create({});

browser = await puppeteer.connect({

if (browser) await browser.close();

if (session) await client.sessions.release(session.id);

return new Response(

parseTransactions

@bao

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

return <TransactionParser />;

function client() {

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

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

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

noCollectionTracker

@cecedeecodes

No Collection Challenge 🚀 Introduction The No Collection Challenge is an interactive web application designed to encourage personal growth and resilience through the practice of making bold asks and embracing rejection. This app guides users through a journey of self-discovery, reflection, and empowerment. 🌟 Key Features Bold Ask Tracker : Users can log their bold asks, reflections, and outcomes. No Counter : The app tracks the number of "No" responses, with a goal of reaching 5. Reflection Stage : After 5 "No" responses, users enter a reflection stage to contemplate their journey. Motivational Quotes : Dynamic quotes change based on the user's progress to provide encouragement. Journey Visualization : Users can upload a symbolic image representing their journey. PDF Generation : At the end of the challenge, users can generate a PDF summary of their journey. Data Privacy : All data is stored locally on the user's device, ensuring privacy and security. Export/Import : Users can export their journey data and import it later or on another device. 💡 How It Works Ask Stage : Users input their bold asks and initial reflections. They mark each ask as successful or unsuccessful. The app tracks progress towards 5 "No" responses. Reflection Stage : Triggered after receiving 5 "No" responses. Users can upload a symbolic image and write a comprehensive reflection. Completion Stage : Users can review their journey, download a PDF summary, and start a new challenge. 🔒 Data Privacy All data is stored locally in the browser's localStorage. No data is transmitted or stored on external servers. Users have full control over their data, including the ability to clear all stored information. 🛠 Technical Details Built with React for a responsive and interactive user interface. Uses localStorage for data persistence. Implements PDF generation using jsPDF and html2canvas libraries. Responsive design for various device sizes. 🚀 Getting Started Open the app in your web browser. Start logging your bold asks and reflections. Progress through the challenge until you reach the reflection stage. Complete your journey by generating a PDF summary. 📝 Note This app is designed to be a personal growth tool. It encourages users to step out of their comfort zone, embrace rejection, and learn from each experience. Remember, the goal is not just to collect "No" responses, but to grow through the process of making bold asks. Happy challenging yourself and growing!

HTTP

## 🛠 Technical Details

- Built with React for a responsive and interactive user interface.

- Uses localStorage for data persistence.

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

import html2canvas from "https://esm.sh/html2canvas";

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

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

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

const INITIAL_QUOTE = "Courage is not the absence of fear, but action despite it";

</div>

function client() {

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

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

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

GDI_DeepThought

@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 basically does nothing special but demonstrates how to import a function exported from another val. This val is the companion of https://www.val.town/v/rozek/GDI_deepThinkAbout/ which contains the function imported by 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";

import deepThinkAbout from "https://esm.town/v/rozek/GDI_deepThinkAbout";

</div>

function client() {

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

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

client();

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

ssr_a_web_component_for_fun

@brianleroux

demonstrates server-side rendering a web component

HTTP

demonstrates server-side rendering a web component

falDemoApp

@spigooli

@jsxImportSource https://esm.sh/react

HTTP

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

import { createFalClient } from "https://esm.sh/@fal-ai/client";

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

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

import { falProxyRequest } from "https://esm.town/v/stevekrouse/falProxyRequest";

const [loading, setLoading] = useState(false);

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

e?.preventDefault();

try {

const fal = createFalClient({

proxyUrl: "/api/fal/proxy",

</div>

function client() {

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

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

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

linkInBioTemplate

@stevekrouse

@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(

gemini_coder

@awhitter

This is an AI code assistant powered by Cerebras , running llama3.3-70b. Inspired by Hassan's Llama Coder . Setup Sign up for Cerebras Get a Cerebras API Key Save it in a Val Town environment variable called CEREBRAS_API_KEY Todos I'm looking for collaborators to help. Fork & send me PRs! [ ] Experiment with two prompt chain (started here )

HTTP

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

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

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

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

import { STARTER_PROMPTS } from "https://esm.town/v/stevekrouse/cerebras_coder_prompts";

prompt: string;

setPrompt: React.Dispatch<React.SetStateAction<string>>;

handleSubmit: (e: React.FormEvent) => void;

handleStarterPromptClick: (promptItem: PromptItem) => void;

const [loading, setLoading] = useState(false);

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

e.preventDefault();

</div>

function client() {

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

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

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

BadmintonMatchMakerApp

@botuha20

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

type Player = {

</div>

function client() {

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

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

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

…

26 27

29 30

…

250