Tldraw Gallery¶
Welcome! This Gallery will give you an overview of the tldraw-v1 api.
Basic Shapes¶
%load_ext ipyreact
Show code cell source
%%react
import * as React from "react";
import { Tldraw } from "@tldraw/tldraw";
export default function App() {
return (
<div
style={{
position: "relative",
width: "700px",
height: "300px",
}}
>
<Tldraw />
</div>
);
}
Text¶
Show code cell source
%%react
import { TDShapeType, Tldraw } from '@tldraw/tldraw'
import * as React from 'react'
export default function App() {
const handleMount = React.useCallback((app: Tldraw) => {
app
.createShapes({
id: 'text1',
type: TDShapeType.Text,
point: [200, 200],
text: "This is Tldrawesome!!🎉",
color: "blue",
})
})
return (
<div
style={{
position: "relative",
width: "800px",
height: "350px"
}}
>
<Tldraw onMount={handleMount} />
</div>
)
}
Image¶
Show code cell source
%%react
import * as React from "react";
import { TDAssetType, TDShapeType, Tldraw, TldrawApp } from "@tldraw/tldraw";
export default function App() {
const handleMount = (app: TldrawApp) => {
// You can use the app API here! e.g. app.selectAll()
app.patchAssets({
myAssetId: {
id: "myAssetId",
type: TDAssetType.Image,
fileName: "card-repo.png",
src: "https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png"
}
});
app.createShapes({
id: "myImage",
type: TDShapeType.Image,
assetId: "myAssetId",
point: [64, 64],
size: [400, 340]
});
};
return (
<div
style={{
position: "relative",
width: "800px",
height: "350px"
}}
>
<Tldraw onMount={handleMount} />
</div>
)
}
SVG¶
Show code cell source
%%react
import * as React from "react";
import { TDAssetType, TDShapeType, Tldraw, TldrawApp } from "@tldraw/tldraw";
export default function App() {
const handleMount = (app: TldrawApp) => {
const someSvgString = `<svg width="120" height="120" viewBox="0 0 240 320" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z" fill="#FFF9F2" stroke="#FFC681"/>
<path d="M160.5 1.20711L238.793 79.5H172C165.649 79.5 160.5 74.3513 160.5 68V1.20711Z" fill="#FFF9F2" stroke="#FFC681"/>
<path d="M68.8438 244.072C69.1738 250.699 74.7344 254.914 83.1387 254.914C92.0254 254.914 97.5352 250.496 97.5352 243.387C97.5352 237.826 94.4121 234.729 86.9727 233.027L82.7578 232.062C78.2129 230.996 76.3594 229.549 76.3594 227.035C76.3594 223.861 79.1523 221.779 83.3672 221.779C87.3789 221.779 90.2227 223.836 90.6797 227.111H96.9512C96.6465 220.84 91.0859 216.447 83.3926 216.447C75.1914 216.447 69.7578 220.865 69.7578 227.467C69.7578 232.9 72.8809 236.176 79.5332 237.699L84.2812 238.791C88.9785 239.883 90.9844 241.508 90.9844 244.174C90.9844 247.297 87.8613 249.557 83.5449 249.557C78.8984 249.557 75.6484 247.424 75.2422 244.072H68.8438Z" fill="#FF8C02"/>
<path d="M121.59 254L134.26 217.361H127.278L118.137 246.51H117.705L108.489 217.361H101.252L114.049 254H121.59Z" fill="#FF8C02"/>
<path d="M170.731 239.375V234.805H155.522V239.807H164.333L164.307 240.568C164.206 245.748 160.397 249.227 154.811 249.227C148.286 249.227 144.198 244.047 144.198 235.617C144.198 227.314 148.21 222.135 154.608 222.135C159.305 222.135 162.581 224.471 163.901 228.711H170.426C169.258 221.246 163.063 216.447 154.608 216.447C144.173 216.447 137.495 223.938 137.495 235.668C137.495 247.525 144.096 254.914 154.71 254.914C164.485 254.914 170.731 248.846 170.731 239.375Z" fill="#FF8C02"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z" fill="#FFC681"/>
</svg>`
app.patchAssets({
myAssetId: {
id: "myAssetId",
type: TDAssetType.Image,
fileName: "myImage.svg",
src: `data:image/svg+xml,${encodeURIComponent(someSvgString)}`
}
});
app.createShapes({
id: "mySvg",
type: TDShapeType.Image,
assetId: "myAssetId",
point: [164, 64],
size: [200, 200]
});
};
return (
<div
style={{
position: "relative",
width: "800px",
height: "350px"
}}
>
<Tldraw onMount={handleMount} />
</div>
);
}
Rectangle¶
Show code cell source
%%react
import { TDShapeType, Tldraw } from "@tldraw/tldraw";
import * as React from "react";
export default function App() {
const handleMount = React.useCallback((app: Tldraw) => {
app.createShapes({
id: "rect1",
type: TDShapeType.Rectangle,
point: [100, 100],
size: [400, 200],
});
});
return (
<div
style={{
position: "relative",
width: "600px",
height: "400px",
}}
>
<Tldraw onMount={handleMount} />
</div>
);
}
Triangle¶
Show code cell source
%%react
import { TDShapeType, Tldraw } from "@tldraw/tldraw";
import * as React from "react";
export default function App() {
const handleMount = React.useCallback((app: Tldraw) => {
app.createShapes({
id: "rect1",
type: TDShapeType.Triangle,
point: [100, 100],
size: [400, 200],
});
});
return (
<div
style={{
position: "relative",
width: "600px",
height: "400px",
}}
>
<Tldraw onMount={handleMount} />
</div>
);
}
Locked Object¶
Show code cell source
%%react
import { TDShapeType, Tldraw } from "@tldraw/tldraw";
import * as React from "react";
export default function App() {
const handleMount = React.useCallback((app: Tldraw) => {
app.createShapes({
id: "rect1",
type: TDShapeType.Triangle,
point: [100, 100],
size: [400, 200],
isLocked: true
});
});
return (
<div
style={{
position: "relative",
width: "600px",
height: "400px",
}}
>
<Tldraw onMount={handleMount} />
</div>
);
}
The UI¶
Some examples how to show and Hide UI elements.
Show code cell source
%%react
import * as React from "react";
import { Tldraw } from "@tldraw/tldraw";
export default function App() {
return (
<div
style={{
position: "relative",
width: "700px",
height: "300px",
}}
>
<Tldraw
showUI={true}
showStyles={false}
showTools={false}
showZoom={false}
showPages={false}
showMenu={false}/>
</div>
);
}
Tracing a Stroke to the console¶
You need to select the “Draw” option for this, open the console to see how many points have been drawn!
Show code cell source
%%react
import { TDShapeType, Tldraw } from "@tldraw/tldraw";
import * as React from "react";
export default function App() {
const handleChange = (e) => {
let my_current_stroke = e.selectedIds[0];
let my_object = e.getShape(my_current_stroke);
if (my_object === undefined) {
console.log("no object selected");
}
if (my_object !== undefined) {
let my_points = my_object.points;
if (my_points !== undefined){
console.log(my_points.length);
}
}
};
return (
<div
style={{
position: "relative",
width: "800px",
height: "350px",
}}
>
<Tldraw onChange={handleChange} />
</div>
);
}
Another example¶
Lalalala
in detail¶
blalabla