Switch branches/tags
react-fela@8.0.2 react-fela@7.3.0 react-fela@7.2.0 react-fela@7.0.1 react-fela@6.2.4 react-fela@6.2.3 react-fela@6.2.2 react-fela@6.2.1 react-fela@6.2.0 react-fela@6.1.1 react-fela@6.0.2 react-fela@6.0.1 react-fela@6.0.0 react-fela@5.3.0 react-fela@5.2.1 react-fela@5.2.0 react-fela@5.0.0 preact-fela@8.0.2 preact-fela@7.3.0 preact-fela@7.2.0 preact-fela@7.0.1 preact-fela@6.2.4 preact-fela@6.2.3 preact-fela@6.2.2 preact-fela@6.2.1 preact-fela@6.2.0 preact-fela@6.1.1 preact-fela@6.0.2 preact-fela@6.0.1 preact-fela@6.0.0 preact-fela@5.3.0 preact-fela@5.2.1 preact-fela@5.2.0 preact-fela@5.0.0 performance-benchmarks@0.0.13 performance-benchmarks@0.0.12 performance-benchmarks@0.0.10 performance-benchmarks@0.0.9 performance-benchmarks@0.0.8 performance-benchmarks@0.0.7 performance-benchmarks@0.0.6 jest-react-fela@1.0.0 jest-preact-fela@1.0.0 jest-inferno-fela@1.0.0 jest-fela-bindings@1.0.0 inferno-fela@9.0.2 inferno-fela@8.2.0 inferno-fela@8.1.0 inferno-fela@7.0.1 inferno-fela@6.2.4 inferno-fela@6.2.3 inferno-fela@6.2.2 inferno-fela@6.2.1 inferno-fela@6.2.0 inferno-fela@6.1.1 inferno-fela@6.0.2 inferno-fela@6.0.1 inferno-fela@6.0.0 inferno-fela@5.3.0 inferno-fela@5.2.1 inferno-fela@5.2.0 inferno-fela@5.0.0 fela@6.2.2 fela@6.1.8 fela@6.1.7 fela@6.1.3 fela@6.1.2 fela@6.1.1 fela@6.1.0 fela@6.0.2 fela@6.0.1 fela@6.0.0 fela@5.2.0 fela@5.1.1 fela@5.1.0 fela@5.0.0 fela-utils@8.1.2 fela-utils@8.0.7 fela-utils@8.0.6 fela-utils@8.0.3 fela-utils@8.0.2 fela-utils@8.0.1 fela-utils@8.0.0 fela-utils@7.0.2 fela-utils@7.0.1 fela-utils@7.0.0 fela-utils@6.0.1 fela-utils@6.0.0 fela-utils@5.0.5 fela-utils@5.0.0 fela-tools@5.2.2 fela-tools@5.1.6 fela-tools@5.1.5 fela-tools@5.1.2 fela-tools@5.1.1 fela-tools@5.1.0 fela-tools@5.0.14 fela-tools@5.0.10 fela-tools@5.0.9 fela-tools@5.0.8
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
src add comma dangle Nov 21, 2017
LICENSE update licenses Jun 22, 2017
README.md fix type error Oct 9, 2018
package.json Publish Sep 25, 2018
yarn.lock moved a lot of utils and removed dependencies; closes #467 Nov 15, 2017



npm version npm downloads Bundlephobia

Uses styles-debugger to add outlines and labels to every rule component. This helps to debug the application layout.
Same rules will always have the same color.


yarn add fela-layout-debugger

You may alternatively use npm i --save fela-layout-debugger.


import { createRenderer } from 'fela'
import layoutDebugger from 'fela-layout-debugger'

const renderer = createRenderer({
  enhancers: [ layoutDebugger() ]



It takes an options object with the shape of the official styles-debugger configuration options.

import { createRenderer } from 'fela'
import layoutDebugger from 'fela-layout-debugger'

const layoutDebuggerEnhancer = layoutDebugger({
	pseudoElement: 'before',
	color: 'red',
	borderSize: 3,
	position: 3

const renderer = createRenderer({
  enhancers: [ layoutDebuggerEnhancer ]


Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.