Usage

The designer has two modes. One mode is available by cloning this repository and running the application. The other mode is used by starting the designer through the ReactUI.

Standalone Mode

The standalone mode is independent from the ReactUI and can be started without any VisionX application.

Installation

1. Clone this repository.
2. Make sure up to date the color-scheme and themes are in the public folder.
3. Run npm install to download the dependencies of the project.
4. Run npm start to start the designer.

Example

In the standalone mode instead of your ReactUI application, you'll see a tab menu. Every tab is a group of the various components the ReactUI has to offer.

With ReactUI

The designer can also be used directly in the ReactUI to change the styles of the application live.

Enabling the Designer in the ReactUI

To enable the designer in the ReactUI, the useDesigner property in the app.json file has to be set to true. Then the button to enable the designer will appear in the bottom right corner of the ReactUI. After enabling, the design menu will wrap the application and the sizes will be adjusted. The button to disable the designer moved from the bottom right corner into the topbar of the designer. Click it to stop designing.

Example