# CSS GUI: visual controls for CSS properties, in React

> CSS GUI generates an editor UI from the style properties you hand it, so a design tool can be built on top of it without writing a control per property. It covers 280 CSS properties, handles units, variable fonts and pseudo-elements, and the design goal is to follow the CSS specification rather than approximate it.

**components-ai/css.gui** — Visual development environment for CSS

- Repository: https://github.com/components-ai/css.gui
- Website: https://components.ai/css-gui
- Stars: 585 · Forks: 28
- Language: TypeScript
- License: MIT
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/components-ai-css-gui

## Controls are generated from the style object, not declared by hand

The core idea is that you do not list the controls. By default, CSS GUI generates controls based on the style properties you pass, and the smallest example shows that in a handful of lines. The style object holds values, and each numeric value carries its unit as a separate field.

```js
import { useState } from 'react'
import { Editor, styled } from '@compai/css-gui'

export const MyEditor = () => {
  const [styles, setStyles] = useState({
    fontSize: { value: 16, unit: 'px' },
    lineHeight: { value: 1.4, unit: 'number' },
    color: 'tomato',
  })

  return (
    <>
      <Editor styles={styles} onChange={setStyles} />
      <styled.p styles={styles}>Hello, world!</styled.p>
    </>
  )
}
```

The styled component is what makes this more than a control panel. The same style object both drives the editor and renders the element, so the preview and the controls cannot drift apart, and there is no separate CSS string to keep in sync. The unit field is the detail to notice, since font size is sixteen pixels while line height is a plain number, and a representation that lost the distinction between those two could not produce valid CSS.

## Composing your own controls and targeting pseudo-elements

For more customization, you can compose your own controls and style pseudo-elements, which the README shows by passing children to the Editor instead of letting it decide.

```js
import { useState } from 'react'
import { Editor, Inputs, styled } from '@compai/css-gui'

export const MyEditor = () => {
  const [styles, setStyles] = useState({
    fontSize: { value: 16, unit: 'px' },
    lineHeight: { value: 1.4, unit: 'number' },
    color: 'tomato',
  })

  return (
    <>
      <Editor styles={styles} onChange={setStyles}>
        <Inputs.FontSize />
        <Inputs.LineHeight />
        <Inputs.Color />
        <Fieldset type="pseudo-element" name="first-letter">
          <Inputs.FontSize />
          <Inputs.FontWeight />
          <Inputs.Color />
        </Fieldset>
      </Editor>
      <styled.p styles={styles}>Hello, world!</styled.p>
    </>
  )
}
```

The Inputs namespace gives you individual controls by name, so you pick the order and the subset you want rather than accepting everything the generator produces. The Fieldset component takes a type and a name, and here it targets the first-letter pseudo-element, which means the controls inside it apply to that pseudo-element rather than to the element itself. The feature list also mentions support for styling any element, pseudo-element or pseudo-class, so the same mechanism covers the rest of the selector surface.

## 280 properties, and the property list comes from MDN data

The feature list is quantitative in a useful way: controls for 280 CSS properties, theme awareness so you can select quickly from your brand, responsive value arrays, support for all CSS units, variable font support, more than a thousand Google fonts, support for styling any element, pseudo-element or pseudo-class, scrubbable number inputs, and smart default ranges. The last two are the ones that separate a control from a text field. A scrubbable number input lets you drag to change a value, which is the natural gesture for spacing and sizes, and smart default ranges mean the slider knows the plausible range for that property rather than offering a bare number. The theme awareness ties back to the design token work in the topic list, since a themed editor is what a brand system needs. The resources section explains where the property list comes from: MDN data provides the CSS specification documentation that drives the development of the parametric controls, and csstype provides the types for CSS properties and their values based on that MDN data.

## Adhering to the specification is the stated design constraint

The why section explains the ambition. The aim is to improve creative coding and web development workflows by making it simpler to attach parametric controls designed specifically to work with CSS, and the README says the controls are specifically built for CSS and will adhere to the CSS spec. It describes this as building on the web platform itself, allowing the expressiveness of CSS, HTML and SVG to create endless outputs. There is a linked page describing the goal and intention, which is to support the entire CSS specification beginning with the more common controls like Length, Color and Keywords and expanding over time to more complex stacks and grammars, with gradients, background-image and box shadow given as examples of what comes later. The positioning is that you can install the controls and use them locally in your own projects or use the hosted version, and the longer-term direction is for these controls to augment development environments such as VS Code.

## The inspirations are worth reading as a design brief

The inspiration list tells you what the authors were trying to combine. dat.gui is described as well known, especially in the generative design and three space. leva is a React project from pmndrs that builds its entire control set from hooks. Blender is cited because its shader and geometry nodes allow for rapid exploration within the available rendering space. And the MDN documentation is credited with being a long-standing introduction to how various CSS property values affect the appearance of a DOM element. Put together, that is a clear picture of the intent: a dat.gui style control panel, built the way leva builds one in React, with the exploration speed of Blender's node editors, and grounded in the CSS specification rather than in a fixed subset of properties.

## A Turborepo monorepo with an old published version

The repository is a TypeScript-based monorepo containing the main @compai/css-gui package, a docs site and supporting packages, with the root package.json using yarn workspaces over the apps and packages directories, turbo for task running and tsup for building. The scripts are the usual monorepo set, with separate build, dev, lint and test commands and the filter syntax for building only the docs or only the packages. Changesets handles versioning and publishing, and manypkg checks that the workspace packages are consistent, with a fix command alongside. The engines field requires npm 7 or newer and Node 24 or newer, and the packageManager is pinned to yarn 1.22.18, with a .nvmrc and a .node-version file in the repository. The published package version history is the thing to note: the listed releases are 0.0.247 from July 2023, 0.0.246 from November 2022 and 0.0.245 from September 2022, while the last push was on 2026-06-03. So the source is being worked on but the npm versions are three years old, and the licence is MIT.

## Conclusion

CSS GUI fits a team building an in-browser design tool or a themed editor on top of React, where hand-writing a control for every CSS property would be the bulk of the work. It does not fit someone who wants a finished design application, since it is a component library rather than an application, and it does not fit a plain CSS project without React. Verify first which of the properties your editor needs are covered, check that the published package version suits your React setup, and read the style object format carefully, because the value and unit pairing is what the whole thing is built on.

## FAQ

### What is CSS GUI?

It is a visual toolkit for editing element styles on the web, a React component library that generates controls for the style properties you pass it. It is theme-aware, performant, and can be composed into any React app, and it supports 280 CSS properties, all CSS units, variable fonts and more than a thousand Google fonts.

### How do I install and use CSS GUI?

Run npm install --save @compai/css-gui, then import the Editor and styled components and hold your styles in state. The Editor generates controls from the style object and the styled component renders the same object, so the controls and the preview stay in sync.

### Can I style pseudo-elements with CSS GUI?

Yes. Pass children to the Editor to pick specific controls, and wrap them in a Fieldset with a type and a name, for example type pseudo-element with name first-letter, to apply those controls to the pseudo-element rather than the element itself.

### Is CSS GUI still maintained?

The repository is not archived and the last push was on 2026-06-03, but the listed published versions are 0.0.247 from July 2023, 0.0.246 from November 2022 and 0.0.245 from September 2022, so the npm releases are considerably older than the source. The package is MIT licensed and the monorepo requires Node 24 or newer.

## Sources

- [components-ai/css.gui on GitHub](https://github.com/components-ai/css.gui)
- [License: MIT](https://github.com/components-ai/css.gui/blob/main/LICENSE)
- [Project website](https://components.ai/css-gui)
- [README](https://github.com/components-ai/css.gui/blob/main/README.md)
- [Releases](https://github.com/components-ai/css.gui/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/components-ai-css-gui