You don't build a data structure, you build a UI for the editor! It is better to cut back on the data structure for better usability by the editor.
- Use arrays with care
- Avoid nesting depth > 2 (both objects and arrays)
- If only one element in the object - move up one level
- Object into the array instead of two individual arrays
- No tech terms "href" or "src" or "alt" - Instead "link", "image" or "alternative text"
- Avoid words like "configuration" etc.
- Prefer to use singular for titles, not explanation/key points/prompts/sentences
- If more explanation is needed, use description field
- E.g. link to fontawesome
- Add description "optional" to optional fields
If it's a simple variant like "image left / text right" or "text left / image right" you can of course do it via a select. But if the variants are more complex and the contents differ depending on the variant, then it makes more sense to do this as a separate component.
- Select box instead of text field for predefined styles & icons
- Do not give too many options
When creating a new component in the component editor, an icon should be selected.
Keep IDs + labels consistent:
- E.g.: subline, subheadline, subtext == subheadline
- Naming of components
Updated 9 months ago