1/** @jsxImportSource npm:react */
2import CodeIcon from "https://esm.town/v/jxnblk/codeIconReact";
3import Logo from "https://esm.town/v/jxnblk/valTownLogotypeReact";
4import { renderToStaticMarkup } from "npm:react-dom/server";
5
6const width = 160;
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
3
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
3 `<html>
4 <head>
5 <title>TLDraw React Example</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
7 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap"/>
11 <body>
12 <div id="root"></div>
13 <script type="module" src="https://esm.town/v/janpaul123/reacttldrawclient"></script/>
14 </body>
15 </html>`,
1/** @jsxImportSource https://esm.sh/react@18.3.1 **/
2import build from "https://esm.sh/build";
3
4const ret = await build({
5 dependencies: {
6 "react-dom": "18.3.1",
7 "react": "18.3.1",
8 "tldraw": "2.3.0",
9 },
10 source: `
11 export * as ReactDOM from "react-dom";
12 export * as React from "react";
13 export * as tldraw from "tldraw"
14 `,
15});
16const {
17 ReactDOM,
18 React,
19 tldraw,
20} = await import(ret.url + "?bundle-deps");
24 <>
25 <div style={{ position: "absolute", inset: 0 }}>
26 <tldraw.Tldraw persistenceKey="valtown_reacttldrawclient" cameraOptions={{ wheelBehavior: "zoom" }} />
27 </div>
28 </>
31
32// The app will be rendered inside the root div
33const root = ReactDOM.createRoot(document.getElementById("root"));
34root.render(<App />);
1tldraw example with builder, for consistent React versions.
1tldraw example with builder, for consistent React versions.
Starter template with client-side React & Hono server
Starter template with client-side React & Hono server
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
