Embed the editor

component · /editor

ModelLabEditor is the complete authoring surface.

Basic embedding

import { ModelLabEditor } from '@taranjeetsinghh/model-lab/editor'
import '@taranjeetsinghh/model-lab/styles.css'

export function AssetStudio() {
  return (
    <main style={{ height: '100vh' }}>
      <ModelLabEditor
        dracoDecoderPath="/draco/"
        onModelLoaded={(info) => console.log(info.stats)}
      />
    </main>
  )
}

Controlled integration

Use the editor callbacks to persist working state in an application store:

<ModelLabEditor
  initialConfig={savedDraft}
  onConfigChange={(config) => saveDraft(config)}
  onSequenceChange={(sequence) => saveTimeline(sequence)}
/>

Load files programmatically

const editorRef = useRef<ModelLabEditorHandle>(null)

<input
  type="file"
  multiple
  onChange={(event) => {
    const files = Array.from(event.currentTarget.files ?? [])
    editorRef.current?.loadFiles(files)
  }}
/>

<ModelLabEditor ref={editorRef} />

Read the export without downloading

const preset = editorRef.current?.getPreset()
await savePresetToDatabase(preset)

Privacy model

Local model files are read by the browser and mapped to object URLs. The editor does not require uploading them to a server. Your host application remains responsible for any persistence or network behavior it adds.