React Style Editor

[![Npm Version][npm-version-image]][npm-version-url]   [![Size][bundlephobia-image]][bundlephobia-url]

A React component that displays and edits CSS, similar to the browser's DevTools.


Live demo

Features

- Parses any CSS string and formats it in a familiar fashion
- Validates each rule and each declaration using the browsers's own engine
- Facilitates commenting the CSS code through checkbox toggling
- Allows easy additions by clicking next to the desired location
- Has no dependencies (other than React)
- Is tiny (< 10 KB minified)
- Is customizable through classes
- Offers 3 output formats:
- the code with preserved formatting
- a machine-friendly model of the code (recursive array of objects)
- the prettified code

Installation

``sh
npm i react-style-editor
`

Usage

`js
import React from 'react';
import StyleEditor from 'react-style-editor';

class Component extends React.Component {
render() {
return (
defaultValue={
div {color:red;}
/ Hello, World! /
@media screen {
article {
display: flex;
}
}
}
/>
);
}
}
`

Props

| prop | type | default | description |
| --------------- | -------- | ----------- | --------------------------------------------------------------------------------------------------------- |
| defaultValue | string | '' | The initial CSS code |
| value | string | undefined | The controlled CSS code |
| onChange | function | null | A closure that receives a single argument, string or array, depending on the value of outputFormats |
| outputFormats | string | 'pretty' | Comma-separated values of: 'preserved', 'machine', 'pretty' |
| readOnly | boolean | false | All interactions with the component are blocked |

All parameters are optional, but some are inter-related. For example, due to the nature of React, you should use StyleEditor either fully controlled or fully uncontrolled (see this article).
A short summary:

- defaultValue => uncontrolled, the component is on its own
- value => controlled => you must also use the onChange or readOnly properties.

The above behavior is identical to that of normal React form elements, e.g. <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">Any other props are spread to the internal root.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Exports</h2></p><p class="my-3">Besides the default export (</code>StyleEditor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), there are also a few utility functions exported:</p><p class="my-3">- </code>analyze()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: ouputs the </code>machine<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> format<br />- </code>parse()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: a lighter version of </code>analyze()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>stringify()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: outputs the </code>preserved<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> format<br />- </code>prettify()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: outputs the </code>pretty<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> format</p><p class="my-3">They all expect a CSS string as parameter and are useful if you don't want to use the React component and wait for its </code>onChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Wishlist</h2></p><p class="my-3">- Color swatches (similar to the browser)<br />- Dropdown suggestions for properties/values (similar to the browser)<br />- Keyboard support for </code>TAB<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>:<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>UP<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">/</code>DOWN<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> increments of numeric values<br />- Theme support (similar to the browser)<br />- Toggle view mode: tree/original<br />- Undo/redo<br />- Better code quality through </code>propTypes`<br />- Filters (similar to the browser)<br />- Error messages displayed in the warning-sign's tooltip</p><p class="my-3">[npm-version-image]: https://img.shields.io/npm/v/react-style-editor.svg?style=flat-square<br />[npm-version-url]: https://www.npmjs.com/package/react-style-editor<br />[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/react-style-editor.svg?style=flat-square<br />[bundlephobia-url]: https://bundlephobia.com/result?p=react-style-editor<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"2a:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2b:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.4.4\"}]\n2c:[\"$\",\"$L5\",\"@babel/preset-env\",{\"href\":\"/package/%40babel%2Fpreset-env\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/preset-env\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.4.4\"}]]}]\n2d:[\"$\",\"$L5\",\"@babel/preset-react\",{\"href\":\"/package/%40babel%2Fpreset-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/preset-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.0\"}]]}]\n2e:[\"$\",\"$L5\",\"@storybook/react\",{\"href\":\"/package/%40storybook%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@storybook/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.11\"}]]}]\n2f:[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.5\"}]]}]\n30:[\"$\",\"$L5\",\"prettier\",{\"href\":\"/package/prettier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\""])</script><script>self.__next_f.push([1,":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prettier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.4.1\"}]]}]\n31:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.8.6\"}]]}]\n32:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.8.6\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>