Styling

The app editor lets you style a component individually or set styling once at the app level so it cascades to every component of that type. You can mix both: override a single instance while keeping the rest of the app consistent.

Component level

Every component carries its own local CSS, scoped to that single instance. A local override always wins over whatever is set at the global level for that component type.

Pre-set

Many components expose quick style shortcuts for their most commonly-tweaked properties. These live in the Components settings tab of the Configuration panel, alongside the component’s functional settings.

Styling menu

Each component also has a full styling menu where you set raw CSS or Tailwind classes per property — background (color, shadow, opacity), border (style, radius), and typography (size, family, weight, spacing). CSS and Tailwind classes can be combined on the same property.

Once you’re happy with a component’s local styling, you can promote it to the global level so every component of that type picks it up (see Global styling below).

Dynamic styling

Toggle “Use dynamic class” in the styling menu to drive a property’s class from an eval instead of a fixed value — this lets styling react to other components’ outputs or to a runnable’s result.

Global styling

For apps with many instances of the same component, setting styling one component at a time doesn’t scale. Global styling lets you define a CSS rule once per component type and have it apply everywhere that type is used in the app.

CSS editor

The theme editor (“Open theme editor” in the styling panel) is a single place to define, review, and edit the global CSS rules for every component type in the app — useful for keeping an app visually consistent and for building a reusable theme.

The theme editor is an Enterprise-tier feature. On other tiers the button is labeled “(EE only)” but stays clickable, so you can still open it and experiment with global CSS while editing the app; those rules just won’t carry over once the app is published for viewers unless the workspace is licensed for Enterprise.

Configure manually and replicate pre-set styling

You can also promote an individual component’s local styling to the global level for its type, from the styling menu’s “Convert to global CSS” action — an Enterprise-tier capability as well.

Full height

All components can be set to “Desktop full height” and/or “Mobile full height”.

When set to full height, a component (in its respective view type, desktop or mobile) will have its height extend down until the end of the parent container (or the canvas, if none).