Troubleshooting Render and Export

This checklist targets the most common issues observed in Telva integrations.

Symptom: React component shape looks blank/white

1) Background contrast mismatch

React-component snapshots may be captured over a white background. If your component uses white text or low-contrast overlays, output appears blank.

Action:

• provide an explicit component background
• avoid white-on-transparent defaults for export-critical components

2) Initial animation state is hidden

Components that start with opacity: 0, heavy entrance animation, or delayed reveal can be captured before visible state.

Action:

• ensure visible default state for capture
• disable intro animations during export mode

3) Video/canvas serialization limitations

Dynamic media (video frames, WebGL canvases) can fail if not ready or not serializable at capture time.

Action:

• wait for media readiness before export
• flatten to static image with app.convertToImage() when needed

4) Registry mismatch

If ReactComponentShape.componentId does not match any ReactComponentEntry.id passed in reactComponents, the shape cannot resolve to a live component.

Action:

• validate IDs in the registry
• pass the same registry at runtime where document is opened

Symptom: Editor area is blank on mount

The parent container likely has no effective height.

Action:

<div style={{ position: 'relative', width: '100%', height: 600 }}>
  <Telva />
</div>

Symptom: Multiplayer storage grows too fast

Large base64 media payloads can flood room storage.

Action:

• enable disableAssets={true} until storage-backed URLs are implemented
• use onAssetCreate/onAssetUpload to return persistent media URLs

Symptom: Export appears different from editor view

Potential causes:

• missing web fonts at capture time
• media not loaded
• async effects not settled
• dark/light assumptions not explicit

Action:

• wait for load completion states
• keep deterministic style defaults
• test getSvg() and getImage() paths independently