Search

LofiGirlSimpleRunner

@macro21kgb

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

const LOFI_GIRL_URL = "https://www.youtube.com/embed/jfKfPfyJRdk?autoplay=1";

</div>

function client() {

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

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

client();

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

imageConverterAppGlassUI

@gitmanish01

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

HTTP

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

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

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

const SUPPORTED_FORMATS = [

</div>

function client() {

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

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

export default async function server(request: Request) {

evaltownWorker

@deepmojo

@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 WeatherIcon({ condition }) {

</div>

function client() {

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

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

client();

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

dbToAPIFrontend

@nbbaier

@jsxImportSource https://esm.sh/hono@3.9.2/jsx

Script

<h1 class="text-2xl font-bold my-6">Resources</h1>

<p>The following resources are available</p>

{props.resources.map((resource) => {

return (

reactSSRExample

@neverstew

An interactive, runnable TypeScript val by neverstew

HTTP

export const reactSSRExample = async (req: Request) => {

// Import React

const React = await import("npm:react");

const ReactDOMServer = await import("npm:react-dom/server");

// Define some components

function TodoItem(props) {

return React.createElement("li", null, props.text);

function TodoList(props) {

const todoItems = props.items.map((item, index) =>

React.createElement(TodoItem, { key: index, text: item })

return React.createElement("ul", null, todoItems);

const items = ["Buy groceries", "Do laundry", "Walk the dog"];

// Render the page

const html = ReactDOMServer.renderToString(

React.createElement(TodoList, { items: items }),

return new Response(html, { headers: { "Content-Type": "text/html" } });

doApp

@Aditya230

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

function App() {

setTodos(data);

async function addTodo(e: React.FormEvent) {

e.preventDefault();

</div>

function client() {

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

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

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

welcomingSapphireRoundworm

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

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

client();

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

const { Cerebras } = await import("https://esm.sh/@cerebras/cerebras_cloud_sdk");

const client = new Cerebras();

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

messages: [{

page

@rwev

@jsxImportSource https://esm.sh/react

HTTP

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

import { Hono } from "npm:hono@3";

import { getAllPageEntriesDb, getLatestPageEntryDb } from "https://esm.town/v/rwev/pageEntriesDb";

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

const app = new Hono();

const stylesheet = (

reactExample

@dm

@jsxImportSource https://esm.sh/react

HTTP

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

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

function HelloWorld() {

</body>

function reactExample(request: Request) {

const renderedString = renderToString(<Html content={<HelloWorld />} />);

return response;

export default reactExample;

asdf

@popkorn123

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 Cerebras from "https://esm.sh/@cerebras/cerebras_cloud_sdk";

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

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

async function generateCode(prompt: string, currentCode: string) {

} else {

const client = new Cerebras({ apiKey: "csk-ht6t8f48e4epnwxwh3c6pex6ekw2eyw2nm9knfm33f4pcetv" });

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

messages: [

HTMX_template

@deepfates

@jsxImportSource https://esm.sh/preact

HTTP

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

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

export default async function(req: Request) {

if (req.method === "POST") {

valle_tmp_563310902711919480463986409263

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP

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

import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

import _ from "npm:lodash@4";

import OpenAI from "npm:openai";

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

const vt = new ValTown({ bearerToken: Deno.env.get("valtown") });

const username = "janpaul123";

valleGetValsContextWindow

@janpaul123

An interactive, runnable TypeScript val by janpaul123

2 105

Script

type: "http",

prompt: "Generate a val that uses React to render HTML",

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

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

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

prompt: null,

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

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

export const preactExample = (request: Request) =>

new Response(render(<div>Test {1 + 1}</div>), {

type: "http",

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

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

export default async function(req: Request) {

insectIdentifier

@Mashimi

@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 ReactMarkdown from "https://esm.sh/react-markdown";

function App() {

<ReactMarkdown>{insectInfo.markdownContent}</ReactMarkdown>

</div>

function client() {

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

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

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

multiplayerCircles

@maxm

Multiplayer Circles Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .

HTTP

changes.push(row2);

return changes;

const clientCode = () => {

const height = 600;

const width = 600;

const circles = ${JSON.stringify(circles)};

(${clientCode.toString()})()

</script>

</body>

…

38 39

41 42

…

251