Editor v0.1.5


Try it

Getting Started

InstallationPro InstallationPROUpgrade to v0.1


Create a Custom Editor Panel






ColorsFont SizesTypography PROFonts PROLine Heights PROLetter Spacing PROShadows PRORadii PROSpace PRO

Upgrading to v0.1

HyperTheme Editor v0.1 release comes with a lot more developer features.

The 0.0.31 version is very minimal and provides only the components:

  • ThemeEditorProvider
  • ThemeEditorDrawerButton

The new v0.1 release instead provides all the building blocks necessary to create custom theme editors for Chakra UI.


In the v0.1 version the ThemeEditorDrawerButton has been renamed to: HyperThemeEditor, it still accepts all props from Chakra UI ButtonProps.

The ThemeEditorProvider still exists and hasn't changed since the v0.0.31.

To upgrade just swap the ThemeEditorDrawerButton with the HyperThemeEditor.

1. Change the import

Community version

- import { ThemeEditorDrawerButton } from '@hypertheme-editor/chakra-ui'
+ import { HyperThemeEditor } from '@hypertheme-editor/chakra-ui'

Pro version PRO

- import { ThemeEditorDrawerButton } from '@hypertheme-editor-pro/chakra-ui'
+ import { HyperThemeEditor } from '@hypertheme-editor-pro/chakra-ui'

2. Swap the component

Now you have just to use the new component.

HyperThemeEditor accepts the same props as ThemeEditorDrawerButton, so you don't have to change them.

- <ThemeEditorDrawerButton pos="fixed" bottom={4} right={2} />
+ <HyperThemeEditor pos="fixed" bottom={4} right={2} />

Next Steps

That's all! Now that you've upgraded to v0.1, it's time to create custom editors!

Check the next page to start.

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting