Install with NPM:
npm i @hypertheme-editor/chakra-ui
or with Yarn:
yarn add @hypertheme-editor/chakra-ui
Installation is super easy and fast:
- Add the component <ThemeEditorProvider />
just below the <ChakraProvider />
component.
- Add the component <HyperThemeEditor />
.
Here's an example:
import * as React from "react"import { ChakraProvider } from "@chakra-ui/react"import { ThemeEditorProvider, HyperThemeEditor } from '@hypertheme-editor/chakra-ui'import theme from './my-theme'function App() {return (<ChakraProvider theme={theme}><ThemeEditorProvider><HyperThemeEditor pos="fixed" bottom={4} right={2} /></ThemeEditorProvider></ChakraProvider>)}
You now have an inline editor in your project.
Hypertheme Editor PRO is hosted on a private NPM registry accessible with a license.
Don't have a license key?Get your license
Create a .npmrc
file in the root folder of your project with the below content:
@hypertheme-editor-pro:registry=https://npm.hyperthe.meregistry=https://registry.npmjs.com
To login in the private registry you have to run npm run login
, when asked use hypertheme
as the Username and your license key as the Password:
$ npm login --registry=https://npm.hyperthe.meUsername: hyperthemePassword: <YOUR_LICENSE_KEY>Email: (this IS public) <YOUR_EMAIL>Logged in as hypertheme on https://npm.hyperthe.me/.
Install with NPM:
npm i @hypertheme-editor-pro/chakra-ui
or with Yarn:
yarn add @hypertheme-editor-pro/chakra-ui
Installation is super easy and fast:
- Add the component <ThemeEditorProvider />
just below the <ChakraProvider />
component.
- Add the component <HyperThemeEditor />
.
Here's an example:
import * as React from "react"import { ChakraProvider } from "@chakra-ui/react"import { ThemeEditorProvider, HyperThemeEditor } from '@hypertheme-editor-pro/chakra-ui'import theme from './my-theme'function App() {return (<ChakraProvider theme={theme}><ThemeEditorProvider><HyperThemeEditor pos="fixed" bottom={4} right={2} /></ThemeEditorProvider></ChakraProvider>)}
You now have an inline editor in your project.
Get in touch with us to learn more about.
We created a tool that helps designers, developers and companies design beautiful themes.
With the HyperTheme Editor you can edit and customize your theme live on your project.
Colors
Fonts
Font Sizes
Line Heights
Letter Spacing
Shadows
Spacing
Radius
50
100
200
300
400
500
600
700
800
900
Fonts, font sizes, font weights, line heights, letter spacing..
Go next level, unlock all PRO features.
HyperTheme editor is compatible with most modern browser that supports CSSStyleValue API
A roadmap of what you'll get in next updates
The community edition lets you get going right away. Switch to HyperTheme Pro to get more features.
Use for end products that are “sold”
Starts from:
Get in touch with us for a quotation
If you cannot find answer to your question our FAQ, you can always contact us. We'll answer to you shortly!
HyperTheme
Editor
© 2022 |
All right reserved
Need help?