CSS GUI

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.

• Create and save designs →
• Read the documentation →
• Play with a demo on CodeSandbox →
• Watch an introduction on YouTube →

Features

• Controls for 280 CSS properties
• Theme aware so you can quickly select from your brand
• Responsive value arrays
• Support for all CSS units
• Variable font support
• +1000 Google fonts
• Support for styling any element, pseudo-element or pseudo-class
• Scrubbable number inputs
• Smart default ranges

⚠️ Under active development

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.

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 make feature requests.

Why?

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.

Supporting the full CSS spec

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

Installation

npm install --save @compai/css-gui

Usage

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

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>
    </>
  )
}

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

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>
    </>
  )
}

Read the full getting started guide →

Development

CSS GUI is a TypeScript-based monorepo that contains the main @compai/css-gui package, a docs site, and its supporting packages.

See the contributing guide →

Resources

• MDN data: Provides amazing documentation of the CSS spec which we use to drive the development of our parametric controls
• csstype: Types for CSS properties and their values based on MDN data

Inspiration

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