SVG Widget Studio

A toolkit for the creation of parameterized 2D design objects.

Overview

This library is intended to support the creation of design objects through coding with a mind towards:

• well-organized data structures
• persistence and iteration of design parameters
• developing multi-part 2D designs
• rich extensibility of user interface
• ease of distribution through online code-sharing platforms

This project depends upon React, Material UI (MUI), and mobx-keystone.

React is used to render the 2 sections of the widget workspace UI

• design area: the section that shows the SVG assets
• control panel: a series of inputs that adjust the design.

MK is used to create “tweakable” data structures that are registered as widgets. The MK models contain custom tweakable property types which express the data type as well as the input elements that control the value as seen in the control panel e.g. a boolean property controlled by a switch, a number in the range [0, 1] starting at 0.5.

Developers can create MK models and organize the information into nested trees of information. Internally, the control panel will render all of its top-level tweakable properties of the model using the rich set of UI tools in MUI. There are escape hatches to give the developer more fine-grained control of the control panel content.

The output of each widget is one or more design assets. Each design asset renders to a separate SVG file. Design assets specify the bounds of the asset (to serve as the viewBox of the SVG), the number of copies needed to produce each widget, and a component that renders the SVG based upon the data structure.

Widgets are registered by applying a customized