Studio is Ceros's legacy platform designed to create, publish, and share interactive digital experiences. Flex is Ceros's new platform that builds upon Studio's content creation feature set, introducing new capabilities such as responsive design, text styles, and enhanced types of interactions and animations.

Although Studio and Flex can be used to create the same type of content, as detailed in the sections below, their unique feature sets offer distinct advantages for certain types of projects.

Flex is a new yet powerful product that will continue to receive updates, adding innovative feature sets and capabilities. While these updates are being rolled out, there will be certain scenarios where using Studio is advantageous over Flex, and vice versa. The feature gap between the two products will continue to narrow and eventually close.

There are numerous differences between Studio and Flex, but the most fundamental are detailed in the sub-sections below:

Studio's user interface primarily consists of the Toolbar on the left-hand side and the Inspector Panel on the right. The Toolbar houses various tools and features used to create content, while the Inspector Panel includes three tabs (Design, Interact, and Animate) used to edit/adjust the content added to the canvas, as well as add interactions and animations.

Flex is essentially compartmentalized into different modes (Design, Animate, and Preview), each designated for a specific process in the overall content creation flow. Flex has a Toolbar similar to Studio, but doesn't have a stationary Inspector Panel. Instead, each mode in Flex (which users can toggle between) has its own dedicated UI elements specific to its use case. Flex's dynamic workspace simplifies the overall user experience.

In Studio, interactions and animations are categorized separately. Though the fundamental process of applying them is the same, each has its own tab in Studio's Inspector Panel.

In Flex, interactions and animations have been consolidated in the Animate mode, along with the addition of a new type of interactivity called Scroll Effects. As the name suggests, Scroll Effects trigger an interaction or animation upon scrolling on the canvas (i.e., parallax scroll).

Additionally, interactions and animations can be set up in Flex via the Contextual Toolbar after an object is selected.

Beyond how the UI is organized, the flow for targeting objects and applying interactions is simplified in Flex. In Studio, a target object must be selected from a list in the Inspector Panel. In Flex, target objects can be selected from the Layers Panel or directly on the canvas, which streamlines the overall interactive content creation process.

It's important to note that Flex does not utilize Hotspots like Studio; instead, Actions must be applied directly to objects on the canvas.

Studio does not allow for the creation of responsive layouts. Instead, Studio utilizes Adaptive Layouts, which involve creating individual variants for each major device type (desktop, tablet, and mobile). When a published experience is viewed on a specific device type, it will automatically display the corresponding layout variant. Variants can also be set for custom screen widths on desktop, but a browser refresh is required for the experience to update the displayed variant.

Each variant operates as a unique instance of the experience, meaning its content needs to be organized and updated separately. Some content updates do sync across variants, but overall visual layouts and net new content (content added to the canvas after new variants were created) do not.

Adaptive Layouts can be used in Flex, just like Studio, with the benefit of not needing a browser refresh to switch variants. Instead, Flex will "snap" to the appropriate variant in real-time when the browser window resizes to the corresponding breakpoints.

Additionally, experiences in Flex can be set up to be fully responsive. Similar to Adaptive Layouts, you can set responsive variants with corresponding screen size breakpoints. When the browser window (regardless of the device type) reaches a target breakpoint, the experience will automatically resize in real-time to fit. However, unlike Adaptive Layouts, the content in fully responsive experiences dynamically scales, resizes, and restacks according to the size of the browser window. The main difference is that content is fluid on the canvas and adapts to all browser window sizes, rather than snapping to a predefined layout variant when a corresponding breakpoint is reached.

Unlike Studio, Flex allows you to create a library of text styles (headers, subheaders, bodies, etc.) that can be automatically applied to any text box on the canvas. This feature increases efficiency when working on projects that involve large amounts of text. Text styles in Flex also have set values for responsive variants that can be adjusted in the Inspector Panel (i.e., body text size can be set to automatically switch from 21pt on desktop and 18pt on mobile).