[Update] 1/20/2026
Hi Creators,
We are thrilled to announce that our Styling APIs are in Client Beta and can now be published in your live experiences!
Thank you for all your feedback and excitement during our Studio Beta over the past couple of months. During this Client beta, you’ll be able to publish experiences that use our StyleRule, StyleSheet, StyleLink, and StyleDerive instances. Everyone now has access to the no-code Style Editor tool; it will no longer be gated behind the Beta features tab.
Whether your experience has complex, multi-layered designs or just uses a simple, clean interface, we highly recommend using Styling to globally manage your UI. Styling empowers you to:
Create complex UI styles and apply them with one click
Quickly change the visual appearance of multiple styled instances at once
Manage all of your UI colors and fonts in one location
Create swappable UI themes, like a light and dark mode
For a full introduction to the system, you can read our original Studio Beta announcement here, watch our video tutorial, or check out our step-by-step guide!
How Styling Works
Styling lets you declare and globally apply overrides to UI instance properties, allowing rapid changes to the appearance of multiple styled instances at once, creating swappable UI themes, and managing all of your UI colors and fonts in one location.
Styling separates defining the structure of UI elements from their visual appearance. This page provides an in-depth overview of Styling. If you’re familiar with CSS (or want to learn more), check out this guide comparing Roblox’s Styling with CSS.
StyleRulesdefine styled properties which override properties on the instances affected by the Selector property.StyleSheetsaggregate StyleRules and can be linked to DataModel trees to apply style properties to instances.StyleLinksconnect a StyleSheet to the instance tree whose root is the parent of the StyleLink.StyleDerivesreference another StyleSheet for a parent StyleSheet to inherit StyleRules and token definitions
Additionally, we have released the built-in Style Editor that allows you to create, manage, and apply UI styles for Roblox experiences through a combination of design sheets, style rules, tokens, and themes. You can find the Style Editor under the Studio UI tab. Learn more about how to get started with the Style Editor here.
Try It Out
The building blocks of Styling above can be combined to achieve some powerful new workflows. Check out our video tutorial for a step-by-step walkthrough of how to implement Styling through our no-code Style Editor, best practices, and some ideas of what it can achieve! If you want to follow along at home, you can find a sample placefile here:
StylingAdvancedExample.rbxl (76.2 KB)
New Updates Since Our Studio Beta
In the past couple months, we’ve been hard at work addressing your feedback! Here are some notable new features we’ve added:
- UIPageLayout properties are now styleable.
- If you have multiple nested derives, derives now use a breadth-first search order instead of a depth-first search order.
- Style Editor Preview child (>) or descendant (>>) selectors now display size that accounts for ancestor sizes if they are defined in StyleRules.
- Creating new “Tag” and “Other” StyleRules in the Style Editor will have lower Priority than “Class” StyleRules.
- We added the
:Pressselector to replace the previous:Pressedselector.
We’ve also fixed a number of issues and bugs, listed below.
Click to expand
Styling:
- GuiButton Modal is now styleable.
- The Visible property now updates properly in layouts.
- We fixed a crash that happened when you added 11 or more tokens to a StyleSheet or StyleRule.
Style Editor:
- NumberSequence will now live update (instead of update on drag).
- NumberSequence/ColorSequence will no longer close when clicking the modal background.
- UIFlexItem is now displayed in the new PseudoInstance context menu.
- Adding an “Empty” StyleRule will now expand the “Other” folder to allow you to start typing immediately.
- The Preview now renders properly when using a UIAspectRatioConstraint PseudoInstance.
- Boolean StyleSheet token should update correctly in all contexts.
- “Add StyleLink” now sets existing StyleLinks with StyleSheets = nil.
- The token autocomplete tooltip text will no longer overflow horizontally.
- The color picker and transparency dragger now drags properly.
- Undoing a StyleRule property after adding it now properly updates the property list.
- We fixed multiple crashes, including a GetDerives() error, invalid ColorSequence, empty token names, invalid property names, swapping themes with deleted StyleSheets, and others.
FAQs
- Will there be support for tweens/animations with Styling in the future?
- Yes! Stay tuned for more.
- Why does my StyleRule property not apply to an instance?
- The properties on that instance have likely been modified. StyleRules do not apply to properties that have been changed from their default values. You can check if a property is modified by seeing if its name appears bold in the Properties panel, or by using Instance:IsPropertyModified(property). To reset a modified property to its default value, right-click it in the Properties panel and click “Reset to Default”.
- Why can’t I see the UI tab in the Studio Ribbon to find the Style Editor?
- If you have the “Next Gen Studio Preview” beta enabled, you should always see this tab. Otherwise, you have to click the “Home” tab or select a UI element for the UI tab to appear.
- Alternatively, you can right-click on any Studio panels and open the Style Editor from the context menu.
- How should I specify different Styling for different instances if I don’t want to create multiple StyleLinks?
- We recommend using different StyleRules with the
Tag(.) selector. This allows you to apply multiple StyleRules from the same StyleLink by adding tags to that instance.
- We recommend using different StyleRules with the
- What is the performance impact of Styling? How can I optimize performance?
- Our Styling engine was built to be performant, and since the Studio Beta release, we’ve made continuous improvements to the performance and memory usage of Styling.
- Looking at specific functions:
- Setting properties on StyleRules and changing tokens on StyleSheets are relatively cheap.
- Creating/removing StyleRules and changing Derives are slightly more expensive.
- Performance/memory of a styled pseudoInstance is similar to a real instance.
- Can I use StyleSheets in my own plugins?
- Yes! We are still fixing some issues where StyleSheets may not work properly in PluginGui, and the plugin StyleSheets do not appear in the Style Editor currently.
What’s Next?
Styling is foundational to building reskinnable, reconfigurable, and responsive UI; it can be used to achieve cross-platform UI for different device preferences and screens. We’re continuing to expand its capabilities to support more advanced features – such as nested pseudo-instances and animations. Many upcoming improvements and features will be integrated into the Styling system as it continues to evolve.
Made with love
UI Styling was made possible thanks to @Tiffblocks, @nomnomhungy, @ThunderBolt5140, @TangyTrout, @stadium_parkour, @uiuxartist, @DrRanchDressing, @hughtesting, @hijabiIntern, @rbx_dert, @KarRic22, @slamborgen, @butterthebig, @IgnisRBX, and @darthskrill.
We also want to give a huge thank you to all of you for all your feedback that has helped us improve and expand Styling!
We can’t wait to see what you build with Styling! Let us know about your experience and if you encounter any issues or features you’d like us to add. Stay tuned for more! 
