CSS GUIv0.0.246DocsPropertiesGitHubLog inSign up

Getting Started

Get going with CSS GUI in a few steps.


Install CSS GUI with npm:

npm install --save @compai/css-gui

Or yarn:

yarn add @compai/css-gui


Import the Editor and styled components to initialize controls and then render the element styles to your canvas.

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

export default function MyEditor() {
  const [styles, setStyles] = useState({
    fontSize: {
      value: 16,
      unit: 'px',

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