Search

personalWebsite

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

return new Response(

serveUtils

Serve Utils This val exports various utility functions, mainly the serve(commentFunction, contentType?) . It enables easy serving of different files, while allowing the use of all string characters: // this is possible const arr = ["Hello", 'world', `!`]; Townie Prompt This can be used as a replacement system prompt for Townie. Townie will: Write client-side applications with vanilla JavaScript Serve them as different assets, ie. index.html , style.css and main.js Use modern module syntax, including importing modules directly from esm.sh on the client side Not reuse the same script for the server and client logic IMPORTANT: Due tue val.town README restrictions, the custom prompt can now be found here .

Script

Townie will:

- Write client-side applications with vanilla JavaScript

- Serve them as different assets, ie. `index.html`, `style.css` and `main.js`

- Use modern module syntax, including importing modules directly from `esm.sh` on the client side

- Not reuse the same script for the server and client logic

**IMPORTANT:**

ampleIndigoJunglefowl

@faseeu

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import anime from "https://esm.sh/animejs@3.2.1";

</footer>

function client() {

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

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

client();

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

seamlessBlushSwallow

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP

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

import Anthropic from "https://esm.sh/@anthropic-ai/sdk";

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

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

function debounce(func: Function, wait: number) {

}, [code, debouncedRenderShader]);

async function handleSubmit(e: React.FormEvent) {

e.preventDefault();

</div>

function client() {

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

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

client();

function renderShader(canvas: HTMLCanvasElement, fragmentShaderSource: string, time: number) {

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

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

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

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

visionaryPeachAsp

@stevekrouse

A proxy that lets Val Town users get some free SocialData Search to power their Twitter Alerts, ie @stevekrouse/twitterAlert I reccomend interfacing with this proxy via this helper function: @stevekrouse/socialDataSearch

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

const KEY = "socialDataProxy";

return <Dashboard data={data} />;

function client() {

const initialData = (window as any).INITIAL_DATA;

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

client();

async function getUsageData() {

what_did_i_work_on_today

@danphilibin

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

// SETTINGS - Customize these values

meta: "Completed 10/24/2024, 8:15:00 PM",

title: "Add support for custom emoji reactions",

url: "#",

</div>

function client() {

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

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

const MILLISECONDS_PER_HOUR = 60 * 60 * 1000;

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

pageDetector

@eligosmlytics

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

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

tenaciousCoffeeSpoonbill

@devansh_bansal

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

htmxCounterExample

@nbbaier

@jsxImportSource npm:hono/jsx

HTTP

/** @jsxImportSource npm:hono/jsx **/

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

import { Hono } from "npm:hono";

import type { FC, PropsWithChildren } from "npm:hono/jsx";

ReminderApp

@Azam123

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

function App() {

<button onClick={() => toggleCompletion(reminder.id, reminder.completed)}>

↩️ Reactivate

</button>

</div>

function client() {

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

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

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

bricklesGame

@jamiedubs

@jsxImportSource https://esm.sh/react

HTTP

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

import React, { useEffect, useRef, 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> {

…

33 34

36 37

…

250