getting-started.mdx

import { FirstParagraph } from '../components/FirstParagraph' import { Container } from '../components/Container'

Getting Started

Get going with CSS GUI in a few steps.

<iframe width="100%" style={{ marginBottom: '2rem', aspectRatio: '16 / 9'}} src="https://www.youtube.com/embed/b6J2TGyDYc0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Installation

Install CSS GUI with npm:

npm install --save @compai/css-gui

Or yarn:

yarn add @compai/css-gui

Usage

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