Search

gregariousCrimsonFlamingo

@Saadaap

2الخدمات عند النقرعليها تفتح صفحه مكونه من ناف بار فيه فورم للبحث و زر لتحديث الصفحه وزرللعوده للرئيسيه 1كبينة التسديدات 2كبينة ارسال سندالايداع 3كبينة الشرائح والتفعيل 4كبينةتحويل من شخص لشخص 5كبينة ادارة العملاء 6كبينة فواتيرالكهرباء 7كبينة تغذية حسابي 8كبينة اعدادات الحساب 9كبينة شحن برامج التواصل 10كبينة معرض الالعاب 1 1كبينة التواصل مع الاداره 12كبينة بنك البطائق

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

import { BrowserRouter, Routes, Route, Link, useNavigate } from "https://esm.sh/react-router-dom@6.22.3";

const COLORS = {

</div>

function client() {

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

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

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

htmxGenFormsExample

@yawnxyz

An interactive, runnable TypeScript val by yawnxyz

HTTP

/** @jsx jsx **/

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

dns_record_debugger

@stevekrouse

Proxied Web Browser – DNS Debugger Proxied web browser for debugging new DNS records It's difficult to verify new DNS records. If you check too early, the old records may get cached on your computer, browser, or local network. This tool uses a proxied fetch so you can always view your web page uncached. Uses @std/fetch on the backend to ensure the DNS records of the request are from new places every request. Version 4 of this val also showed DNS records, pulled on the server, but I removed that featured, because those records are likely subject to caching. It'd be an improvement to this tool if we could add an uncached DNS check in here. In a couple min I wasn't able to find a free DNS checker API. Pull requests welcome!

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

const [content, setContent] = useState("");

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

weatherFirstWorldCountries

@testingvaltown

Weather for all first-world countries.

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

// List of first-world countries with their capital city coordinates

</div>

function client() {

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

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

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

buildWebsite

@abidiqrar

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

const COLORS = {

{ name: "Cool Web App", tech: "React, TypeScript", emoji: "💡" },

{ name: "Mobile Game", tech: "Unity, C#", emoji: "🎮" },

</div>

function client() {

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

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

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

WhyUseCreativeFabrica

@richi1969

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

const reviews = [

</div>

function client() {

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

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

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

imageGen

@muhammad_owais_warsi

Real-Time Image generator A real time image generator. Type your prompts and get beautiful images in real time.

HTTP

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

import debounce from "https://esm.sh/lodash.debounce@4.0.8";

import ReactDOM from "https://esm.sh/react-dom@18.2.0";

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

function App() {

</div>

function client() {

const root = document.getElementById("root");

if (root) {

ReactDOM.createRoot(root).render(

<React.StrictMode>

<App />

</React.StrictMode>,

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

client();

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

calmRoseCaterpillar

@hameed

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

HTTP

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

import mermaid from "https://esm.sh/mermaid@10.6.1";

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

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

// Spinner Component

}, [mermaidDiagram]);

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

e.preventDefault();

fontSize: '0.9rem',

function client() {

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

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

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

reactSSRExample

@jonbo

An interactive, runnable TypeScript val by jonbo

Express (deprecated)

export const reactSSRExample = async (req: express.Request, res: express.Response) => {

// Import React

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

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

return React.createElement("span", null, "southbound in 5 minutes");

return React.createElement(

return React.createElement(BikeLocation, {

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

const html = ReactDOMServer.renderToString(

React.createElement(

pr0n

@roramigator

@jsxImportSource https://esm.sh/react

HTTP

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

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

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

import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";

</div>

function client() {

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

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

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

dragAndCopyViewer

@arfan

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

HTTP

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

import Prism from "https://esm.sh/prismjs@1.29.0?no-check";

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

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

import "https://esm.sh/prismjs@1.29.0/components/prism-python?no-check";

</div>

function client() {

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

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

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

Wilayatway

@sajidhussain

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

const SufismContent = {

textDecoration: 'none'

function client() {

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

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

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

tokencounter

@prashamtrivedi

@jsxImportSource https://esm.sh/react

HTTP

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

import { GoogleGenerativeAI } from "https://esm.sh/@google/generative-ai";

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

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

survivalRPGAdventure

@ayeh

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

const initialState = {

</div>

function client() {

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

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

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

windowsXpSimulator

@xpapla

// This approach creates a Windows 98-style simulator using React for the UI and CSS for styling.

HTTP

// This approach creates a Windows 98-style simulator using React for the UI and CSS for styling.

/** @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 = windowRef.current.getBoundingClientRect();

x: e.clientX - rect.left,

y: e.clientY - rect.top

x: e.clientX - dragOffset.x,

y: e.clientY - dragOffset.y

function client() {

…

23 24

26 27

…

250