Tools and menus Stable

The tool bar at the bottom of the editor changes with the selection: one bar when nothing is selected, another for a video clip, a text clip and so on. You can remove the tools you don't offer and add your own.

Remove tools

Hide built-in tools by id. Hiding a tool removes it from every bar it appears in; hiding a panel tab (such as mask) removes that tab, and a panel with no tabs left disappears.

iOS

dock.hideMenuItems(["sticker", "mask", "voice"])

Android

dock.hideMenuItems(listOf("sticker", "mask", "voice"))

React Native

<NitrakitEditor editor={editor} hiddenMenuItems={['sticker', 'mask', 'voice']} />

Web

editor.hideMenuItems(['sticker', 'mask', 'voice'])

Each call replaces the previous list.

Add your own tools

Add a tool to any bar: it shows with your label and icon, and a tap tells your app its id. Use it for what your app does around the edit: share, save as a template, generate captions with your service, open your help.

iOS

dock.addMenuItem(EditorMenuItem(id: "share", label: "Share", icon: "share", menu: .root))
dock.setIcon("share", svg: shareIconSVG)
dock.onCustomItem = { id in
    if id == "share" { presentShareSheet() }
}

Android

dock.addMenuItem(EditorMenuItem("share", "Share", EditorMenuItem.Menu.ROOT, icon = "share"))
dock.setIcon("share", shareIconSvg)
dock.onCustomItem = { id -> if (id == "share") openShareSheet() }

React Native

<NitrakitEditor
  editor={editor}
  menuItems={[{ id: 'share', label: 'Share', icon: 'share', menu: 'root' }]}
  icons={{ share: shareIconSvg }}
  onCustomItem={(id) => id === 'share' && openShareSheet()}
/>

Web

const editor = await createEditor({
  // …
  menuItems: [{ id: 'share', label: 'Share', icon: 'share', menu: 'root' }],
  icons: { share: shareIconSvg },
  onCustomItem: (id) => id === 'share' && openShareDialog(),
})

Field
id	Your id; it comes back when the tool is tapped. Adding a tool with the same id replaces it.
label	Shown under the icon, as written (it isn't translated).
menu	The bar: root (nothing selected), video, image, sticker, text, audio, effects or solid.
icon	A built-in icon name, or one you set with setIcon.
after	The id of the tool it follows; at the end when unset.

To act on the selected clip, read the selection when the tool is tapped (selectedClips() on iOS, Android and React Native; selectedClip on the web).

Built-in tools

Ids are shared between bars: delete is the same tool on every clip's bar, so hiding it hides it everywhere. That includes audio and effects, which are both an "add" tool on the root bar and a panel on clips' bars: hiding audio removes both. Panels list their tabs after a colon.

Bar	Tools
root	media, text, overlay, audio, sticker, effects
video	split, edit: transform crop flip opacity mask; effects: looks adjust fx; animation: in out loop; speed; audio: volume voice audio_fx; duplicate, delete
image, sticker	split, edit (as video), effects, animation, duplicate, delete
text	edit_text, font, style: presets color background box; animation: in out loop captions; effects; edit: transform opacity; split, duplicate, delete
audio	split, audio: volume voice audio_fx; speed, duplicate, delete
effects	split, effects: looks adjust fx audio_fx; edit, duplicate, delete
solid	split, edit: color transform crop opacity mask; effects, animation, duplicate, delete

Preview New tools can appear in later releases. If your app must show an exact set, check the bars when you upgrade.