Overview

What is MicroGUI?

MicroGUI is a web application designed to help users build simple graphical user interfaces (GUIs). The main application includes:

A component menu
An editable canvas
A toolbar
A sidebar for editing components

It is possible to preview the GUI in a non-editable state by pressing the "Simulate" button. This button will open a separate tab and save the state of the canvas in the browser's local storage. The simulator runs automatically in the new tab using the saved state.

It is also possible to save the state of the canvas by pressing the "Save" button. This button will open a dialog box with the option to copy the state to the clipboard or save it as a file.

Why use MicroGUI?

MicroGUI is intended to simplify the development of GUIs for embedded devices. With the use of a drag-and-drop system and ready-made components, its biggest advantage is the short amount of time needed to produce a nice GUI. It doesn't require the user to have much knowledge of any specific programming languages, frameworks or packages.

Framworks and libraries

The web application is developed in the JavaScript framework React. It makes use of libraries Craft.js for canvas editing and MUI for components.

Structure of the project

The code is split into different trees. From the source folder, simply follow 'pages' to find the routes of the application. Inside 'components' there are subtrees for 'tools' such as the toolbar and the 'Edit' sidebar, and for 'user' such as components and utility functions.