Layouts
The preview and the editor controls are separate views, so you decide how much of the editor your screen shows.
Full editor Stable
The preview plus the editor controls: transport row, timeline, tool bar and panels. This is what the platform guides set up.
Timeline only Stable
Hide the transport row and the tool bar to keep just the timeline, for example when your app has its own toolbar:
| Platform | |
|---|---|
| iOS | dock.timeline?.setChrome(visible: false) |
| Android | dock.timeline?.setChrome(false) |
| React Native | <NitrakitEditor chrome={false} /> |
| Web | chrome: false option, or editor.setChrome(false) |
Your controls then drive the editor through the editing API and playback calls.
Preview only Stable
Show just the preview, with your own controls on top: a simple trimmer, a template filler, or
a caption editor. Users can still select and move layers on the preview; turn that off with
canvas={false} in React Native.
Phone and desktop Stable
On phones the timeline keeps the playhead fixed in the middle. On the web, a wide editor
switches to a desktop timeline: a free playhead, and clips you drag with the mouse. The
editor picks by width; set layout: 'desktop' or 'phone' to choose.
Fullscreen preview Stable
The transport row has a fullscreen button. On iOS, Android and React Native it calls
onFullscreen, so you can show the preview fullscreen in your own way. On the web it makes
the preview element fullscreen unless you handle onFullscreen.