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