Inset editor (fixed sizes)
See how the default UI adapts when the Tldraw component is given a fixed width and height.
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function InlineExample() {
return (
<>
<InlineEditor width={400} height={300} />
<InlineEditor width={500} height={300} />
<InlineEditor width={600} height={400} />
<InlineEditor width={700} height={500} />
<InlineEditor width={900} height={600} />
</>
)
}
function InlineEditor({ width, height }: { width: number; height: number }) {
const title = `${width} x ${height}`
return (
<section style={{ padding: '12px 32px' }}>
<h2>{title}</h2>
<div style={{ width, height }}>
<Tldraw persistenceKey="inset-size-example" />
</div>
</section>
)
}
The Tldraw component fills whatever container it's placed in. This example renders the same document (via a shared persistenceKey) in five containers of different fixed sizes, so you can see how the default toolbar, menus, and panels rearrange themselves as the available space shrinks.
For guidance on focus handling and UI trimming when embedding several editors in a page, see the Inset editor (common practices) example.
Is this page helpful?
Prev
Inset editorNext
Inset editor (common practices)