/
In Studio mode the right sidebar is your inspector. An icon rail toggles sections — Layout & Transform, Styles, Text, Media, Interact, Advanced — plus pinned Alignment and Class Manager.
The Border block sets border width/style/color (uniform or per-side) and per-corner radius.
When a media element is selected, the Media panel shows type-specific controls — for images, video, audio, Spline 3D, Lottie, and image sequences.
The pinned Class Manager applies and toggles CSS classes on the selected element, shows which selector a value cascades from, and switches the editing state (hover/focus/active) and breakpoint you’re
Beyond images and video, flowmo has first-class controls for several media types: SVG paint/stroke/draw, Spline 3D scenes, Lottie animations, audio, and frame-by-frame image sequences.
The pinned Alignment bar gives one-click align and distribute buttons — left/center/right, top/middle/bottom, and distribute horizontally/vertically — for the selected element(s).
The Size block sets width and height (and, for flex children, grow/shrink/basis). Use keywords like Hug (max-content) and Fill (stretch), plus optional min/max and a ratio lock.
The Advanced section binds custom CSS variables to the element and sets accessibility (semantic tag, id, ARIA label, role) plus data-f0-embed slots for raw HTML.
The Fill block stacks fill layers — solid colors, linear/radial/conic gradients, and images — each with position, size, and repeat.
The Interact panel also holds non-animation behavior: turn an element into a link (<a>) with a URL and target, and add CSS transitions so property changes animate smoothly.
The Text section sets font family, size, weight, line-height, color, and alignment, plus optional letter-spacing, transform, decoration, and a content editor.
A video element gives you full HTML5 video control: a primary source plus alternative codec formats for browser fallback, a poster image, fit, and the playback toggles (controls, autoplay, loop, muted
The font picker isn’t limited to a fixed list — search ~1500 Google Fonts, add Adobe (Typekit) kits, use system fonts, or upload your own font files. Uploaded fonts are saved to your workspace and reu
Beyond paint, the Styles section controls how an element composites and clips: opacity, mix-blend-mode, visibility, pointer-events, user-select, and overflow.
Each section shows a “+” when it has optional properties you haven’t set yet. It opens a searchable list; pick one to add a row. Added rows get an “×” to remove them.
Every property row in the inspector renders one of a small set of reusable input widgets. Knowing them helps you read any panel: unit fields, box/dual fields, sliders, color tabs, toggle groups, and t
The Shadow & Filters block stacks visual effects on an element: outer/inner/drop/text shadows and a set of CSS filters like blur, brightness, contrast and hue-rotate.
The Position block sets the CSS position mode and offsets via a visual 3×3 “aim” widget; optional z-index, order, grid placement, and self-alignment.
The Spacing block sets padding and margin (uniform or per-side) and, for flex/grid containers, Gap (one value or separate Row/Col).