Search

web

@rauchg

@jsxImportSource npm:react

HTTP

/** @jsxImportSource npm:react **/

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

export default (req: Request) => {

return new Response(

prompt_to_code_auto_refresh_codebed

@trob

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

function debounce(func, wait) {

</div>

function client() {

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

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

client();

function stripCodeFences(code: string): string {

musicFromPrompt

@insectagon

@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(req: Request): Promise<Response> {

practicalBeigeCapybara

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

function App() {

</div>

function client() {

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

console.log('ServiceWorker registration failed: ', err);

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

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

cerebras_coder

@vadergit

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 React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";

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

function SnakeGame() {

</div>

function client() {

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

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

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

adventurousApricotGopher

@deffgod

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

// Video Course Types

return <CourseCatalog />;

function client() {

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

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

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

valtowntown

@vawogbemi

🏘️ Val Town Town Val Town implemented in Val Town. What if you want to build your own Val Town? What if you want features we haven't built yet? Val Town Town demonstrates how you can run untrusted code yourself. Extend it and see what you can build!

HTTP

/** @jsxImportSource npm:react */

import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo?v=29";

import { Hono } from "npm:hono";

import React from "npm:react";

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

const { httpEndpoint } = extractValInfo(import.meta.url);

hungryWhiteLeopon

@gr8gatsby

* This application helps users write detailed reviews of coffee shops. It fetches coffee shop data * from the OpenStreetMap Nominatim API, allows users to add custom details, and stores the augmented * information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews. * * It uses React for the frontend, the Nominatim API for initial coffee shop data, * and Val Town's SQLite for data persistence.

HTTP

* information in a SQLite database. The app provides a user interface to view, add, and edit coffee shop reviews.

* It uses React for the frontend, the Nominatim API for initial coffee shop data,

* and Val Town's SQLite for data persistence.

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

</div>

function client() {

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

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

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

longOliveGuppy

@sharanbabu

// This chatbot app will use a simple React frontend to display messages and allow user input.

HTTP

// This chatbot app will use a simple React frontend to display messages and allow user input.

// The backend will use OpenAI's GPT model to generate responses.

// We'll use SQLite to store conversation history.

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

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

await sqlite.execute(`INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (role, content) VALUES (?, ?)`, ["user", message]);

const client = new Cerebras.default({

apiKey: Deno.env.get('CEREBRAS_API_KEY'),

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

messages: [

inventiveIvoryFox

@Ankit285001

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

return <BusinessDashboard />;

function client() {

// Register service worker for PWA support

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

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

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

zottify

@rapfl

@jsxImportSource https://esm.sh/preact

HTTP

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

import { encode } from "https://deno.land/std@0.107.0/encoding/base64.ts";

import { render } from "npm:preact-render-to-string";

import Replicate from "npm:replicate";

background-color: #555; /* Lighter gray on hover */

/* Terminal-style prompt inside the button */

button .terminal-prompt {

memeGenerator

@stevekrouse

* This meme creation tool app will allow users to create memes by selecting an image and adding top and bottom text. * We'll use HTML5 Canvas to render the meme directly in the browser, with custom positioning for different meme templates.

HTTP

* We'll use HTML5 Canvas to render the meme directly in the browser, with custom positioning for different meme templates.

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

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

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

interface MemeTemplate {

image.src = selectedImage.url;

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

e.preventDefault();

</div>

function client() {

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

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

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

onlineStatus

@lilyjordan

test readme info

HTTP

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

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

export function getStaticProps() {

return {

multirouteReact

@iamseeley

🌐 Multi-Route Website with React

HTTP

🌐 Multi-Route Website with React

* @title Multi-Route Website with React

* @description Create a personal portfolio website with multiple pages and server-side rendered React components.

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

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

<p><strong>This website is rendered server-side with React.</strong></p>

<p>Check out the <a href='https://www.val.town/v/iamseeley/multirouteReact'>source</a> and start building your own site!<

<title>{personalData.name} | Server-side React</title>

const reactHtml = renderToString(<App currentPath={currentPath} />);

const fullHtml = `<!DOCTYPE html>${reactHtml}`;

mileiShowGraph

@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, { useEffect, useState } from "https://esm.sh/react@18.2.0";

import {

YAxis,

} from "https://esm.sh/recharts@2.7.2?deps=react@18.2.0";

function App({ tweetData }) {

</div>

function client() {

const tweetData = JSON.parse(document.getElementById("tweet-data").textContent);

createRoot(document.getElementById("root")).render(<App tweetData={tweetData} />);

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

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

…

31 32

34 35

…

250