Guide · Open source

How to use StyleX: create styles, apply them and build the project

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

StyleX is a JavaScript library for defining styles in user interfaces. You write styles as plain JavaScript objects, pass them to a create function, and apply them to elements with a props function. This guide shows the basic pattern from the project's README, how to set up the repository with Yarn, and what the project is and isn't for, so you can decide whether to use it.

StyleXmeta/stylex · ★ 10.4k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and Yarn are installed, since the README uses Yarn workspaces.
2Get the source. Clone the StyleX repository from GitHub, the development monorepo for the project.
3Install dependencies. Run yarn install in the repository root to install the workspace dependencies.
4Build the packages. Run yarn build to run the build script in every package.
5Define styles. Call stylex.create with named groups of style objects, as shown in the README example.
6Apply styles. Call stylex.props with the style groups you want to use, then read the documentation at stylexjs.com for framework usage.

What StyleX is and who it is for

StyleX is described in its README as a styling system for optimized user interfaces. It is a library, not an end-user app, so you use it inside your own JavaScript code.

It fits front-end developers who build component-based interfaces in JavaScript, and teams that want styles defined in code rather than in separate stylesheets. If you only write plain HTML and CSS without a JavaScript build setup, the README's focus on JavaScript tooling means it is probably not a good match.

Good fit: component-based UIs written in JavaScript
Good fit: teams that prefer styles defined in code
Not a fit: plain HTML and CSS projects with no JavaScript build setup
Not a fit: anyone looking for a ready-made application

Define styles with stylex.create

Import the package as a namespace, then call stylex.create with an object of named style groups. Each group is a plain JavaScript object of style properties. In the README example, a root group sets padding and an element group sets a background colour.

The result is an object you read from when applying styles later, such as styles.root and styles.element.

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  root: {
    padding: 10,
  },
  element: {
    backgroundColor: 'red',
  },
});

Apply styles with stylex.props

Pass the style groups you want to stylex.props. The README example combines two groups, styles.root and styles.element, into a single styleProps value.

The README does not show how to spread that value onto a component, so check the documentation website at stylexjs.com for the full usage pattern in your framework.

const styleProps = stylex.props(styles.root, styles.element);

Install and build the StyleX repository

The README covers the development monorepo. Prerequisites are Node.js and Yarn, since the project uses Yarn workspaces. Run yarn install first to install the workspace dependencies, then yarn build to run the build script in every package.

To build one package only, the README gives yarn workspace <package-name> build. Tests follow the same pattern with yarn test and yarn workspace <package-name> test.

Prerequisites: Node.js and Yarn
Install workspace dependencies: yarn install
Build every package: yarn build
Build one package: yarn workspace <package-name> build

yarn install
yarn build

Find the packages and examples in the monorepo

The repository is organised as a monorepo. The packages folder holds public and private packages, including the stylex package, babel-plugin, cli, eslint-plugin, postcss-plugin, and rollup-plugin. The examples folder contains examples that use StyleX and its integration with build tools.

Start with the stylex package README if you want documentation for the core API.

packages: public and private packages managed in the monorepo
examples: usage examples and build tool integrations
packages/@stylexjs/stylex: the core package to read first

Contribute to StyleX

Development happens in the open on GitHub. Before proposing a change to the API, read the architectural principles linked from the README. The contributing guide explains the development process and how to build and test your changes.

The project expects participants to follow Meta's open source Code of Conduct.

What people use it for

Defining padding and background colours as JavaScript objects inside a component codebase
Organising component styles into named groups such as root and element
Building the StyleX packages locally to read or change the source
Running the examples folder to see StyleX used with build tools

Frequently asked questions

Is StyleX free to use?

StyleX is licensed under the MIT license, as stated in the README and the LICENSE file. Check the LICENSE file in the repository for the full terms.

How do I install StyleX?

The README documents the monorepo setup: install Node.js and Yarn, then run yarn install to install the workspace dependencies. For using the package in your own project, follow the documentation at stylexjs.com, since the README does not give a package install command.

What do I need to run StyleX?

The README lists Node.js and Yarn as prerequisites, because the project uses Yarn workspaces. StyleX is a JavaScript library, so it is meant for projects with a JavaScript setup.

Can I use StyleX with plain HTML and CSS?

The README centres on JavaScript tooling, so StyleX is a poor fit for projects that only use plain HTML and CSS with no JavaScript build step. Projects that already have a JavaScript build setup are the intended audience.

What are the alternatives to StyleX?

Comparable projects include Tailwind CSS, styled-components, Emotion, and Vanilla Extract. The README does not compare StyleX with them, so read each project's documentation to judge the differences.

Why does yarn build fail or do nothing?

The README only documents yarn install and yarn build as the setup commands. Make sure you ran yarn install first in the repository root, then yarn build; the README does not list other troubleshooting steps, so check the contributing guide for build and test details.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

StyleX suits front-end developers who build component-based interfaces in JavaScript and want styles defined in code. It is a poor choice if you only write plain HTML and CSS, or if you want a ready-made app rather than a library. Check the documentation at stylexjs.com before committing to it, and compare it with Tailwind CSS, styled-components, Emotion, or Vanilla Extract.

Install options & downloads