HyperTheme

Editor v0.1.5

PricingDocsChangelog

Try it

Preview

Powerful theme editor for your next:

 

The Theme Editor you always wanted

Buy now

Getting Started



Community version

1. Install it

Install with NPM:

npm i @hypertheme-editor/chakra-ui

or with Yarn:

yarn add @hypertheme-editor/chakra-ui

2. Set up

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>
)
}

3. Enjoy

You now have an inline editor in your project.

Theme Editor created by Designers and Developers

We created a tool that helps designers, developers and companies design beautiful themes.

Live theme editor

With the HyperTheme Editor you can edit and customize your theme live on your project.


Customize any visual aspect

Colors

Fonts

Font Sizes

Line Heights

Letter Spacing

Shadows

Spacing

Radius


Colors editor


50

100

200

300

400

500

600

700

800

900

Palette generator


Shadow Builder


Typography editor

Fonts, font sizes, font weights, line heights, letter spacing..


Border radius editor


Spacing editor


Google fonts integration



Undo/Redo


Export theme

PRO

Powerful tools to help you create the best theme for your user interfaces

Go next level, unlock all PRO features.

Unlock PRO

Browsers compatibility

HyperTheme editor is compatible with most modern browser that supports CSSStyleValue API

Google Chrome


Microsoft Edge


Opera

Made with

Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Upcoming features

A roadmap of what you'll get in next updates

Start using HyperTheme editor for free!

The community edition lets you get going right away. Switch to HyperTheme Pro to get more features.

Community

Open source version of HyperTheme

Free

With limited funcionalities/exports

Colors
Font Sizes
Fonts
Font Weights
Line Heights
Letter Spacing
Shadows
Radius
Spacing
Free updates

Pro

Go next level, unlock all features

$29.90

$19.90

Lifetime access

Colors
Font Sizes
Fonts
Font Weights
Line Heights
Letter Spacing
Shadows
Radius
Spacing
Unlimited exports
Free updates

Extended

Use for end products that are “sold”

All Pro features
All source code
Use in end products that are sold
Premium support

Starts from:

$190.90

Get in touch with us for a quotation

Frequently asked questions

Still have question?

If you cannot find answer to your question our FAQ, you can always contact us. We'll answer to you shortly!

HyperTheme

Editor

  • Made with ❤️ in 🇮🇹 | byHyperting
  • © 2022 |

    All right reserved


  • Built on the@chakra_uilibrary

Follow us

Become affiliate

Earn 30% Commission

Join affiliate program

Legal

Need help?