Search

czarkowyEdytorDat

@hasparus

* This app allows users to drop an image onto the canvas, add text to it, move the text around, * edit the text directly on the canvas, and save the result to their local disk. * We'll use the HTML5 Canvas API for image manipulation and the File System Access API for saving files.

HTTP

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

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

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

const rect = canvas.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const rect = canvas.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

function client() {

notUberFolder

@vawogbemi

@jsxImportSource https://esm.sh/react

HTTP

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

import React 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> {

onlineGamesAPK

@nauss21

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

const GAMES = [

</div>

function client() {

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

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

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

specialBlackMosquito

@lost1991

https://neimver666-flourishingbeigerhinoceros.web.val.run

HTTP

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

import React 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> {

ALPHANUMERIC_TEXT_TOO_LONG

@roysarajit143

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

HTTP

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

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

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

function App() {

const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async (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> {

ddg_chat

@kauri

Simple AI chat app with markdown reneder utilizing DuckDuckGo Chat API

HTTP

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

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

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

import ReactMarkdown from "https://esm.sh/react-markdown@9.0.1";

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

import { oneDark } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism";

<ReactMarkdown

</ReactMarkdown>

function client() {

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

solarsystem

@tk120404

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import * as THREE from "https://esm.sh/three";

return <div ref={mountRef}></div>;

function client() {

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

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

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

WhyAmITired

@saleh

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

import confetti from "https://esm.sh/canvas-confetti@1.6.0";

</div>

function client() {

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

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

client();

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

instantCursorsDemo

@vawogbemi

@jsxImportSource https://esm.sh/react

HTTP

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

import { Cursors, init } from "https://esm.sh/@instantdb/react";

import React from "https://esm.sh/react";

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

function InstantCursors() {

</div>

function client() {

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

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

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

solanaPayDemo

@juansebsol

Solana Pay Demo A fork of solana-pay-qrcode-generator

HTTP

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

import {

import BigNumber from "https://esm.sh/bignumber.js";

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

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

function Home() {

</div>

function client() {

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

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

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

instantdbCursorsDemo

@vawogbemi

@jsxImportSource https://esm.sh/react

HTTP

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

import { Cursors, init } from "https://esm.sh/@instantdb/react?bundle-deps";

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

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

const cursorsClassNames =

</div>

function client() {

createRoot(document.getElementById("root")).render(

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

client();

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

chatApp

@Nil1990

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

Script

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

</div>

function client() {

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

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

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

brooklynWeatherFetcher

@jjoak3

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

return <WeatherApp />;

function client() {

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

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

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

AICodeGeneratorApp

@mrshorts

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

// Main App Component

role: "system",

content: "Generate a basic React TypeScript web app structure with key components based on the app concept. Inc

role: "user",

content: `Create a basic React TypeScript web app for this concept: ${conceptCompletion.choices[0].message.cont

max_tokens: 500

content: `

// Fallback React TypeScript App Structure

import React, { useState } from 'react';

function App() {

</div>

function client() {

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

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

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

clientOnly

@aretrace

thx Joshua Comeau!

Script

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

import React from 'https://esm.sh/react'

export function ClientOnly({ children, ...delegated }) {

const [hasMounted, setHasMounted] = React.useState(false)

React.useEffect(() => {

setHasMounted(true)

…

19 20

22 23

…

250