CSS GUIv0.0.247DocsPropertiesGitHubLog inSign up

Editor

An all-in-one component for editing the CSS of a DOM tree. Combine it with your rendering to create a full-fledged editable canvas.

This is the primary component you'll interact with in most usecases.

If you pass a style object to the Editor it will generate the controls based on its contents.

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

export const MyEditor = () => {
  const [styles, setStyles] = useState({
    fontSize: { value: 16, unit: 'px' },
    color: 'tomato',
    backgroundColor: '#000',
  })

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

Composition Usage

In some cases you might want more granular control of the Editor and the controls used. You can compose inputs yourselves in this scenario:

import { useState } from 'react'
import Link from 'next/link'
import { Editor, Inputs, styled, codegen } from '@compai/css-gui'

export function Demo() {
  const [styles, setStyles] = useState({})

  return (
    <>
      <Editor styles={styles} onChange={setStyles}>
        <div>
          <h3>Typography</h3>
          <Inputs.FontSize />
          <Inputs.LineHeight />
          <Inputs.TextAlign />
          <Inputs.FontStretch />
          <Inputs.Margin />
          <Inputs.FontFamily />
          <h3>Colors</h3>
          <Inputs.Color />
          <Inputs.BackgroundColor />
          <h3>Size</h3>
          <Inputs.Width />
          <Inputs.MaxWidth />
          <Inputs.Height />
        </div>
      </Editor>
      <styled.p styles={styles}>
        “The parameters comprise sequences which are theoretically infinite but
        limits are, of course, set to them in practice. There is an upward limit
        to size and certainly a downward one... Within these sequences there are
        reasonable bounds; extremes set by technical and functional experience”
        <br /> <br />
        <em>
          In
          <a
            href="https://www.lars-mueller-publishers.com/designing-programmes-0"
            style={{ color: styles.color }}
          >
            Designing Programmes
          </a> by Karl Gerstner
        </em>
      </styled.p>
      <pre>{codegen.css(styles)}</pre>
    </>
  )
}

Customizing Inputs

When using the composition-based approach, you can customize the label, steps, range.

<Inputs.FontSize
  label="Size"
  steps={{
    px: 1,
    em: 0.2,
  }}
  range={{
    px: [1, 256],
    em: [0.1, 16],
  }}
/>

Hiding Responsive Controls

In some situations you may not want responsive controls, if that's the case you can pass hideResponsiveControls={true} to the Editor component.

If a value comes in as a ResponsiveLength which is an array of values the responsive input will still be shown. But the toggle to switch between a standard Length and a ResponsiveLength won't be exposed.

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

export function Demo() {
  const [styles, setStyles] = useState({})

  return (
    <>
      <Editor
        styles={styles}
        onChange={setStyles}
        hideResponsiveControls={true}
      >
        <Inputs.FontSize />
      </Editor>
      <styled.p styles={styles}>Hello, world!</styled.p>
    </>
  )
}