https://github.com/dschau/css-in-js-playground

A simple playground for CSS in JS solutions
https://github.com/dschau/css-in-js-playground

aphrodite css-in-js emotion glamorous jss playground radium react styled-components typescript

Last synced: 3 months ago
JSON representation

A simple playground for CSS in JS solutions

• Host: GitHub
• URL: https://github.com/dschau/css-in-js-playground
• Owner: DSchau
• Created: 2017-08-12T17:36:13.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-19T23:19:27.000Z (over 7 years ago)
• Last Synced: 2025-04-07T05:11:33.583Z (6 months ago)
• Topics: aphrodite, css-in-js, emotion, glamorous, jss, playground, radium, react, styled-components, typescript
• Language: JavaScript
• Homepage: https://css-in-js-playground.com
• Size: 12.4 MB
• Stars: 87
• Watchers: 2
• Forks: 12
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md

Awesome Lists containing this project

README

          
# css-in-js-playground

[![Build Status](https://travis-ci.org/DSchau/css-in-js-playground.svg?branch=master)](https://travis-ci.org/DSchau/css-in-js-playground) [![Greenkeeper badge](https://badges.greenkeeper.io/DSchau/css-in-js-playground.svg)](https://greenkeeper.io/)

A simple CodeMirror editor showcasing the various CSS in JS styling solutions. Content is previewed live from the editor, and various styling solutions can be swapped out to see how various code snippets look in each.

![CSS in JS Playground](./assets/css-in-js-playground.png)

## Currently supported libraries

- [aphrodite](./src/snippets/aphrodite/index.js)

- [cxs](./src/snippets/cxs/index.js)

- [emotion](./src/snippets/emotion/index.js)

- [fela](./src/snippets/fela/index.js)

- [glamorous](./src/snippets/glamorous/index.js)

- [inline-styles](./src/snippets/inline-styles/index.js)

- [jss](./src/snippets/jss/index.js)

- [jsxstyle](./src/snippets/jsxstyle/index.js)

- [linaria](./src/snippets/linaria/index.js)

- [radium](./src/snippets/radium/index.js)

- [react-jss](./src/snippets/react-jss/index.js)

- [styled-components](./src/snippets/styled-components/index.js)

- [styletron](./src/snippets/styletron/index.js)

- [yocss](./src/snippets/yocss/index.js)

## Credits

[Stripe][stripe]: their excellent form mockup served as the basis for each of the current form designs.

[stripe]: https://stripe.com/connect