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.).
We welcome any and all contributions. We'd love it if you try to experiment with CSS GUI and let us know how it goes. Please feel free to report bugs or make feature requests.
npm install --save @compai/css-gui
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 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 →
CSS GUI is a TypeScript-based monorepo that contains the main @compai/css-gui
package, a docs site,
and its supporting packages.