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


The useThemeEditor hook provides the core functionalities of HyperTheme Editor.

All the Editor Panels uses this hook to live edit the current theme.

It also provides undo/redo functionalities.

  • View source

  • If you want to create a custom theme editor, this is the hook you have to use.


    Community Version

    import { useThemeEditor } from '@hypertheme-editor/chakra-ui'

    Pro Version PRO

    import { useThemeEditor } from '@hypertheme-editor-pro/chakra-ui'

    Return value

    The useThemeEditor hook returns an object containing everything you need to create a custom Chakra UI Theme Editor.

    Here's a complete list of the returned object:

    themeThemeCurrent active theme
    initialThemeThemethe initial Theme provided by the ChakraProvider component
    setTheme(theme: Theme) => voidset immediately a new theme, the theme param must be a complete Chakra UI theme object
    canUndobooleanreturn true when undo history is not empty
    canRedobooleanreturn true when redo history is not empty
    undo() => voidundo last theme change, calling this function causes a live edit
    redo() => voidredo last theme undo, calling this function causes a live edit


    Retrieve current theme

    Save current theme

    In this example we're simulating a custom save button that saves the customized theme to an api.

    As you have been noticed, this example is exactly the same of Retrieve current theme example:

    setTheme example

    In this example we're simply swapping the red.500 color with the blue.500 color.

    This component is useless but it demonstrates that calling the setTheme causes an instant theme live edit:

    Manage changes history

    This example explains how to create custom undo/redo buttons.

    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting