Good/bad patterns

Most important message

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

Group related fields

• Object into the array instead of two individual arrays

Always build title/label/description human readable

• 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

Describe fields that need explanation

• E.g. link to fontawesome
• Add description "optional" to optional fields

Display component variants across multiple Makaira components

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.

Order of the fields as displayed in the frontend

Use the correct type for the use case

Group Features

• Select box instead of text field for predefined styles & icons
• Do not give too many options

Choose a suitable icon for faster findability

When creating a new component in the component editor, an icon should be selected.

Tech Notes

Keep IDs + labels consistent:

• E.g.: subline, subheadline, subtext == subheadline
• Naming of components