StyleX Studio
Compile Meta's atomic CSS in your browser with the real MurmurHash compiler, live previews, themes, RTL.
StyleX Studio — compile Meta's atomic CSS in your browser with the real MurmurHash compiler, live previews, themes, RTL.
How to use StyleX Studio
- Pick a recipe or paste your own stylex.create style object as JSON in the editor
- Watch every declaration compile into one atomic class with its real MurmurHash name
- Read the generated CSS sorted by cascade priority, or switch to the RTL twin rules
- Try the live preview, flip LTR to RTL, and see logical props like marginStart change sides
- Merge two namespaces with stylex.props and see which declarations win each conflict
- Build design tokens with defineVars, override them with a dark createTheme, and copy the CSS
Features
- Real StyleX compiler ported from facebook/stylex v0.19.1: MurmurHash2 class names, value normalizers, RTL maps and priorities
- Atomic classes with the exact repo algorithm: x plus base-36 MurmurHash2 of property, value, pseudo and at-rule
- Live preview driven by the generated CSS, with hover states, media queries and LTR/RTL direction switching
- stylex.props merge demo with last-wins conflict resolution per property
- defineVars and createTheme with the repo's real var-name hashing and override class names
- stylex.keyframes with the real x-hash-B animation names plus firstThatWorks fallback values
Frequently asked questions
Is it free?
Yes, unlimited.
Login to use this free online tool. Create a free account to get started.