Visual development environment for CSS.

CSS GUI is a visual toolkit for editing element styles on the web. It's theme-aware, performant, and can be composed into any React app.

See the docs →

This project is a work in (rapid) progress.

Over the next few weeks the API will be stabilizing as more functionality is added. CSS GUI only supports a portion of the CSS spec currently, but the intention is to support it all in the future.

We welcome any and all contributions. We'd love it if you try to experiment with CSS GUI. Please feel free to report bugs or open up feature requests.

We want to improve creative coding and web development workflows by making it simpler to attach parametric controls that are designed specifically to work with CSS.

With CSS GUI, folks can visually edit and generate CSS. They can install the controls and use locally in their own projects or use our hosted version.

Eventually, these controls can also augment development environments like VS Code.

These controls are specifically built for CSS and will adhere to the CSS spec. This builds on the web platform itself, allowing the expressiveness of CSS/HTML/SVG to create endless outputs.

It's our goal and intention to support the entire CSS spec beginning with the more common controls like Length, Color, Keywords and expanding over time to more complex stacks and grammars (think gradients, background-image, box shadow, etc.).

npm install --save css-gui

By default, CSS GUI will provide controls based on the style properties you pass.

import { useState } from 'react'
import { Editor, RenderElement } 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} />
      <RenderElement tagName="p" styles={styles}>
        Hello, world!
      </RenderElement>
    </>
  )
}

For more customization, you can compose together your own controls and style pseudo-elements.

import { useState } from 'react'
import { Editor, Inputs, RenderElement } 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 />
        <PseudoFieldset name="first-letter">
          <Inputs.FontSize />
          <Inputs.FontWeight />
          <Inputs.Color />
        </PseudoFieldset>
      </Editor>
      <RenderElement tagName="p" styles={styles}>
        Hello, world!
      </RenderElement>
    </>
  )
}

Read the full getting started guide →

git clone https://github.com/components-ai/css.gui
cd css-gui
yarn

yarn dev

yarn test

On rare ocassions, especially when changing configurations, you might need to clear the cache and reinstall the dependencies:

yarn nuke

• MDN data
• csstype

• dat.gui well known, especially in the generative design/three space
• leva a React-based pmndrs project that builds the entire control set from hooks
• Blender - Shader and Geometry nodes allow for rapid exploration withiin the available rendering space
• MDN Docs have long been an amazing introduction to how various CSS property values will affect the appearance of a DOM element.