website/docs/latest/intro/ecosystem.mdx
# Ecosystem
We decided to keep Fela as small and simple as possible. It only includes the renderer and two simple helpers. Yet it is designed to be highly extendable with both plugins and middleware.
Plugins are used to process your styles, enhancers to enhance your renderer. <br />
With this approach everyone is able to create a custom version of Fela fitting their particular needs.
Many plugins and enhancers are already included in the [main repository](https://github.com/robinweser/fela/tree/master/packages).
## Renderers
- [fela](https://github.com/robinweser/fela/tree/master/packages/fela) - Web _(universal)_
- [fela-dom](https://github.com/robinweser/fela/tree/master/packages/fela-dom) - Web _(DOM bindings)_
- [fela-native](https://github.com/robinweser/fela/tree/master/packages/fela-native) - React Native
## Bindings
- [react-fela](https://github.com/robinweser/fela/tree/master/packages/react-fela) - React & React Native
- [preact-fela](https://github.com/robinweser/fela/tree/master/packages/preact-fela) - Preact
- [preact-fela-simple](https://github.com/pshev/preact-fela-simple) - Preact _(alternative)_
- [inferno-fela](https://github.com/robinweser/fela/tree/master/packages/inferno-fela) - Inferno
- [reason-fela](https://github.com/robinweser/fela/tree/master/packages/reason-fela) - ReasonML
- [bs-react-fela](https://github.com/astrada/bs-react-fela) - BuckleScript / ReasonReact
- [hyper-fela](https://github.com/ahdinosaur/hyper-fela) - HyperScript
- [vashet](https://github.com/derHowie/vashet) - ClojureScript
- [cycle-fela](https://github.com/wcastand/cycle-fela) - Cycle
- [fela-vue](https://github.com/houd1ni/fela-vue) - Vue
- [vue-fela](https://github.com/wagerfield/vue-fela) - alternative for Vue
## Integrations
- [Gatsby](https://github.com/mmintel/gatsby-plugin-fela)
- [Next](https://github.com/zeit/next.js/tree/master/examples/with-fela)
## Plugins
- [fela-plugin-bidi](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-bidi) - Enable direction-independent style authoring
- [fela-plugin-custom-property](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-custom-property) - Resolves custom properties
- [fela-plugin-embedded](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-embedded) - Automatically resolves embedded font faces and keyframes within rules
- [fela-plugin-expand-shorthand](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-expand-shorthand) - Expand shorthand properties and optionally merge them
- [fela-plugin-extend](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-extend) - Extend style objects based on conditions
- [fela-plugin-fallback-value](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-fallback-value) - Resolves arrays of fallback values
- [fela-plugin-friendly-pseudo-class](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-friendly-pseudo-class) - Transforms javascript-friendly pseudo class into valid syntax
- [fela-plugin-hover-media](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-hover-media) - Wraps `:hover` styles in `@media (hover: hover)` queries
- [fela-plugin-important](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-important) - Adds `!important` to every value
- [fela-plugin-isolation](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-isolation) - Adds style isolation to every rule
- [fela-plugin-kebab-case](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-kebab-case) - Converts properties written in kebab-case to camelCase in order to be consumed by Fela
- [fela-plugin-logger\*](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-logger) - Logs processed style objects
- [fela-plugin-multiple-selectors](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-multiple-selectors) - Resolves multiple comma-separated selectors to individual object keys
- [fela-plugin-named-keys](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-named-keys) - Replaces named keys with valid syntax
- [fela-plugin-pseudo-prefixer](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-pseudo-prefixer) - Allows adding custom pseudo class prefixes
- [fela-plugin-fullscreen-prefixer](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-fullscreen-prefixer) - Adds all `::fullscreen` prefixes
- [fela-plugin-placeholder-prefixer](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-placeholder-prefixer) - Adds all `::placeholder` prefixes
- [fela-plugin-prefixer](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-prefixer) - Adds all vendor prefixes to the styles
- [fela-plugin-responsive-value](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-responsive-value) - Resolves responsive array values to media query rules
- [fela-plugin-rtl](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-rtl) - Converts styles to their right-to-left counterpart
- [fela-plugin-unit](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-unit) - Automatically adds units to values if needed
- [fela-plugin-validator\*](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-validator) - Validates, logs & optionally deletes invalid properties for keyframes and rules
- [fela-plugin-typescript](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-typescript) - Allows to write type-safe style rules and provides some autocomplete
- [fela-plugin-theme-value](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-theme-value) - Resolves string-based theme values to actual style values
### Plugin-Presets
- [fela-preset-web](https://github.com/robinweser/fela/tree/master/packages/fela-preset-web) - Preset for cross-browser web applications
- [fela-preset-dev](https://github.com/robinweser/fela/tree/master/packages/fela-preset-dev) - Preset for development mode
## Enhancers
- [fela-beautifier\*](https://github.com/robinweser/fela/tree/master/packages/fela-beautifier) - Beautifies the rendered CSS markup
- [fela-enforce-longhands](https://github.com/robinweser/fela/tree/master/packages/fela-enforce-longhands) - Prioritizes longhand over shorthand CSS properties in a deterministic way
- [fela-identifier](https://github.com/robinweser/fela/tree/master/packages/fela-identifier) - Allows to create rules for which the renderer will generate unique class names (useful for nested selectors)
- [fela-layout-debugger\*](https://github.com/robinweser/fela/tree/master/packages/fela-layout-debugger) - Adds colored outlines or backgroundColors to debug layouts
- [fela-logger\*](https://github.com/robinweser/fela/tree/master/packages/fela-logger) - Logs every rendered change output
- [fela-monolithic](https://github.com/robinweser/fela/tree/master/packages/fela-monolithic) - Render component-based (monolithic) CSS classes (rather than atomic)
- [fela-perf\*](https://github.com/robinweser/fela/tree/master/packages/fela-perf) - Logs performance information (time elapsed while rendering)
- [fela-sort-classnames](https://github.com/robinweser/fela/tree/master/packages/fela-sort-classnames) - Deterministically sort rendered class names to prevent browser incompatibilities
- [fela-sort-media-query-mobile-first](https://github.com/robinweser/fela/tree/master/packages/fela-sort-media-query-mobile-first) - Implements a mobile-first sortMediaQuery function
- [fela-statistics\*](https://github.com/robinweser/fela/tree/master/packages/fela-statistics) - Collects different metrics to analyze your styles
## Components
- [base-styling-components](https://github.com/pitr12/base-styling-components) - Abstract Box and Text Components
- [cf-ui](https://github.com/cloudflare/cf-ui) - Cloudflare UI Framework
- [counter-component-with-react-mobx-fela](https://github.com/Mercateo/counter-component-with-react-mobx-fela) - Counter Component using Fela
- [htz-frontend](https://github.com/Haaretz/htz-frontend) - Source for Haaretz frontend app(s)
- [just-box](https://github.com/RafalFilipek/just-box) - Create universal layouts in React and React-Native
- [kilvin](https://github.com/robinweser/kilvin) - Primitive React Layout Components
- [olymp-fela](https://github.com/olymp/olymp/tree/master/packages/fela) - Simple collection of Fela Components for [olymp](https://github.com/olymp/olymp)
- [refelaxbox](https://github.com/degroote22/refelaxbox/blob/master/package.json) - [reflexbox](https://github.com/jxnblk/reflexbox) fork using Fela
- [selectless](https://github.com/Kilix/selectless) - Select in React with Context
- [superslider](https://github.com/adamgiacomelli/superslider) - Slider Component using Fela
- [veel](https://github.com/queckezz/veel) - Base React Styling Components using Fela with a Design System
## Starter Kits
- [catstack](https://github.com/root-systems/catstack) - A modular mad science framework for teams working on production web apps
- [dogstack](https://github.com/root-systems/dogstack) - A popular-choice grab-bag framework for teams working on production web apps
- [olymp](https://github.com/olymp/olymp) - Create and build a next gen app using node, react, cssInJS and other cool stuff
- [fullstack-pro](https://github.com/cdmbase/fullstack-pro) - Full Stack to create independent packages and to run on servers
- [react-frontend-server-stack](https://github.com/cdmbase/react-frontend-server-stack/tree/master/packages/react-fela) - Most common react stack and pluggable packages to quickly start a universal react application
- [reason-react-starter](https://github.com/drejohnson/reason-react-starter) - A starter for building universal web apps with ReactReason
## Tools
- [aesthetic](https://github.com/milesj/aesthetic) - React style and theme layer with Fela support
- [alef](https://github.com/as-com/alef) - Modified TypeScript port of Fela
- [babel-plugin-css-to-js](https://github.com/jakecoxon/babel-plugin-css-to-js) - Transform your CSS to JavaScript at compile time
- [bs-css-core](https://github.com/astrada/bs-css-core) - BuckleScript statically typed DSL for CSS
- [classnames](https://github.com/JedWatson/classnames) - Manage and combine multiple className values safely
- [css-functions](https://github.com/cssinjs/css-functions) - Functional API to create CSS functions including value validation
- [css-spring](https://github.com/codepunkt/css-spring) - Generate physics based css-keyframe animations for the css-in-js solution of your choice or plain css
- [css-to-object](https://github.com/jxnblk/css-to-object) - Convert flat CSS rules to JavaScript style objects
- [fela-components](https://github.com/arturmuller/fela-components) - Styling library for React and Fela
- [fela-react-helpers](https://github.com/vlad-zhukov/fela-react-helpers) - A set of useful helpers for Fela
- [fela-react-prop](https://github.com/codepunkt/fela-react-prop) - Generate class names for fela style rule and apply them as property on a wrapped component
- [fela-styles-connector](https://github.com/dustin-H/fela-styles-connector) - Simplified react-fela `connect` with auto-bound styles
- [fela-tools](https://github.com/robinweser/fela/tree/master/packages/fela-tools) - Useful tools for working with Fela
- [frejya](https://github.com/benoneal/freyja) - Pass styles as props to components
- [gatsby-plugin-fela](https://github.com/mmintel/gatsby-plugin-fela) - Integrates fela with [Gatsby](http://gatsbyjs.org)
- [jest-fela-react](https://github.com/Kilix/jest-fela-react) - Nicer snapshots when using Jest and Fela
- [objectify-css](https://github.com/lachlanjc/objectify-css) - CLI for converting CSS rules to JavaScript style objects
- [polished](https://github.com/styled-components/polished) - A lightweight toolset for writing styles in JavaScript
- [react-animations](https://github.com/FormidableLabs/react-animations) - CSS animations to be used with CSS in JS solutions
- [react-styling](https://github.com/halt-hammerzeit/react-styling) - Write your styles as CSS with [ECMAScript 2015 template strings](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings)
- [stile](https://github.com/bloodyowl/stile) - Handle units and string values
- [storybook-addon-props-fela](https://github.com/Kilix/storybook-addon-props-fela) - Document the props of your Fela components in storybook.
- [black-box](https://github.com/rocketstation/black-box) - combines behavior, presentation, structure in one place & creates all-in-one components using only JS syntax
- [small-color](https://github.com/robinweser/small-color) - A tiny (0.8kb gzipped) color manipulation package
- [Truss](https://github.com/homebound-team/truss/) - TypeScript DSL for writing Tachyons/Tailwinds-style inline/utility CSS but in Fela
---
\* Packages are considered dev tools and should therefore not be used in production.