KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

styles-debugger

★ 129 Open GitHub ↗

A helper for visually debugging styles in CSS-in-JS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)

### Other projects:
- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops
- 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM
- 💻 [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once
- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps

---

# Styles Debugger
### A helper for visually debugging css-in-js styles.

- Works both with template literals and objects. 
- It also works with inline styles but it won't show any text.

Made by [Kitze](https://twitter.com/thekitze)

## Install

`yarn add styles-debugger`

## Demos

- [CodeSandbox example with styled-components](https://codesandbox.io/s/j0yq16l7v)
- [CodeSandbox example with emotion](https://codesandbox.io/s/0or563w2yv)
- [CodeSandbox example with a custom debugger](https://codesandbox.io/s/ry65nyvr6p)

![](https://i.imgur.com/ceORWWQ.png)

## Basic usage

### With template literals

```js
import { debug } from 'styles-debugger';
import styled from 'styled-components';

const Header = styled.div`
  ${debug()};
`;
```

### With objects

```js
import { debug } from 'styles-debugger';
import emotion from 'react-emotion';

const Header = emotion('div')({
  ...debug()
});
```

### Show text along the border

```js
const Wrapper = styled.div`
  ${debug('Wrapper')};
`;
```

### Show text + customize options

```js
const Footer = styled.div`
  ${debug('Footer', { color: 'blue', debugWith: 'background' })};
`;
```

### Available params for `debug`

`debug(text: String, params: Object)`

Each `debug` function call can override the default params object for the debugger with a custom object. So for example if for some element you would like to use specific options for debugging you can just pass them as the `params` parameter. [See the available options](https://github.com/kitze/styles-debugger/#configuration-options).

## Initialize custom instance

Instead of using the default `debug` function you can create your own debugger.
Initialize it in some file and customize it the way you want.

```js
import { CreateStylesDebugger } from 'styles-debugger';

const debug = CreateStylesDebugger({
  color: 'blue',
  borderSize: 3,
  position: 2,
  styles: {
    text: {
      color: 'red'
    }
  },
  debugWith: 'background'
});

export default debug;
```

### Configuration options

- `enabled`: if this is set to `false` debug mode will be turned off for all the components (default is `true`)
- `position`: pick the corner position for the text: options are `1 | 2 | 3 | 4` (default is `1`)
- `color`: which should be a default color for the border of the element (by default it's a random color)
- `debugWith`: what should be used for debugging the elements: `border` or `background` (default is `border`)
- `borderSize`: if using border for debugging, specify the size of the border (default is 1)
- `showText`: enable or disable showing text with pseudo elements for each component (default is true)
- `pseudoElement`: which pseudo element to be used: `after` or `before`
- `styles`: an object that can be passed to completely override the styles for `element` (the element that is debugged), and `text` (the pseudo element with the text).

styles-debugger

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README