Skip to content
Get packs

StyleX

A JavaScript library for defining styles in user interfaces, from Meta's open-source monorepo.

GitHub Download 0.19.1
Stars
10.4k
Forks
509
Licence
MIT
Language
JavaScript
Last update
4 days ago
Type
Library

What it is

StyleX is a JavaScript library for defining styles in user interfaces. You write styles as JavaScript objects using a create function and apply them with a props function. The README describes it as aimed at optimized user interfaces, and the project is developed in a monorepo on GitHub under the MIT license.

  • Define a set of named style objects with stylex.create and apply them to elements with stylex.props
  • Use the build-tool integrations listed in the monorepo, such as the babel, rollup, postcss, and cli packages
  • Explore the examples folder, which the README says contains examples using StyleX with build tools

Great for

  • Front-end developers who build component-based user interfaces in JavaScript
  • Teams that want styles defined in code rather than in separate stylesheets
  • Developers who want to read the project's documentation and contribute to the StyleX codebase

Not ideal for

  • People who only write plain HTML and CSS and do not use a JavaScript build setup, since the README centers on JavaScript tooling
  • Non-developers looking for a ready-made app; the README describes a library, not an end-user product
Step-by-step guide: how to use StyleXInstall, first run, examples, tips and FAQs
StyleX alternativesStyleX vs Tailwind CSSstyled-components vs StyleXEmotion vs StyleX

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · Yarn (the README uses yarn workspaces)

    Install workspace dependencies (from the README tasks section)

    yarn install

    Build every package (from the README tasks section)

    yarn build
  2. 2

    Run it

    • Read the documentation at https://stylexjs.com
    • Install the @stylexjs/stylex package in your project, as the README points to its package README
    • Import it with import * as stylex from '@stylexjs/stylex'
    • Call stylex.create to define styles and stylex.props to apply them
  3. 3

    Get the most out of it

    • Start with the @stylexjs/stylex package README, which the main README recommends
    • Use the build-tool integrations (babel-plugin, rollup-plugin, postcss-plugin, cli) that match your toolchain
    • Check the eslint-plugin package for linting support, as listed in the README
    • Read the 'Thinking in StyleX' page linked from the README to understand the project's principles

Downloads

Source code (.zip)main branch · straight from GitHubRelease 0.19.1Release notes and sourceOfficial website & docsstylexjs.com

Strengths

  • Official documentation website is linked from the README at stylexjs.com
  • Published under the MIT license, which allows broad reuse
  • The README shows a short, readable example of the core API

Trade-offs

  • The README is short and points to external docs for most details, so setup specifics are not covered here
  • The README does not explain performance claims in detail, so the 'optimized' benefit should be checked in the docs
  • Development-focused monorepo layout means the repository is aimed at contributors as much as at users

How it compares

ProjectStarsTypeLevelUpdatedBest for
stylex (this)10.4kLibraryintermediate4 days agoFront-end developers who build component-based user interfaces in JavaScript
tailwindcss98.3kLibraryintermediate4 days agoWeb developers who build their own interfaces and want to avoid writing large custom stylesheets
styled-components41.1kLibraryintermediate7 days agoReact developers who prefer writing styles alongside components in JavaScript
emotion18kLibraryintermediate14 days agoReact developers who want styles colocated with components
vanilla-extract10.4kLibraryintermediate5 days agoFront-end developers who want type-checked styles in TypeScript

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.