cssinjs/jss

★ 7,069JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((jss))
    What it does
      CSS in JavaScript
      Scoped component styles
      Plugin-based system
    Features
      Animations
      Media queries
      Vendor prefixes
    Status
      No longer maintained
      Still functional
      Webstudio alternative
    Audience
      React developers
      Legacy codebases

mindmap root((jss)) What it does CSS in JavaScript Scoped component styles Plugin-based system Features Animations Media queries Vendor prefixes Status No longer maintained Still functional Webstudio alternative Audience React developers Legacy codebases

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Scope CSS styles to individual React components so they do not leak to other parts of the page

USE CASE 2

Maintain or update an existing codebase that uses JSS as its styling engine

USE CASE 3

Understand how CSS-in-JS works before choosing a currently maintained alternative library

USE CASE 4

Manage CSS animations and media queries programmatically alongside the JavaScript that controls a component

Tech stack

JavaScriptCSSReact

Getting it running

Difficulty · easy Time to first run · 30min

No longer maintained, no new features or bug fixes will be added, consider Emotion or styled-components for new projects.

In plain English

JSS is a JavaScript library for writing CSS styles using JavaScript code instead of separate style sheet files. The idea is that instead of writing CSS in a .css file, you describe your styles as JavaScript objects, and JSS converts them into actual CSS that the browser applies to the page. This approach, called CSS-in-JS, lets styles be scoped to specific components and makes it easier to reuse style logic alongside the JavaScript that controls the rest of a component's behavior. The README opens with an important notice: this project is no longer maintained. The author has moved on to a new project called Webstudio, which is a visual tool for building web interfaces and generating CSS and React components. The README links to that project as the recommended alternative. Beyond the maintenance notice and a link to the documentation site, the README mostly contains backer and sponsor sections with profile images from Open Collective. These are supporters who financially contributed to the project during its active period. JSS had a plugin system and supported many CSS features including animations, media queries, and vendor prefixes. It was used as the styling engine inside Material UI (now MUI), which is one of the most widely used React component libraries, giving it significant indirect reach even though it is no longer actively developed. For anyone currently using JSS in a project, the library still works, but no new features or fixes will be added. Anyone starting a new project would need to look elsewhere for a CSS-in-JS solution.

Copy-paste prompts

Prompt 1

I have a React project using JSS. Help me migrate all the JSS styles to Emotion, which is currently maintained, without breaking the component behavior.

Prompt 2

Show me how to create a JSS theme-aware button component with hover and active states defined as JavaScript objects.

Prompt 3

I am maintaining an old React codebase that uses cssinjs/jss. Help me add a new styled card component following the existing JSS pattern in the project.

Prompt 4

Using JSS, show me how to define a CSS animation as a JavaScript object and apply it to a React component.

Prompt 5

Explain the difference between JSS and styled-components for CSS-in-JS, I am deciding which to use for a legacy migration project.

Open on GitHub → Explain another repo

← cssinjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.