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.

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.).

Please bear with us as the API stabilizes and more (missing) functionality is added. We welcome any and all contributions and would love it if you try to experiment with CSS GUI and report bugs or open up feature requests.

npm install --save css-gui

import { useState } from 'react'
import { Editor, RenderElement } from 'css-gui'

export const MyEditor = () => {
  const [styles, setStyles] = useState({})

  return (
    <>
      <Editor value={styles} onChange={setStyles} />
      <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
open http://localhost:3001

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.