HyperTheme

Editor v0.1.5

PricingDocsChangelog

Try it

Getting Started

InstallationPro InstallationPROUpgrade to v0.1

Guides

Create a Custom Editor Panel

Components

ThemeEditorProviderHyperThemeEditorThemeEditorThemeEditorDrawerThemeEditorDrawerHeaderThemeEditorDrawerFooterThemeEditorRootPanelThemeEditorButtonColorModeToggleThemeIcon

Hooks

useThemeEditor

Editors

ColorsFont SizesTypography PROFonts PROLine Heights PROLetter Spacing PROShadows PRORadii PROSpace PRO

Getting Started PRO

Obtain a license key

Hypertheme Editor PRO is hosted on a private NPM registry accessible with a license.

Don't have a license key? Get your license

Configure your project

Create a .npmrc file in the root folder of your project with the below content:

@hypertheme-editor-pro:registry=https://npm.hyperthe.me
registry=https://registry.npmjs.com

Login to Hypertheme Editor PRO NPM

To login in the private registry you have to run npm run login in a terminal, when asked use hypertheme as the Username and your license key as the Password:

$ npm login --registry=https://npm.hyperthe.me


Username: hypertheme
Password: <YOUR_LICENSE_KEY>
Email: (this IS public) <YOUR_EMAIL>


Logged in as hypertheme on https://npm.hyperthe.me/.

Installation

Install with NPM:

npm i @hypertheme-editor-pro/chakra-ui

or with Yarn:

yarn add @hypertheme-editor-pro/chakra-ui

Setup Provider

HyperTheme Editor needs the ThemeEditorProvider in order to work and live edit the current Chakra UI theme.

At the root of your application add the ThemeEditorProvider just below the ChakraProvider component like in this example:

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
// 1. import `ThemeEditorProvider` component
import { ThemeEditorProvider } from '@hypertheme-editor-pro/chakra-ui'
import theme from './my-theme'


function App() {
  // 2. Add the `ThemeEditorProvider` component just below the `ChakraProvider` components
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <Component />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}

Add the default ThemeEditor

HyperTheme Editor comes with a plug&play HyperThemeEditor component that gives you immediately all the features ready to be used.

The HyperThemeEditor renders a Chakra UI Button and accepts all the ButtonProps, so you can add it wherever you want.

In this example we're adding the ThemeEditor in a Layout rendered by all pages of our application:

import * as React from 'react'
import { Container } from '@chakra-ui/react'
import { HyperThemeEditor } from '@hypertheme-editor-pro/chakra-ui'


function Layout({ children }) {
  return (
    <Container maxW="container.lg">
      <HyperThemeEditor pos="absolute" top={2} right={2} />
      {children}
    </Container>
  )
}

Install Sora Font Family (Optional)

HyperTheme interface uses Sora font-family as his default font.

You can install it and import it at the root level of your application.

To install, go into your project root and run:

npm i @fontsource/sora

or if you use Yarn:

yarn add @fontsource/sora

Now, you can add it at the root of your application, like in the example below:

import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { ThemeEditorProvider } from '@hypertheme-editor-pro/chakra-ui'
import theme from './my-theme'


// import Sora font-family
import '@fontsource/sora/200.css'
import '@fontsource/sora/400.css'
import '@fontsource/sora/600.css'
import '@fontsource/sora/800.css'


function App() {
  return (
    <ChakraProvider theme={theme}>
      <ThemeEditorProvider>
        <Component />
      </ThemeEditorProvider>
    </ChakraProvider>
  )
}

Next steps

HyperTheme Editor is highly customizable, check the rest of the documentation to learn how to create custom theme editors.

Next

Upgrade to v0.1

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting