Val Town Code SearchReturn to Val Town

API Access

You can access search results via JSON API by adding format=json to your query:

https://codesearch.val.run/image-url.jpg%20%22Image%20title%22?q=react&page=871&format=json

For typeahead suggestions, use the /typeahead endpoint:

https://codesearch.val.run/typeahead?q=react

Returns an array of strings in format "username" or "username/projectName"

Found 9340 results for "react"(2415ms)

weeksummarymain.tsx3 matches

@ejfox•Updated 8 months ago
1/** @jsxImportSource https://esm.sh/react */
2import { createClient } from "https://esm.sh/@supabase/supabase-js";
3import DOMPurify from "https://esm.sh/dompurify";
4import { marked } from "https://esm.sh/marked";
5import React, { useEffect, useState } from "https://esm.sh/react";
6import { createRoot } from "https://esm.sh/react-dom/client";
7
8interface Metadata {

VALLErunmain.tsx31 matches

@ejfox•Updated 8 months ago
1/** @jsxImportSource https://esm.sh/react */
2
3import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
14import { Hono } from "npm:hono@3";
15import _ from "npm:lodash@4";
16import { renderToString } from "npm:react-dom/server";
17
18function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
232 executed on every HTTP request.
233 The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
234 You can use React but you don't have to.
235 `.replace("\n", " ");
236
246 const changesMessages = function({ currentCode, userprompt }: { currentCode: string; userprompt: string }) {
247 if (!currentCode) {
248 currentCode = `/** @jsxImportSource https://esm.sh/react */
249
250import React from "npm:react";
251import { renderToString } from "npm:react-dom/server";
252
253const Example = () => (<html></html>);
293executed on every HTTP request.
294The val should return a valid HTML website, don't make JUST a backend unless explicitly asked for.
295You can use React but you don't have to.
296Take requests for changes to the supplied code.
297If the request is ambiguous, ask questions.
407 code as possible, only changing things that are strictly necessary to change.
408 \`\`\`ts
409/** @jsxImportSource https://esm.sh/react */
410
411import React from "npm:react";
412import { renderToString } from "npm:react-dom/server";
413
414const Example = () => (<html></html>);
431\`\`\`ts
432[SEARCH_START_SINGLE_LINE]
433import React from "npm:react";
434[/SEARCH_START_SINGLE_LINE]
435[SEARCH_END_SINGLE_LINE]
436[/SEARCH_END_SINGLE_LINE]
437[REPLACE]
438// This val creates a simple "Hello World" page using React.
439// We'll use React and ReactDOMServer for server-side rendering.
440// The approach is straightforward: create a React component and render it to HTML.
441
442import React from "npm:react";
443[/REPLACE]
444\`\`\`
479 code as possible, only changing things that are strictly necessary to change.
480 \`\`\`ts
481/** @jsxImportSource https://esm.sh/react */
482
483// This val creates a simple "Hello World" page using React.
484// We'll use React and ReactDOMServer for server-side rendering.
485// The approach is straightforward: create a React component and render it to HTML.
486
487import React from "npm:react";
488import { renderToString } from "npm:react-dom/server";
489
490const HelloWorld = () => (
516\`\`\`ts
517[SEARCH_START_SINGLE_LINE]
518// The approach is straightforward: create a React component and render it to HTML.
519[/SEARCH_START_SINGLE_LINE]
520[SEARCH_END_SINGLE_LINE]
521[/SEARCH_END_SINGLE_LINE]
522[REPLACE]
523// The approach is straightforward: create a React component and render it to HTML.
524// We import Tailwind CSS and apply classes to our React elements to style the page.
525[/REPLACE]
526\`\`\`
560 code as possible, only changing things that are strictly necessary to change.
561 \`\`\`ts
562/** @jsxImportSource https://esm.sh/react */
563
564// This val creates a simple Hacker News clone using React, Tailwind CSS, and blob storage.
565// We'll use React and ReactDOMServer for server-side rendering, Tailwind for styling,
566// and blob storage to persist and retrieve posts.
567
568import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
569import { blob } from "https://esm.town/v/std/blob";
570import React from "npm:react";
571import { renderToString } from "npm:react-dom/server";
572
573const { name } = extractValInfo(import.meta.url);
611 const initialPosts: Post[] = [
612 { id: 1, title: "Deno 1.0 Released", url: "https://deno.land/", score: 100 },
613 { id: 2, title: "React 18 Announced", url: "https://reactjs.org/", score: 80 },
614 { id: 3, title: "Tailwind CSS v3.0", url: "https://tailwindcss.com/", score: 60 },
615 ];
764 role: "user",
765 content:
766 `For all requests below, use React and Tailwind for the frontend, and blob storage for the backend, unless otherwise specified.`,
767 },
768 {

townGenmain.tsx5 matches

@cofsana•Updated 8 months ago
12 * Sub-functionalities are now listed under the main functionality to help describe it better.
13 */
14/** @jsxImportSource https://esm.sh/react */
15import React, { useEffect, useState } from "https://esm.sh/react";
16import { createRoot } from "https://esm.sh/react-dom/client";
17
18// Simulated API for Hono and Deno features
99const npmPackages = {
100 frontend: [
101 "react",
102 "vue",
103 "angular",
180 "babylon.js",
181 "aframe",
182 "react-three-fiber",
183 "cannon-es",
184 "ammo.js",

townGenmain.tsx5 matches

@all•Updated 8 months ago
12 * Sub-functionalities are now listed under the main functionality to help describe it better.
13 */
14/** @jsxImportSource https://esm.sh/react */
15import React, { useEffect, useState } from "https://esm.sh/react";
16import { createRoot } from "https://esm.sh/react-dom/client";
17
18// Simulated API for Hono and Deno features
99const npmPackages = {
100 frontend: [
101 "react",
102 "vue",
103 "angular",
180 "babylon.js",
181 "aframe",
182 "react-three-fiber",
183 "cannon-es",
184 "ammo.js",

promptGenmain.tsx4 matches

@all•Updated 8 months ago
4 * The generated prompt is tailored to Val Town's specific features and best practices.
5 */
6/** @jsxImportSource https://esm.sh/react */
7import React, { useState } from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9
10const valTownFeatures = [
15 "Email sending",
16 "OpenAI integration",
17 "React support",
18 "TypeScript support",
19 "Deno runtime",

multirouteHonomain.tsx5 matches

@cofsana•Updated 8 months ago
1/**
2 * This val creates a simple website for Janic Business Group, a business consulting firm.
3 * It uses React for the frontend and Hono for the backend routing.
4 * The website includes a home page, about page, and services page.
5 */
6/** @jsxImportSource https://esm.sh/react */
7import React from "https://esm.sh/react";
8import { createRoot } from "https://esm.sh/react-dom/client";
9import { Hono } from "https://esm.sh/hono";
10import { jsx } from "https://esm.sh/hono/jsx";
13
14function App() {
15 const [page, setPage] = React.useState('home');
16
17 const renderPage = () => {

postmanClonemain.tsx4 matches

@maxm•Updated 8 months ago
1/**
2 * This val creates a Postman-like interface for testing HTTP requests directly in the browser.
3 * It uses React for the UI and the Fetch API to make requests.
4 * The server function serves the HTML and handles the API requests.
5 */
6
7/** @jsxImportSource https://esm.sh/react */
8import React, { useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10
11function App() {

czarkowyEdytorDatmain.tsx3 matches

@hasparus•Updated 8 months ago
6 */
7
8/** @jsxImportSource https://esm.sh/react */
9import React, { useState, useRef, useEffect } from "https://esm.sh/react";
10import { createRoot } from "https://esm.sh/react-dom/client";
11
12function App() {

resumeDetailsmain.tsx1 match

@siygle•Updated 8 months ago
107 "name": "Web Development",
108 "level": "",
109 "keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"],
110 },
111 {

marineMoccasinLizardmain.tsx6 matches

@kaz•Updated 8 months ago
1/**
2 * This app implements a "Would You Rather" game with a ranking system for answers and a progress bar.
3 * It uses React for the frontend and SQLite for persistent storage on the backend.
4 * The ranking system updates based on user choices and displays in the Answers tab.
5 * A progress bar is added to show completion of 20 questions.
6 */
7/** @jsxImportSource https://esm.sh/react */
8import React, { useCallback, useEffect, useState } from "https://esm.sh/react";
9import { createRoot } from "https://esm.sh/react-dom/client";
10import {
11 BrowserRouter as Router,
15 useLocation,
16 useNavigate,
17} from "https://esm.sh/react-router-dom";
18
19// Types
240 const [username, setUsername] = useState("");
241
242 const handleLogin = useCallback(async (e: React.FormEvent) => {
243 e.preventDefault();
244 const response = await fetch("/api/login", {

IClickWolf4 file matches

@vtTestLocal•Updated 1 day ago
Starter template with client-side React & Hono server

vt-discord4 file matches

@boucher•Updated 6 days ago
Starter template with client-side React & Hono server
effector
Write business logic with ease Meet the new standard for modern TypeScript development. Type-safe, reactive, framework-agnostic library to manage your business logic.
officialrajdeepsingh
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh