Layers

The Layers panel is on the left side of the viewport. It's where you can create and manage your layers.

Layers context menu

Discover the various types of layers that you can create in Meld Studio.

Video device

A Video device is the hardware or virtual input source that provides a video feed for your live stream and recordings. This layer can be a webcam, capture card, or virtual camera.

Add a Video device

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Video device from the list.
4. Select a device for your layer using the dropdown on the canvas or in the Inspector panel.

Display Capture

A Display Capture lets you capture content on your screen, such as an application window or entire desktops.

Add a Display Capture

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Display capture from the list.
4. Select a source for your layer using the dropdown on the canvas or in the Inspector panel.

Note

The Display capture is also the Game Capture layer.

Audio Track

Once you've added the Display capture layer and source, you can add an audio track associated with the layer in the Audio Mixer.

Display capture audio track

1. Select the Display capture layer.
2. Navigate to the Inspector panel.
3. Enable the Add an audio track for the source option under the dropdown menu.
4. Toggle CUE on to monitor audio from the audio track.

Adding an audio track for the Display capture layer

You can delete the audio track from the Audio Mixer from the Audio Track dropdown menu.

Media Source

A Media source lets you add a media file to your scene for playback.

Note

The following file formats are supported: mp3, mp4, mov, webm.

Add a Media Source

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Media source from the list.
4. Search for and select the media file you want to import into Meld.

Drag & Drop

Drag and drop the media file from your directory directly onto the Meld Studio canvas.

Audio Track

When you add a Media source and import the media file, Meld automatically creates an audio track associated with the layer.

Media source audio track

You can delete the audio track from the audio mixer anytime you want. If you delete the audio track, you can add it back if you wish:

1. Select the Media source layer.
2. Navigate to the Inspector panel.
3. Enable the Add an audio track for the source under the media controls.
4. Toggle CUE on to monitor audio from the audio track.

Adding an audio track for the Media layer

Image

With the Image layer, you can add graphics to your scenes, such as logos, backgrounds, overlays, and other visual elements.

Note

Supported file formats: png, jpg, jpeg, gif, webp.

Add an Image layer

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Image from the list.
4. Search for and select the image file you want to import into Meld.

Drag & Drop

Drag and drop the image file from your directory directly onto the Meld Studio canvas.

Browser

A Browser source provides the option to add a URL as a source. The URL can display stream overlays, alerts, widgets, media, and more.

Add a Browser

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Browser from the list.
4. Add the URL to the field in the Inspector panel.
5. Use the reload icon to refresh the Browser URL whenever needed.

Browser Audio Track

Once you've added the Browser layer, you can add an audio track associated with the layer in the Audio Mixer.

Browser audio track

Browser audio track

1. Select the Browser layer.
2. Navigate to the Inspector panel.
3. Enable the Add an audio track for the source option under the URL text field to create an audio track associated with the layer.
4. Toggle CUE on to monitor audio from the audio track.

Adding an audio track for the Browser layer

You can delete the audio track from the audio mixer anytime you want.

Lock size

The Lock Size feature prevents the current browser layer size from resizing along with the layer itself. This is particularly useful for web pages that may display incorrectly or distort when resized to fit different layer dimensions. Enable this option to maintain the original browser size regardless of adjustments to the layer.

Lock Size demonstration

Duplicator

The Duplicator allows you to duplicate a layer from any selected source. Unlike regular Copy and Paste, the Duplicator creates an instance of the layer across multiple scenes, and any changes made to the main layer are reflected in all other duplicators.

Duplicator layers can still be adjusted individually without impacting the main source.

Add a Duplicator

1. Navigate to the Layers Panel.
2. Click the ╋ icon to add a new layer.
3. Select Duplicator from the list.
4. Use the first dropdown to Select a Scene where the source you want to duplicate is located. Then, use the second dropdown to select the specific layer to duplicate.

Text

Add, customize, and edit text layers within your Scenes.

Customizing Text Styles

Add a text layer

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Text from the list.

Edit text content

Type directly in the Text block in the Inspector panel, or paste in your content. You can also add emojis, icons, and symbols.

Select fonts

Use the Font dropdown menu in the Inspector panel to choose between different fonts.

Font Weight

Use the dropdown menu to adjust the font weight, such as Regular, Bold, Italic, and more. The available font weight options depend on the specific font family style.

Font Size

Use the font size text field to enter a specific pixel value, or click and drag the font size icon to the left to reduce or to the right to increase the size.

Text Color

Use the color picker to apply a custom color to your text.

• Choose a text color by clicking the color picker to select a color, or entering a HEX value.
• Click Ok to save the color update.

Background Color

Enable the Background color option to add a custom-colored background to your text layer.

• Toggle the Background option on/off using the switch on the right.
• Choose a text background color by clicking the color picker to select a color, or entering a HEX value.
• Click Ok to save the color update.

Adding a Gradient Color

Use the Effects panel to apply the Gradient color to your text layer.

Read content from a file

When enabling this functionality, Meld allows you to incorporate external text content directly into your scenes. Any changes made to the external file will automatically update in Meld once the file is saved.

Tip

You can use this functionality for scoreboard apps to showcase real-time timers, and other dynamic information during live streams or video productions, whether it's for esports events, sports broadcasts, game streams, podcasts, presentations, or any other information you wish to share with your audience.

Markdown

This adds a layer that supports Markdown markup language for formatting text. This simplifies text styling and enhances your content creation experience for presentations and dynamic use in your productions.

Add a Markdown layer

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Markdown from the list.

Edit text content

You can conveniently format text directly in the Content text block located in the Inspector panel.

Read content from a file

You can read content from a Markdown file in Meld Studio, using your preferred text or code editor to view real-time updates within Meld.

Rectangle

Use the Rectangle layer to create rectangles, squares, lines, frames, and circles. This layer is also ideal for adding solid colors, gradient backgrounds, camera overlays, and lower-thirds backgrounds to your scenes, and for creating unique looks using Effects.

Add a Rectangle layer

1. Navigate to the Layers panel.
2. Click the ╋ icon to add a new layer.
3. Select Rectangle from the list.

Color

You can update or disable the rectangle fill color.

• Toggle the Color option on/off using the switch on the right.
• Choose a fill color by clicking the color picker to select a color, or entering a HEX value in the input field.
• Click Ok to save the color update.
• Adjust the opacity of the color fill using the percentage field. The default is 100%.

Border

You can enable and customize the color of the rectangle's border. This feature is great for creating camera overlays. Combine it with other layer types to design frames, outlines, or unique visual effects.

• Toggle the Border option on/off using the switch on the right.
• Choose a border color by clicking the color picker to select a color, or entering a HEX value.
• Click Ok to save the color update.
• Set the border thickness by entering a value in the pixel text field, or hover your cursor over the icon, then click and drag left to reduce or right to increase.

Adjust Rectangle Corner Radius

Like the other layers, Rectangles also have four circle handles on the inside of every corner. These handles allow you to round the corners of the rectangle and turn it into a circle, for example.

Layer properties

Inspector Panel

Every layer will have particular properties associated with it, which you can find and modify using the Inspector panel.

The Inspector panel provides controls for customizing the properties of your selected layers, like position on the canvas, its dimensions like width and height, layer opacity, effects, and others.

Example of the Media source properties in the Inspector panel

Transform

The group of properties that every layer has in common is the Transform and Effects.

The Transform section includes:

• Position
• Rotation
• Dimensions
• Aspect Ratio
• Layer Flip
• Corner Radius
• Opacity

Transform section in the Inspector panel

Position

You can adjust the position of layers in the canvas along any of the two axes: horizontal (X axis) and vertical (Y axis). Meld represents a layer's position in the Inspector panel using X and Y coordinates.

Rotation

Rotate individual layers or a selection of layers.

Every layer you add to the canvas will have a default rotation of 0°. You can rotate your layer 360° in each direction.

To rotate a layer:

Inspector panel

1. Select the layer(s) you want to rotate.
2. Use the rotation field to enter your desired rotation value.
3. Or hover the rotation icon, click, and drag left or right.

Canvas

1. Selected and hover just outside one of the layer's bounds until the rotation mouse cursor appears.
2. Click and drag to rotate your selection.
3. Hold down Key: Shift ⇧ to snap rotation values to increments of 15º.

Dimensions

Every layer will have its dimensions, represented by the width (W) and height (H). You can also view the dimensions in the blue label under the layer's bounding box, or in the Inspector panel in theW and H fields.

Aspect ratio

You can find the aspect ratio option next to the W and H fields. When a layer aspect ratio is locked, it maintains the current proportions intact when resizing it. When the aspect ratio is unlocked the layer's original proportions are no longer maintained.

Tip

When resizing layers from the canvas, hold down the Key: Shift ⇧ key to break the aspect ratio.

Layer Flip

Apply Vertical and Horizontal flip transformations on layers.

1. Select the layer you want to update.
2. Navigate to the Transform section in the Inspector panel.
3. Click the icons for Flip Vertical or Flip Horizontal to make the changes.

Flip layers using the Flip Vertical or Flip Horizontal icons in the Transform section.

Flip Horizontal

Flip Vertical

Note

The Rectangle is the only layer that does not support flip transformation.

Corner Radius

The Corner Radius feature allows you to adjust the corners of any layer. You can customize all corners equally or adjust each corner individually.

When a layer is selected (unlocked and visible), you'll notice four circle handles on the inside of every corner. These handles allow you to round the corners of the layer.

Tip

You can also adjust the individual corners of any layer from the viewport:

1. Select a layer.
2. Hold down the modifier key Key: Alt Alt on Windows or Key: Option ⌥ on macOS to activate individual corner settings.

Inspector

1. Select the layer.
2. Enter a pixel value in the Corner radius field or hover your cursor over the corner radius icon, then click and drag left to reduce or right to increase.

Canvas

1. Select the layer you want to update.
2. Drag the corner radius handles to adjust the radius.

Independent Corner Radius

Adjust the individual corner radius of layers to create a custom shape.

Inspector

1. Select the layer you want to update.
2. Click on the Individual corners radius icon.
3. In the corner radius details section, you can:
   • Enter a pixel value for each corner.
   • Hover your cursor over the text fields, then click and drag left to reduce or right to increase.

Individual corner radius details panel.

Canvas

1. Select the layer you want to update.
2. Hold down the modifier key to activate individual corner settings.
   • Mac: Key: Option ⌥
   • Windows: Key: Alt Alt

Individual corner radius modifier key.

Opacity

Adjust the layer Opacity using the slider or text field in the Inspector panel. Opacity is represented as a percentage (%). Every layer added has a default opacity value of 100%.

1. Select the layer you want to update.
2. Navigate to the Inspector panel
3. Click and drag the opacity slider handle left or right or type a value into the text field.

General Layer Adjustments

Layer Locking

Locking layers prevents the layer source from moving from its position, and from being cropped.

If you lock a layer, you can't select it via the normal left-click selection process. However, you can only select it via the Layers panel.

Lock

1. Navigate to the Layers panel and hover the layer.
2. Click the lock icon to the right of the layer to lock it.

Unlock

1. Locate the locked layer marked with the lock icon.
2. Click the lock icon to unlock the layer.

Tip

You can also right-click on a layer and select Lock/Unlock.

Layer Hiding

If you hide a layer we won't show it on canvas, but you can still select it. You will need to toggle visibility on to make visible changes to the layer.

Hide

1. Navigate to the Layers panel and hover the layer.
2. Click the eye icon to the right of the layer to hide it.

Unhide

1. Locate the hidden layer represented by the eye icon.
2. Click the eye icon to unhide the layer.

Tip

You can also right-click on a layer and select Hide/Unhide.

Renaming Layers

1. Double-click the layer you want to rename.
2. Type the name you want to give to the layer.
3. Press Key: Enter Enter or click away to save the changes.

or

1. Right-click the layer.
2. Click Rename.
3. Type the name you want to give to the layer.
4. Press Key: Enter Enter or click away to save the changes.

Tip

You can cancel the rename action by pressing Key: Esc Esc .

Reordering Layers

Adjust the order of a layer by changing the layer's position in the Layers panel.

1. Navigate to the Layers panel.
2. Click and drag the layer to change it's position in the layer hierarchy:
   • Move the layer up to bring the layer forward.
   • Move the layer down to send the layer back.
3. Release to apply.

Moving Layers Up and Down

1. Select the layer(s) in the canvas or the Layers panel.
2. Right-click on the selection to open the context menu:
3. Choose from:
   1. Move Up
   2. Move Down

Copy and Paste

You can copy a layer and paste it into the same, or a different scene.

1. Select the layer.
2. Copy using the keyboard shortcut.

• Mac: Shortcut Keys: Command + C ⌘ C
• Windows: Shortcut Keys: Ctrl + C Ctrl C

3. Navigate to where you want to paste the layer:
4. Paste using the keyboard shortcut:

• Mac: Shortcut Keys: Command + V ⌘ V
• Windows: Shortcut Keys: Ctrl + V Ctrl V

You can also:

1. Right-click on a layer and select Copy.
2. Navigate to where you want to paste, right-click, and select Paste.

Multi-select

You can also select more than one layer at a time.

1. Select a layer in the canvas or the Layers panel.
2. Hold down the Key: Shift ⇧ key and click on another layer.
3. This will allow you to select as many layers as you like.

Selection marquee

The marquee tool allows you to select all layers in a specific area of the canvas.

1. Click and hold on an empty part of the canvas.
2. Drag the cursor across any layers you'd like to select.
3. A blue overlay will indicate the area, and layers in the selection will be in a bounding box.
4. To remove a layer from the selection, hold down the Shift key and click on the layer.

Selection marquee

Select multiple layers in the Layers panel

When you select layers in the Layers panel, there are some different rules:

To select every layer between two layers:

1. Click on the first layer to select.
2. Hold down the Key: Shift ⇧ key.
3. Select the last layer.
4. Meld will select every layer between those two layers.

To select individual layers:

1. Click on the first layer to select.
2. Hold down the modifier key
   • Mac: Key: Command ⌘
   • Windows: Key: Ctrl Ctrl
3. Select any other layers you want to select.

Deselect layers

1. Click on an empty area of the canvas.
2. Use the keyboard shortcut Key: Esc Esc .

Crop

Crop a layer to trim its outer edges and show only the section of the content that you want.

How to Crop a Layer

1. Double-click on a layer, or click the blue crop button at the bottom of the canvas.
2. Click and drag the crop mask handles around the layer to crop it.
3. Click anywhere on the canvas to apply the crop, or click Done.

You can also:

4. Click and drag to reposition the layer content.

Hold and drag the crop mask area to reposition it.

Reset crop

In Meld Studio, cropping layers is a non-destructive action. This means that the cropped area is not permanently removed but simply hidden. You can revisit and adjust the crop at any time, restoring the full layer content or modifying the cropped region as needed.

You can reset the crop in two ways:

1. Double-click on the layer, or click the crop button at the bottom of the canvas.
2. Click Reset on the left of the floating toolbar.
3. Click anywhere on the canvas to apply the changes, or click Done.

Or

1. Right-click on the layer you want to update.
2. Click Reset Crop in the context menu.

Deleting Layers

1. Right-click the layer.
2. Select Delete layer.

FAQ

How do I capture games?

You can capture a game by adding a Display Capture layer and selecting the game application window.

Can I add multiple layers of the same type?

Yes, you can add as many layers of the same type as needed to your scenes.

How do I rename a layer?

Double-click the layer name in the Layers Panel or right-click the layer and select Rename from the context menu.

Can I copy and paste layers across scenes?

Yes, you can copy a layer from one scene and paste it into another using shortcuts or the context menu.

How do I add audio from a Display Capture, Browser, or Media source layer?

Toggle on the Add an audio track for the source option in the Inspector Panel for the layer.

What media file formats are supported?

Supported formats include MP3, MP4, MOV, WebM.

How do I refresh a Browser URL?

Use the reload icon after the URL field to refresh the source.

Can I use custom fonts for text?

Yes, if you have custom fonts installed, navigate to the Font dropdown in the Inspector Panel to choose from available fonts.

What is a Markdown layer?

A Markdown layer allows you to format text using Markdown syntax, ideal for dynamic text or presentations.

What image formats are supported in the Image layer?

Supported formats include PNG, JPG, JPEG, GIF, and WebP.

Can I crop a layer?

Yes, double-click the layer or use the crop icon to enter crop mode.

Can I independently adjust the corner radius of a layer?

Yes, enable the Individual Corners option in the Inspector Panel to set different radii for each corner.

Hold down the modifier key to activate individual corner settings on canvas.

• Mac: ⌥ option
• Windows: Alt

How do I delete multiple layers?

Select all the layers you want to delete, right-click on one of the selected layers, and choose Delete Layers from the context menu.