--- title: "Project settings" canonical_url: https://docs.zvid.io/docs/editor/project-settings/ source: docs/editor/project-settings.md content_revision: 5e30c731f37d8167 --- # Project settings Choose the output size and format before arranging your content. Project settings apply to the composition; each element has separate [layout controls](https://docs.zvid.io/docs/editor/canvas/). ## Before you begin Open the project you want to edit. Use [Save or Export JSON](https://docs.zvid.io/docs/editor/projects/) before starting a new project or making a version you want to preserve. **New → Video project** and **New → Image project** start fresh compositions; changing the output-format selector does not convert one project type into the other. ## Where to find the settings - **Second toolbar row:** resolution preset, dimensions, the **Project:** duration control, **fps**, background-color swatch, and output format. These controls are directly visible on desktop; there is no desktop **Project settings** gear. - **Project name** at the upper left: the composition's name and basis for the output filename. - **Project inspector:** overview, video thumbnail, conditional image snapshot time, and local validation. With a tool panel open, click uncovered background inside the output frame, not the checkerboard outside it. The panel header changes to **PROJECT**. A visual covering the whole frame blocks this background-click route; pressing Escape returns to the library instead of opening project properties. - **Render:** image format, quality, and transparency, plus render status and download controls. The top-bar settings and project inspector are separate views. Selecting an element changes the inspector to that element's properties. [![Desktop second toolbar row with the resolution preset and dimensions on the left, followed by project duration, fps, the background-color swatch, and output format.](https://cdn.zvid.io/library/docs/editor-guide/desktop-project-settings.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-project-settings.png) ## How to choose dimensions and format 1. Enter a descriptive **Project name**. 2. Find the settings row directly below the main toolbar. 3. Choose a **Resolution preset** from the selector at the left of that row. It shows the preset name and pixel dimensions. 4. For an exact size, choose **custom**, then enter **Width (px)** and **Height (px)**. 5. Click the background-color swatch immediately to the left of the output-format selector to set **Background color**. 6. For a video, choose a hosted output format: **mp4**, **mov**, **avi**, or **webm**. For an image, choose **png**, **jpg**, or **webp**. 7. Inspect the stage and reposition elements after changing the aspect ratio. > **On a phone or narrow window** Tap the gear immediately to the right of the vertical three-dot button (**⋮**) at the left of the second toolbar row. This opens **Project settings**, where the resolution, dimensions, background, format, and available time controls are grouped. To undo a recent change, open that three-dot menu and choose **Undo**. [![Mobile editor with the gear's Project settings panel open below the compact toolbar.](https://cdn.zvid.io/library/docs/editor-guide/mobile-settings.png)](https://cdn.zvid.io/library/docs/editor-guide/mobile-settings.png) **Result:** The composition uses the new output frame. Existing element dimensions and coordinates need a fresh visual check; changing from landscape to portrait is not a finished redesign. Click the curved left-arrow button (**Undo**) immediately after **Learn** in the upper toolbar to reverse a recent settings change. | Common preset | Dimensions | Shape | | --- | --- | --- | | **hd** | 1280 × 720 | Landscape | | **full-hd / youtube-video** | 1920 × 1080 | Landscape | | **squared / instagram-post / instagram-feed** | 1080 × 1080 | Square | | **youtube-short / tiktok / instagram-reel / instagram-story** | 1080 × 1920 | Portrait | | **custom** | Your width and height | As entered | See [all resolution presets](https://docs.zvid.io/docs/structure/properties/resolution-presets/) and [plan limits](https://docs.zvid.io/docs/credits-and-plans/#plan-limits) before choosing large dimensions. Preset names identify canvas sizes, not an automatic publishing action. ## How to set video duration and frame rate 1. In the second toolbar row, click the control showing **Project:** and the current duration to open the duration settings. 2. Enable **Fit content automatically** to follow scenes, timed visuals, audio, and captions. Set **Minimum project length** only when you want additional time beyond the content. 3. Disable **Fit content automatically** for a set-length composition. Set **Project length**; with scenes, the field reads **Minimum project length**, because the whole scene sequence is included. 4. Set **Frame rate**, marked **fps**, to an integer from `1` to `60` for hosted rendering. `30` is the starting value for a new video project. 5. Play the full composition and check its ending. Review [timeline duration](https://docs.zvid.io/docs/editor/timeline/) if content extends beyond the intended length. > **On a phone or narrow window** Open the gear beside the top toolbar's vertical three-dot button (**⋮**) first. The duration and frame-rate controls are inside **Project settings**. [![Project duration settings showing Fit content automatically enabled and a five-second resolved length for Northstar Coffee.](https://cdn.zvid.io/library/docs/editor-guide/project-duration.png)](https://cdn.zvid.io/library/docs/editor-guide/project-duration.png) The editor's frame-rate control and video-format list are broader than the hosted renderer's accepted values. An editable value is not a guarantee that a cloud render will accept it. The supported hosted video formats are **mp4**, **mov**, **avi**, and **webm**. ## Starting values and conditional controls | Setting | New video project | New image project | | --- | --- | --- | | Name | `untitled-video` | `untitled-image` | | Resolution | **full-hd**, 1920 × 1080 | **instagram-post**, 1080 × 1080 | | Background | Dark, `#0b0d12` | White, `#ffffff` | | Format | **mp4** | **png** | | Duration | **Auto** | No duration control | | Frame rate | `30` fps | No frame-rate control | | Additional output controls | Thumbnail source in the project inspector | Quality and transparency in **Render**; snapshot time appears for animated custom content | Imported projects, saved projects, examples, and templates keep their own settings. Do not use these starting values to infer the values of an existing composition. ## How to set a video thumbnail 1. In a video project, open **Text** or another tool panel, then click uncovered background inside the output frame. Avoid the surrounding checkerboard and any visual element. The left panel's header changes to **PROJECT**. 2. Expand **Thumbnail**. 3. Paste a direct, reachable image address in **Image URL**. 4. Save the project and inspect the rendered video's cover where your chosen player displays it. > **On a phone or narrow window** Open **Text** from the bottom tool strip, then tap uncovered background inside the output frame above the sheet. The bottom **Properties** sheet changes to **PROJECT**. Expand **Thumbnail** to reach **Image URL**; tap **Done** at the sheet's upper right when finished. [![Mobile PROJECT properties sheet with Thumbnail expanded and the Image URL field visible.](https://cdn.zvid.io/library/docs/editor-guide/mobile-project-thumbnail.png)](https://cdn.zvid.io/library/docs/editor-guide/mobile-project-thumbnail.png) [![Desktop PROJECT inspector with Thumbnail expanded, its Image URL field, and uncovered background around a single title in the output frame.](https://cdn.zvid.io/library/docs/editor-guide/desktop-project-thumbnail.png)](https://cdn.zvid.io/library/docs/editor-guide/desktop-project-thumbnail.png) Clear **Image URL** when you want to remove the custom thumbnail. This route needs a visible part of the frame that no element covers. Set the thumbnail while that background is accessible; clicking a full-frame visual selects the visual instead. This field supplies an image for the video's embedded cover/thumbnail stream. It does not add a visible opening card to the timeline. To show the image as part of the video, add an [image element](https://docs.zvid.io/docs/editor/images/). Image projects have no separate thumbnail field because the rendered image is its own output. ## Image quality, transparency, and snapshot time In **Render image**, **Quality** is available for JPG and WebP, with a starting value of `90` and a range of `1`–`100`. PNG is lossless and does not use this control. **Transparent background** is available for PNG and WebP, not JPG. When changing an image that already has quality or transparency settings, use **Render → Format**. That selector removes options the new format does not support. Check all options again before starting a render. The project inspector shows **Snapshot time → Capture at (seconds)** only when an image project contains a visual with custom animation CSS, JavaScript, or an animation duration. Leaving it unset captures the settled animation state. An explicit value selects a moment for supported animated content in the rendered image; the stage continues its live preview. See the [image-project walkthrough](https://docs.zvid.io/docs/editor/image-projects/#how-to-capture-an-animated-design-as-a-still). ## Example: a Northstar Coffee opening card 1. Start a video project and name it **Northstar Coffee**. 2. Choose **hd · 1280×720**, `30` fps, a dark background, and **mp4**. 3. Open duration settings, turn off **Fit content automatically**, and set **Project length** to `5` seconds. 4. Add the product image and heading, then inspect their framing and timing. 5. Preview the five-second composition and save it. Use **Export → Download JSON** for a portable copy. ## Troubleshooting | Symptom | Likely cause | Recovery | | --- | --- | --- | | Width and height fields are missing | A named preset is selected | Choose **custom**, or keep the preset's displayed dimensions | | Thumbnail or snapshot settings are missing | An element is selected, or the snapshot field is not applicable | Open the **PROJECT** inspector; snapshot time also requires qualifying animated content | | The project remains longer than the entered length | Scenes or automatic duration require more time | Inspect the duration mode, scene sequence, and content end; see [Timeline](https://docs.zvid.io/docs/editor/timeline/) | | Render rejects a format or frame rate | The editor accepts more values than the hosted renderer | Choose a supported hosted video format and an integer frame rate from `1` to `60` | | Snapshot time is absent | The project is a video or has no qualifying custom animation content | Use an image project and add an animated design only if a captured animation state is needed | | Local validation is clear but rendering fails | Local checks do not prove account allowance or remote-source availability | Read the render error and check [render troubleshooting](https://docs.zvid.io/docs/editor/export/#troubleshooting) | ## Related documentation - [Canvas layout and positioning](https://docs.zvid.io/docs/editor/canvas/) - [Create image projects](https://docs.zvid.io/docs/editor/image-projects/) - [Preview](https://docs.zvid.io/docs/editor/preview/) - [Render, download, and export](https://docs.zvid.io/docs/editor/export/)