Search

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 WeatherDashboard() {

</div>

function client() {

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

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

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

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

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

import type { User } from "./zod_demo_shared";

const [serverResponse, setServerResponse] = useState<string>("");

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

const { name, value } = e.target;

setUser(prev => ({ ...prev, [name]: name === "age" ? parseInt(value) || 0 : value }));

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

e.preventDefault();

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

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

const SALON_SERVICES = [

</div>

function client() {

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

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

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

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

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

function ScientificCalculator() {

</div>

function client() {

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

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

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

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

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

function App() {

const handleTouchStart = (e) => {

setStartX(e.touches[0].clientX);

const handleTouchMove = (e) => {

if (startX === null) return;

const currentX = e.touches[0].clientX;

const diff = startX - currentX;

</div>

function client() {

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

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

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

* It includes a welcome modal, fixes the drag state issue, and stores iframe URLs in a database.

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

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

function Modal({ onClose }) {

</div>

function client() {

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

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

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

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

import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";

import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";

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

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

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

import { systemPrompt } from "https://esm.town/v/weaverwhale/jtdPrompt";

margin-top: 20px;

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" },

// Prepare the HTML with the React root element

const html = `

import type { VanObj } from "npm:mini-van-plate@0.5.6/shared";

const fromClient = typeof document !== "undefined";

// disable the button if we're not in the browser

const disabled = van.derive(() => !fromClient || generating.val);

const uuidsDom = ul();

form(

{ onsubmit: fromClient && handleSubmit },

label(

if (fromClient) {

const { default: van } = await import("https://esm.sh/v135/vanjs-core@1.5.0");

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

import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";

import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";

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

async function handleSubmit(e: React.FormEvent) {

function client() {

client();

const client = new Cerebras();

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

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

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

class BubbleShooterGame {

this.canvas.addEventListener('mousemove', (e) => {

const rect = this.canvas.getBoundingClientRect();

this.mouseX = e.clientX - rect.left;

this.mouseY = e.clientY - rect.top;

this.canvas.addEventListener('click', () => {

</div>

function client() {

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

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

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

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

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

import Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";

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

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

} else {

const client = new Cerebras({ apiKey: Deno.env.get("CEREBRAS_API_KEY") });

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

messages: [

const [iframeKey, setIframeKey] = useState(0);

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

e.preventDefault();

</div>

function client() {

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

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

* The generated prompt is tailored to Val Town's specific features and best practices.

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

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

const valTownFeatures = [

"OpenAI integration",

"React support",

"TypeScript support",

</div>

function client() {

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

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

client();

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

tldraw example with builder, for consistent React versions.

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