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.
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
1/** @jsxImportSource https://esm.sh/react */
2import React from 'https://esm.sh/react'
3
4export function ClientOnly({ children, ...delegated }) {
5 const [hasMounted, setHasMounted] = React.useState(false)
6 React.useEffect(() => {
7 setHasMounted(true)
8 }, [])
1/** @jsxImportSource https://esm.sh/preact */
2import { isEmoji } from "https://esm.town/v/karkowg/emojis";
3import { html } from "https://esm.town/v/stevekrouse/html?v=5";
4import { render } from "npm:preact-render-to-string";
5
6function FavIcon({ emoji }: { emoji: string }) {
1/** @jsxImportSource https://esm.sh/react */
2import { blob } from "https://esm.town/v/std/blob?v=12";
3import { today } from "https://esm.town/v/stevekrouse/today";
4import { renderToString } from "npm:react-dom/server";
5import { Sparklines, SparklinesLine } from "npm:react-sparklines";
6
7export const sparklineEx = async (req: Request) => {
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import valleGetValsContextWindow from "https://esm.town/v/janpaul123/valleGetValsContextWindow";
3import archiveVal from "https://esm.town/v/nbbaier/archiveVal?v=10";
9import _ from "npm:lodash@4";
10import OpenAI from "npm:openai";
11import { renderToString } from "npm:react-dom/server";
12
13// Set these to your own
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
