@virtuslab/tetrisly-theme-editor

Tetrisly Theme Editor

Tetrisly Theme Editor is a tool that allows you to create and customize themes for your Tetrisly applications. It is a part of the Tetrisly ecosystem, which is a design system and a set of tools for building modern web applications.

Features

• Customize Tetrisly Tokens - Change the values of Tetrisly tokens and see the changes in real-time.
• Export Theme - Export the theme as a JSON file or as theme Object and use it in your Tetrisly applications.

How to use

Installation

    npm install @virtuslab/tetrisly-theme-editor
    // or
    yarn add @virtuslab/tetrisly-theme-editor

To use Theme Editor you need to install React and React DOM as well.

    npm install react react-dom
    // or
    yarn add react react-dom

Usage

import { ThemeEditor } from '@virtuslab/tetrisly-theme-editor';

const App = () => {
  const handleOnTokensChange = (tokens) => {
    console.log('Tokens changed', tokens);
  };

  return <ThemeEditor onChange={handleOnTokensChange} />;
};

export default App;

Props

• onChange - A function that will be called when the tokens are changed. It will receive the updated tokens as an argument.
• tokens - An JSON object with the initial tokens. If not provided, the default Tetrisly tokens will be used.`

Demo

You can play with Tetrisly Theme Editor application live on https://demo.tetrisly.com

Resources

Useful Links

• Tetrisly Storybook
• Tetrisly Figma Docs
• Tetrisly Figma Preview
• xstyled Docs

Getting Help

If at any point you need help, feel lost, or have some feedback for us, you can create issues on our GitHub repository, or reach out to us on out Discord Server: Tetrisly Discord

Testimonials

If you want to share with us your thoughts on Tetrisly, or showcase what you have built with it (it could be any aspect of our product, not only the React library), you can do it here: Tetrisly Testimonials Form

VirtusLab

Meet VirtusLab, the visionary team behind Tetrisly for React and the Tetrisly design system. Trusted by clients, they excel in product design, design systems and front-end engineering, creating mission-critical solutions across the product lifecycle.