Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tldraw/tldraw/llms.txt

Use this file to discover all available pages before exploring further.

You can make the tldraw editor read-only by updating the isReadonly instance state. This disables all editing functionality while keeping navigation and viewing features.

​
Implementation

ReadOnlyExample.tsx
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function ReadOnlyExample() {
  return (
    <div className="tldraw__editor">
      <Tldraw
        persistenceKey="example"
        onMount={(editor) => {
          editor.updateInstanceState({ isReadonly: true })
        }}
      />
    </div>
  )
}

​
What happens in read-only mode

When read-only mode is enabled:
  • Users cannot create, edit, or delete shapes
  • The toolbar shows only the select tool, hand tool, and laser pointer
  • Users can still pan and zoom the canvas
  • Selection is still possible (but not modification)
  • Context menus are disabled for editing actions

​
Dynamic read-only state

You can toggle read-only mode dynamically: 
import { Tldraw, useEditor } from 'tldraw'
import 'tldraw/tldraw.css'

function ReadOnlyToggle() {
  const editor = useEditor()
  const isReadonly = editor.getInstanceState().isReadonly

  return (
    <button
      onClick={() => {
        editor.updateInstanceState({ 
          isReadonly: !isReadonly 
        })
      }}
    >
      {isReadonly ? 'Enable editing' : 'Disable editing'}
    </button>
  )
}

export default function Example() {
  return (
    <div className="tldraw__editor">
      <Tldraw>
        <ReadOnlyToggle />
      </Tldraw>
    </div>
  )
}

​
Use cases

Presentations

Display diagrams and drawings without allowing modifications

Approval workflows

Show content for review before enabling editing

Public galleries

Share work publicly while preventing unwanted changes

Archive viewing

Browse historical content without risk of accidental edits

​
Conditional read-only

You might want to conditionally enable read-only mode based on user permissions: 
export default function ConditionalReadOnly({ userCanEdit }: { userCanEdit: boolean }) {
  return (
    <div className="tldraw__editor">
      <Tldraw
        onMount={(editor) => {
          editor.updateInstanceState({ 
            isReadonly: !userCanEdit 
          })
        }}
      />
    </div>
  )
}
Read-only mode is different from hiding the UI. Even with hideUi prop, users can still edit shapes. Use isReadonly to truly prevent editing.