Search

import { GGMLQuantizationType, gguf } from "https://esm.sh/@huggingface/gguf";

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

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

import { ObjectInspector } from "https://esm.sh/react-inspector";

async function fetchGgufMetadata(url: string) {

function Counter() {

const [counter, setCounter] = React.useState(0);

return (

return (

<h1>React Example</h1>

<Counter />

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

root.render(<App />);

forked from tfayyaz (thanks!)

Open https://www.val.town/v/robcobb/tldrawcanvasserver to actually view the page; this is a js script imported into that val.

Goal is do some little experiments with the tldraw client:

- a little tldraw console (like the chrome devtools, but populated with tldraw objects)

Uses a pinned older version of tldraw because the other ones seem to fail on a weird dependency issue. My guess is that the val.town bundler tricks don't work so good on transitive deps, but I don't really know.

@use-gesture/react couldn't find the right import for a call to useMemo.

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

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

import { Tldraw } from "https://esm.sh/tldraw@2.1.0";

</div>

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

root.render(<App />);

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

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

import { PDFDocument } from "https://esm.sh/pdf-lib@1.17.1";

</div>

function client() {

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

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

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

} catch (serverError) {

console.error("Server-side crop error:", serverError);

return new Response(`Error processing PDF: ${serverError.message}`, { status: 500 });

This example shows how Hono, Alpine, and Htmx can play together.

- Alpine is great at reactive client-side updates

- Htmx is great at sending/receiving content from server

- These two can be combined for reactive clients plus easy AJAX

<meta charset="UTF-8">

<title>Reactive Form with Alpine.js</title>

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

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

import DatePicker from "https://esm.sh/react-datepicker";

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

.react-datepicker {

.react-datepicker__header {

.react-datepicker__current-month {

.react-datepicker__day-names, .react-datepicker__week {

.react-datepicker__day-name, .react-datepicker__day {

.react-datepicker__day:hover {

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

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

function App() {

window.speechSynthesis.speak(utterance);

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

} catch (error) {

console.error("Detailed Server-side error:", error);

return new Response(JSON.stringify({

Shows how to get a Val Town blob and render it as an image in the DOM with React.

- The client-side React component makes a fetch request to "/image".

2. Server-side handling:

- We don't need to extract the data on the server side.

- We can directly return this Response object to the client.

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

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

function client() {

client();

Versions 18+ were generated with Townie and use client-side React.

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

import { useDropzone } from "https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0";

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

children: ReactNode;

const handleClickOutside = (event: MouseEvent) => {

document.addEventListener("mousedown", handleClickOutside);

document.removeEventListener("mousedown", handleClickOutside);

function handleClickOutside(event) {

document.addEventListener("mousedown", handleClickOutside);

import { motion } from "https://esm.sh/framer-motion@10.16.4";

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

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

* App Component

<p className="text-lg font-semibold">How to Use:</p>

<ol className="list-decimal list-inside mt-2 space-y-1 text-sm">

<li>Choose between text or image input.</li>

${isDarkMode ? "bg-gray-600 text-white border-gray-500" : "border-gray-300 text-gray-900"}

p-2 // Added padding 3 (all sides)

<div className="space-y-4">

</div>

* Client entry point

function client() {

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

document.body.appendChild(script);

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

* Server-side logic for generating prompts.

* The server expects a POST request to "/generate-prompts" with either text or image form data.

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

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

function client() {

console.log("Client function called");

console.log("Rendering React app");

console.log("React app rendered");

console.error("Error rendering React app:", error);

console.log("Document is defined, setting up client");

document.addEventListener("DOMContentLoaded", client);

Versions 18+ were generated with Townie and use client-side React.

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

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

import { useDropzone } from "https://esm.sh/react-dropzone";

children: ReactNode;

const handleClickOutside = (event: MouseEvent) => {

document.addEventListener("mousedown", handleClickOutside);

document.removeEventListener("mousedown", handleClickOutside);

function handleClickOutside(event) {

document.addEventListener("mousedown", handleClickOutside);

Shows how to get a JSON object containing a base64 imaged stored in Val Town blob storage and render it as an image in the DOM with React.

- The client-side React component makes a fetch request to "/image".

2. Server-side handling:

- We don't need to extract the data on the server side.

- We can directly return this Response object to the client.

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

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

function client() {

client();

* Note: This is a simplified version of a toll management system and does not include all features of a production-ready application.

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

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

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

import { jwtDecode } from "https://esm.sh/jwt-decode";

</div>

function client() {

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

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

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

import { AppBskyActorDefs, AppBskyFeedDefs, AtpAgent, RichText } from "https://esm.sh/@atproto/api@0.13.15";

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

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

function App() {

<div className="max-w-4xl mx-auto p-4 flex">

{/* Start menu-like sidebar */}

<div className="w-48 mr-4">

</div>

function client() {

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

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

client();

const manifest = {

short_name: "WinSky",

description: "A Windows XP-styled BlueSky client",

start_url: "/",

<meta name="theme-color" content="#3A6EA5">

<script src="https://cdn.tailwindcss.com"></script>

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 generatePDFServerSide(invoiceData, template) {

// Client Info

.text(`${invoiceData.clientInfo.name}`)

.text(`${invoiceData.clientInfo.address}`)

.text(`${invoiceData.clientInfo.email}`);

const [clientInfo, setClientInfo] = useState({

clientInfo,