Back to Index

The Toolbar contains controls for navigating the Component Studio, performing high-level actions on your component, and showing/hiding Studio panels.

Component Info

Click the component name on the left of the Toolbar to launch the Component Info panel. This panel has the following settings:

  • Name: The name of this component, as it will appear in Design Studio’s Components panel and elsewhere.
  • Thumbnail: The thumbnail associated with this component. Click the icon to upload a new thumbnail.
  • Description: A brief description of your component that will appear as a tooltip when the user hovers over your component in Design Studio's Components panel.
  • ID: This 32-digit number (under the Developers section) is the unique ID associated with this component.
    Click Done to save your changes and dismiss the Component Info panel. Click the X button in the upper right to dismiss the panel without saving changes.

Navigation Controls

The Component Studio has three sections – Source, Settings, and Layer Structure. These controls let you navigate through the sections.

  • Source: Edit various basic component properties - such as the associated file, dimensions, and dependencies.
  • Settings: Edit your component’s settings and how they are seen in Design Studio.
  • Layer Structure: If your component can have multiple layers, this is where you edit that layer structure.


The two most common component actions are Save and Publish. The others are under the Actions (Gear) Menu.

Save: Save your component without making your changes live. Saved changes will only be visible within the Component Studio preview of the component.
Publish: Save your component and make all changes live. This will update the component across all ads containing your component, including any live ads. Be careful when publishing changes; you may potentially affect thousands of ads in production.
Actions (Gear) Menu: This menu contains several functions useful for managing your component.

  • Copy Component… Copies your component, appending "Copy" to the end of its name and opening the new component in Component Studio. Any unsaved changes in your original component will be saved first, so the copy will be made from the newly-saved component.
  • Delete Component… Deletes your component and goes back to the Flite Console.
  • Revert to Published Version… Reverts this component to the last version you published. Any changes, saved or unsaved, that have been made to the component since the last time it was published will be discarded and lost permanently.
  • Reset Panel Locations: Moves all panels to their default positions in the workspace.
  • Subscribe to Notifications… Subscribes to Notifications about this component. You will be able to view these Notifications in the Console.


There are several panels available in all three Component Studio sections, and several that are available only in certain sections (Source, Settings, and/or Layer Structure).

  • Inspector: Contextual editor for various settings and parameters. Depending on the section you are in and the selected item, the appropriate settings are displayed. For more on what the Inspector panel does in each section, refer to the appropriate section’s documentation.
  • Actions: Configure custom actions and triggers on your component, allowing the component to react to user interactions and/or system events. The component will automatically have access to Design Studio’s standard actions & triggers.
  • Parts: Manage the parts used in your component. Parts are modular component building blocks allowing you to add more flexibility to your components.
  • Help: View this Component Studio documentation.
  • Items (Settings & Layer Structure only): The hierarchical, selectable list of items contained in the component. In the Settings section, this is a list of settings and groups; in the Layer Structure section, this is a list of parts and containers.
  • Component Preview (Settings & Layer Structure only): A preview of the component with its default values.
  • Parameter Types (Settings only): A library of Parameter Types that you can use for the settings and groups in your component.
  • Library (Layer Structure only): A library of all existing components and component-specific parts available for use in your component’s layer structure.

Back to Index