---
title: "Find your way around the editor"
canonical_url: https://docs.zvid.io/docs/editor/workspace/
source: docs/editor/workspace.md
content_revision: 5e30c731f37d8167
---

# Find your way around the editor

<span id="editor-workspace" />

Use the workspace to add content, select what you want to change, and inspect the result on the stage. Open the [Zvid editor](https://editor.zvid.io) to follow along.

## Before you begin

Have a video or image project open. You can explore the tools and edit locally without signing in. Sign in for cloud saving, account uploads, saved designs, and rendering. Save or export your current project before loading an example or starting another composition.

## Workspace map

[![Northstar Coffee desktop workspace showing both toolbar rows, the image inspector, stage controls, timeline, and account avatar at the upper right.](https://cdn.zvid.io/library/docs/editor-guide/desktop-workspace-controls.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-workspace-controls.png)

| Area              | What it does                                                                                                | Next guide                                                           |
| ----------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| Top bar           | Names the project and provides project settings, editing actions, **Save**, **Render**, and **Export**.     | [Project settings](https://docs.zvid.io/docs/editor/project-settings/)                            |
| Tool rail         | Opens media, text, design, shape, scene, subtitle, and variable tools.                                      | [Add content](#choose-a-tool)                                        |
| Shared tool panel | Shows the chosen library or the selected item's properties.                                                 | [Selection and properties](#switch-between-a-library-and-properties) |
| Stage             | Displays the composition; select, move, resize, and rotate visual elements here.                            | [Canvas and positioning](https://docs.zvid.io/docs/editor/canvas/)                                |
| Timeline          | Arranges a video's visual and audio clips over time and provides playback controls.                         | [Timeline and timing](https://docs.zvid.io/docs/editor/timeline/)                                 |
| Account menu      | The round initials avatar at the far upper right opens **My projects**, **Save as template**, **Open dashboard**, community, and sign-out actions. | [Projects](https://docs.zvid.io/docs/editor/projects/) and [templates](https://docs.zvid.io/docs/editor/templates/)            |

The stage is the main composition preview. The tool named **Canvas** in the rail is a library of code-driven graphic presets; it does not open project dimensions or stage positioning controls.

On desktop, **New**, **Import**, **Save**, **Render**, and **Export** are labeled buttons in the upper toolbar. The second row contains the resolution preset, dimensions, **Project:** duration control, **fps**, background-color swatch, and output format. There is no desktop **Project settings** gear or **More editor actions** button.

The small buttons between **Learn** and **Discord** have these visible symbols:

| Symbol | Action |
| --- | --- |
| Curved arrow pointing left | **Undo** |
| Curved arrow pointing right | **Redo** |
| Sun | Change the theme |
| Keyboard | **Keyboard shortcuts** |
| Compass inside a circle | **Product tour** |
| **i** inside a circle | **Help** |

[![Desktop upper toolbar with the utility icons between Learn and Discord, labeled project actions, and the round account avatar.](https://cdn.zvid.io/library/docs/editor-guide/desktop-toolbar.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-toolbar.png)

## Switch between a library and properties

1. Click an image, text element, or other visual on the canvas to open its settings in the left panel.
2. Use the inspector tabs to make the change you need.
3. To browse content again, click the left-pointing chevron at the top-left of the inspector, beside the element's type and name (**Back to library**). The trash-can button at the opposite end of that header deletes the selected element.

[![Selected coffee image on the canvas with its Source settings in the left inspector, Design, Timing, Effects, and JSON tabs above them, and the timeline below.](https://cdn.zvid.io/library/docs/editor-guide/desktop-selected-image.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-selected-image.png)

> **On a phone or narrow window**
Tap an element on the canvas to open its editing controls in the bottom **Properties** sheet. Tap **Done** at its upper right to return to the canvas. The back chevron and trash-can button remain at opposite ends of the element header.

[![Mobile editor with the selected image's Properties sheet open and Done at its upper right.](https://cdn.zvid.io/library/docs/editor-guide/mobile-image-properties.png)](https://cdn.zvid.io/library/docs/editor-guide/mobile-image-properties.png)

**Expected result:** the panel changes from content choices to settings for the selected item. The label at the top identifies the type, such as **Text element**, **SVG graphic**, or **AUDIO**. The stage and timeline still show the same project.

With a tool panel open, click uncovered background inside the output frame to open **PROJECT** properties. The checkerboard outside the frame does not open them, and a visual covering the full frame blocks this route. Escape returns to the library instead. Project properties affect the whole composition; select an element again to return to its properties. Audio and scenes have dedicated settings; selecting a caption takes you to the **Subtitles** panel.

> **On a phone or narrow window**
Open **Text** for a video or **Layers** for an image, then tap uncovered output-frame background above the sheet. The bottom **Properties** sheet changes to **PROJECT**. Tap **Done** at the upper right to close it. See [project settings](https://docs.zvid.io/docs/editor/project-settings/#how-to-set-a-video-thumbnail) for the thumbnail controls and [image projects](https://docs.zvid.io/docs/editor/image-projects/#how-to-capture-an-animated-design-as-a-still) for snapshot time.

### Visual element inspector

| Tab         | Use it for                                                                              | Availability                                                                                                   |
| ----------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| **Design**  | Content, source media, typography, size, position, rotation, and other layout settings. | Visual elements; controls depend on the selected type. Image-project template conditions also live here.       |
| **Timing**  | Visible interval, animation boundaries, video source trim, and template conditions.     | Video projects only.                                                                                           |
| **Effects** | Enter/exit effects, video transitions, color filters, or custom animation code.         | Contents depend on the element and project type. Image projects omit timed enter/exit effects.                 |
| **JSON**    | The selected element's raw configuration, including fields without a dedicated control. | Visual elements; use **Apply** to validate and commit the edit, or **Revert** to discard the uncommitted text. |

Dialogs such as Design Studio require **Insert element** or **Update element**. The **JSON** tab has its own **Apply** action. Use project **Undo** for an applied local composition change; **Revert** in the JSON tab only discards that tab's pending edit.

## Choose a tool

| Tool                                        | What to add or manage                                                                                                                                                                     |
| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Images**, **Videos**, **Audio**, **GIFs** | Use uploads, a source URL, or the stock choices supported by that media type. See [media and uploads](https://docs.zvid.io/docs/editor/media/) and [Zvid's stock library](https://docs.zvid.io/docs/editor/stock-library/).                         |
| **Text**                                    | Insert a heading, subheading, body text, or caption-sized text element. See [text](https://docs.zvid.io/docs/editor/text/).                                                                                            |
| **Design**                                  | Build layered graphics in Design Studio or reuse **Your designs**. See [Design Studio](https://docs.zvid.io/docs/editor/text-and-design/).                                                                             |
| **Shape**                                   | Add shapes, icons, or SVG graphics. See [shapes and SVG](https://docs.zvid.io/docs/editor/shapes/).                                                                                                                    |
| **Canvas**                                  | Insert animated full-frame code presets; advanced edits are under **Effects → Animation code (customCode)**. See [custom motion](https://docs.zvid.io/docs/editor/animations/#how-to-create-layered-or-custom-motion). |
| **Scenes**                                  | Organize local timelines and access **Global overlays**. See [scenes](https://docs.zvid.io/docs/editor/scenes/).                                                                                                       |
| **Subtitles**                               | Import captions, edit word timings, and style the subtitle track. See [subtitles](https://docs.zvid.io/docs/editor/subtitles/).                                                                                        |
| **Variables**                               | Define defaults, bind changing content, and preview template values. See [variables and templates](https://docs.zvid.io/docs/editor/templates/).                                                                       |
| **Layers**                                  | Select and reorder static image-project elements. See [image projects](https://docs.zvid.io/docs/editor/image-projects/).                                                                                              |

Click an open tool again to collapse its panel. Some libraries load more choices as you scroll. If a library shows an error, use its **Retry** action where available before inserting another item.

> **On a phone or narrow window**

### Work on a compact screen

The tool rail becomes a horizontally scrolling strip at the bottom. Swipe sideways to reach more tools, then tap the tool you need. Tap **Done** at the upper right of an open panel to return to the stage.

Secondary project actions move to the vertical three-dot button (**⋮**) at the left of the second toolbar row. This is **More editor actions**; it contains **Undo**, **Redo**, theme, **Shortcuts**, **Product tour**, **Help**, **Discord**, **Examples**, **New**, and **Import**. The adjacent gear opens **Project settings**. **Save** remains beside **Render**, shown as a floppy-disk icon.

[![Narrow editor workspace with the top toolbar's vertical three-dot menu open, revealing project and help actions.](https://cdn.zvid.io/library/docs/editor-guide/mobile-actions.png)](https://cdn.zvid.io/library/docs/editor-guide/mobile-actions.png)

## Video and image workspaces

A video project has a timeline, frame rate, duration, video/audio/GIF tools, scenes, and subtitles. An image project shows **Layers**, hides those time-based tools, and has no **Timing** tab or playback timeline. Image output formats are **png**, **jpg**, and **webp**. A changing toolbar can therefore indicate a different project type, rather than a missing feature.

Use **New → Video project** or **New → Image project** to start the intended type. **New** replaces the working document; save or download its JSON first. Follow the [first-video quickstart](https://docs.zvid.io/docs/editor/quickstart/) or [image-project guide](https://docs.zvid.io/docs/editor/image-projects/) for the complete workflow.

To fit the composition in the stage, click the zoom percentage between the minus and plus buttons at the right edge below the canvas. These controls change your view, not the output resolution or element position. For exact placement, use numeric **Design → Layout** controls.

## Learn, take the tour, or get help

### Watch the editor tutorial

1. Click **Learn** in the upper toolbar to show **Learn the editor**.
2. Select **Watch tutorial** to play **Build a Product Hero**.
3. Use **Jump to a topic** to start a chapter, such as scenes, music, variables, or saving and rendering.
4. Close the dialog to return to the project. The composition stays open while you watch.

If embedded playback does not load, choose **Watch on YouTube**. The tutorial also offers **Read the docs**. Watching a tutorial does not create or render a project for you.

### Replay the product tour

Click the compass-in-a-circle button in the upper toolbar, between the keyboard and **i** buttons, to open **Product tour**.

Use **Next** and **Back** to move between the highlighted workspace areas. **Skip tour** or Escape closes the tour; **Start editing** finishes the last step. Right/left arrow keys move between steps. The tour skips the timeline step in image projects and can be replayed from **Product tour**.

> **On a phone or narrow window**
Open the vertical three-dot button (**⋮**) at the left of the second toolbar row, then **Product tour**.

### Find shortcuts and support

Click the keyboard-symbol button in the upper toolbar, between the sun and compass buttons, for **Keyboard shortcuts**. To use `?`, leave input fields and clear any editable text selection first; printable keys can start typing into selected text. Shortcuts that edit the composition do not override normal typing inside a text field. See the [shortcut guide](https://docs.zvid.io/docs/editor/shortcuts/) for platform-specific keys and selection behavior.

Click the **i**-in-a-circle button between the compass and **Discord** buttons, then **Chat with support**, for in-editor support. If chat cannot open, the Help dialog reports it and retains the contact link. Contact Zvid at <a href="https://zvid.io/contact" target="_blank" rel="noopener noreferrer">https://zvid.io/contact</a>.

> **On a phone or narrow window**
Open the top toolbar's vertical three-dot button (**⋮**), then choose **Shortcuts** or **Help**.

## Troubleshooting

| Symptom                                             | Likely cause                                                                    | Remedy                                                                                       |
| --------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| The panel shows a library instead of settings.      | The element's properties are not open.                                                | Click the element on the canvas to open its settings.                               |
| The properties affect the whole project.            | No element is selected.                                                         | Select the intended visual and check the inspector's type label.                             |
| Videos, Audio, Scenes, or the timeline are missing. | The project is an image project.                                                | Use the image tools, or save this work before starting a video project.                      |
| Dragging moves the view instead of the element.     | **Pan** is enabled.                                                      | Turn off **Pan** at the left below the stage before selecting and dragging.                                       |
| JSON edits do not appear on the stage.              | They have not been applied or fail validation.                                  | Click **Apply** and correct the displayed error; use **Revert** to discard the pending edit. |

## Related documentation

- [Create your first video](https://docs.zvid.io/docs/editor/quickstart/)
- [Project settings](https://docs.zvid.io/docs/editor/project-settings/)
- [Save, open, and import projects](https://docs.zvid.io/docs/editor/projects/)
- [Preview](https://docs.zvid.io/docs/editor/preview/) and [rendering](https://docs.zvid.io/docs/editor/export/)
- [Troubleshooting and limitations](https://docs.zvid.io/docs/editor/troubleshooting/)