Custom renderer
This example shows how you might use a custom renderer with tldraw.
import { useLayoutEffect } from 'react'
import { DefaultCanvas, Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
import { CustomRenderer } from './CustomRenderer'
export default function CustomRendererExample() {
useLayoutEffect(() => {
// Hide the regular shapes layer using CSS.
const script = document.createElement('style')
if (!script) return
script.innerHTML = `.tl-shapes { display: none; }`
document.body.appendChild(script)
return () => {
script.remove()
}
})
return (
<div className="tldraw__editor">
<Tldraw
persistenceKey="example"
components={{
// We're replacing the Background component with our custom renderer
Background: CustomRenderer,
// Even though we're hiding the shapes, we'll still do a bunch of work
// in react to figure out which shapes to create. In reality, you might
// want to set the Canvas component to null and render it all yourself.
Canvas: DefaultCanvas,
}}
/>
</div>
)
}
Is this page helpful?
Prev
Tldraw componentNext
Static assets