diff --git a/package-lock.json b/package-lock.json
index 0794ed0..a47349d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2979,9 +2979,9 @@
       }
     },
     "node_modules/messageformat": {
-      "version": "4.0.0-4",
-      "resolved": "https://registry.npmjs.org/messageformat/-/messageformat-4.0.0-4.tgz",
-      "integrity": "sha512-c79wT00C+wc7N1weftk3J3mAkS9MxLDQePuVxNqFK2325Wej/pRszAGnQvlQ8N9nSaVeFENFUpRMKkHwjXY7Qw=="
+      "version": "4.0.0-5",
+      "resolved": "https://registry.npmjs.org/messageformat/-/messageformat-4.0.0-5.tgz",
+      "integrity": "sha512-BIgTxbPadK/UOQ1Ne/DECLt+iJttuDeHXfh8fNIdEl3ooDzNIMNjeYqo+Wd6duowQPm+DqWoAuFzLBijaymZoA=="
     },
     "node_modules/micromatch": {
       "version": "4.0.5",
diff --git a/src/components/content/entity/recipe-file/edit/RecipeFileEdit.svelte b/src/components/content/entity/recipe-file/edit/RecipeFileEdit.svelte
index 267926c..d940b2f 100644
--- a/src/components/content/entity/recipe-file/edit/RecipeFileEdit.svelte
+++ b/src/components/content/entity/recipe-file/edit/RecipeFileEdit.svelte
@@ -16,17 +16,13 @@ This component implements form fields for editing a recipe file.
 </script>
 
 <SvelteInput
-  label="{messages.labels.entityFields.recipeFile.name
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeFile.name.format()}"
   name="name"
   value="{name}"
   required="{true}"
 />
 <FileInput
-  label="{messages.labels.entityFields.recipeFile.path
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeFile.path.format()}"
   name="path"
   required="{true}"
 />
diff --git a/src/components/content/entity/recipe-file/list/RecipeFileList.svelte b/src/components/content/entity/recipe-file/list/RecipeFileList.svelte
index aa9e05c..a02f4e5 100644
--- a/src/components/content/entity/recipe-file/list/RecipeFileList.svelte
+++ b/src/components/content/entity/recipe-file/list/RecipeFileList.svelte
@@ -44,9 +44,7 @@ This component display an ordered list of all recipe files of a recipe step.
             updateOrder(recipeFileRepository, $list, id);
           }}"
           confirmation="{true}"
-          >{messages.labels.actions.delete
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.delete.format()}</SvelteButton
         >
       </li>
     {/each}
@@ -64,9 +62,7 @@ This component display an ordered list of all recipe files of a recipe step.
   >
     <RecipeFileEdit />
     <SvelteButton type="submit"
-      >{messages.labels.actions.create
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.create.format()}</SvelteButton
     >
   </SvelteForm>
 {/if}
diff --git a/src/components/content/entity/recipe-file/view/RecipeFileView.svelte b/src/components/content/entity/recipe-file/view/RecipeFileView.svelte
index 5a87adf..5048d00 100644
--- a/src/components/content/entity/recipe-file/view/RecipeFileView.svelte
+++ b/src/components/content/entity/recipe-file/view/RecipeFileView.svelte
@@ -57,8 +57,7 @@ It includes functionality to optically recognize characters in the recipe file.
     on:click="{() =>
       void invoke(Command.OCR, { recipeFileId: id }).then((result) => {
         output = result;
-      })}"
-    >{messages.labels.actions.ocr.resolveMessage().toString()}</SvelteButton
+      })}">{messages.labels.actions.ocr.format()}</SvelteButton
   >
   <output for="{buttonId}">
     <iframe
diff --git a/src/components/content/entity/recipe-ingredient/edit/RecipeIngredientEdit.svelte b/src/components/content/entity/recipe-ingredient/edit/RecipeIngredientEdit.svelte
index 3a16786..9660a52 100644
--- a/src/components/content/entity/recipe-ingredient/edit/RecipeIngredientEdit.svelte
+++ b/src/components/content/entity/recipe-ingredient/edit/RecipeIngredientEdit.svelte
@@ -123,9 +123,7 @@ The event `edit` is fired when the user makes yn change to any field. The event
   name="quantity"
   type="number"
   value="{innerQuantity}"
-  label="{messages.labels.entityFields.recipeIngredient.quantity
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.quantity.format()}"
   min="0"
 />
 <SvelteInput
@@ -134,9 +132,7 @@ The event `edit` is fired when the user makes yn change to any field. The event
   on:paste
   name="unit"
   value="{innerUnit}"
-  label="{messages.labels.entityFields.recipeIngredient.unit
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.unit.format()}"
   list="{UNIT_LIST_ID}"
 />
 <Autocomplete
@@ -150,9 +146,7 @@ The event `edit` is fired when the user makes yn change to any field. The event
   value="{innerIngredientId ? [innerIngredientId] : []}"
   userInput="{innerIngredientName}"
   excludedValues="{usedIngredientIds}"
-  label="{messages.labels.entityFields.recipeIngredient.ingredient
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.ingredient.format()}"
   callback="{async (userInput) => (ingredientIdUserInput = userInput)}"
   results="{whenLoadingDefault($ingredientIdResults, [])}"
   createCallback="{(userInput) =>
@@ -167,7 +161,5 @@ The event `edit` is fired when the user makes yn change to any field. The event
   on:paste
   name="quality"
   value="{innerQuality}"
-  label="{messages.labels.entityFields.recipeIngredient.quality
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeIngredient.quality.format()}"
 />
diff --git a/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList.svelte b/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList.svelte
index 3ad822e..2672a7b 100644
--- a/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList.svelte
+++ b/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList.svelte
@@ -105,9 +105,7 @@ It also displays displays the ingredients recipes drafts.
             updateOrder(recipeIngredientRepository, $list, id);
           }}"
           confirmation="{true}"
-          >{messages.labels.actions.delete
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.delete.format()}</SvelteButton
         >
       </li>
     {/each}
@@ -154,9 +152,7 @@ It also displays displays the ingredients recipes drafts.
       usedIngredientIds="{whenLoadingDefault($usedIngredientsList, [])}"
     />
     <SvelteButton type="submit"
-      >{messages.labels.actions.create
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.create.format()}</SvelteButton
     >
   </SvelteForm>
 {/if}
diff --git a/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList/AdditionalIngredientsForm.svelte b/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList/AdditionalIngredientsForm.svelte
index a4a2212..63d582a 100644
--- a/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList/AdditionalIngredientsForm.svelte
+++ b/src/components/content/entity/recipe-ingredient/list/RecipeIngredientList/AdditionalIngredientsForm.svelte
@@ -103,9 +103,7 @@ The event `done` is emitted either on creation or cancellation. This can be used
               parsedRecipeIngredients = parsedRecipeIngredients;
             }}"
             confirmation="{true}"
-            >{messages.labels.actions.remove
-              .resolveMessage()
-              .toString()}</SvelteButton
+            >{messages.labels.actions.remove.format()}</SvelteButton
           >
         </li>
       {/each}
@@ -113,14 +111,13 @@ The event `done` is emitted either on creation or cancellation. This can be used
     <SvelteButton
       on:click="{() => {
         parsedRecipeIngredients = [...parsedRecipeIngredients, { name: '' }];
-      }}"
-      >{messages.labels.actions.add.resolveMessage().toString()}</SvelteButton
+      }}">{messages.labels.actions.add.format()}</SvelteButton
     >
   </SvelteFieldset>
   <SvelteButton type="submit"
-    >{messages.labels.actions.create.resolveMessage().toString()}</SvelteButton
+    >{messages.labels.actions.create.format()}</SvelteButton
   >
   <SvelteButton on:click="{() => dispatch('done')}"
-    >{messages.labels.actions.cancel.resolveMessage().toString()}</SvelteButton
+    >{messages.labels.actions.cancel.format()}</SvelteButton
   >
 </SvelteForm>
diff --git a/src/components/content/entity/recipe-ingredient/view/RecipeIngredientView.svelte b/src/components/content/entity/recipe-ingredient/view/RecipeIngredientView.svelte
index c338317..2dbca94 100644
--- a/src/components/content/entity/recipe-ingredient/view/RecipeIngredientView.svelte
+++ b/src/components/content/entity/recipe-ingredient/view/RecipeIngredientView.svelte
@@ -119,17 +119,17 @@ It also takes care of the unit conversion.
   function translateUnit(unit, value) {
     switch (unit) {
       case Unit.MASS_KILOGRAM:
-        return messages.units.kilogram.resolveMessage({ value }).toString();
+        return messages.units.kilogram.format({ value });
       case Unit.MASS_GRAM:
-        return messages.units.gram.resolveMessage({ value }).toString();
+        return messages.units.gram.format({ value });
       case Unit.MASS_POUND:
-        return messages.units.pound.resolveMessage({ value }).toString();
+        return messages.units.pound.format({ value });
       case Unit.VOLUME_LITRE:
-        return messages.units.litre.resolveMessage({ value }).toString();
+        return messages.units.litre.format({ value });
       case Unit.VOLUME_MILLILITRE:
-        return messages.units.millilitre.resolveMessage({ value }).toString();
+        return messages.units.millilitre.format({ value });
       case Unit.VOLUME_US_CUP:
-        return messages.units.usCup.resolveMessage({ value }).toString();
+        return messages.units.usCup.format({ value });
     }
   }
 
diff --git a/src/components/content/entity/recipe-step/edit/RecipeStepEdit.svelte b/src/components/content/entity/recipe-step/edit/RecipeStepEdit.svelte
index c3df453..b50a5d5 100644
--- a/src/components/content/entity/recipe-step/edit/RecipeStepEdit.svelte
+++ b/src/components/content/entity/recipe-step/edit/RecipeStepEdit.svelte
@@ -17,8 +17,6 @@ This component implements form fields to edit a recipe step.
 <SvelteTextarea
   name="description"
   value="{description}"
-  label="{messages.labels.entityFields.recipeStep.description
-    .resolveMessage()
-    .toString()}"
+  label="{messages.labels.entityFields.recipeStep.description.format()}"
   required="{true}"
 />
diff --git a/src/components/content/entity/recipe-step/list/RecipeStepList.svelte b/src/components/content/entity/recipe-step/list/RecipeStepList.svelte
index 3a0d6b6..0e7253a 100644
--- a/src/components/content/entity/recipe-step/list/RecipeStepList.svelte
+++ b/src/components/content/entity/recipe-step/list/RecipeStepList.svelte
@@ -42,9 +42,7 @@ This component displays an ordered list of recipe steps of a recipe.
         updateOrder(recipeStepRepository, $list, id);
       }}"
       confirmation="{true}"
-      >{messages.labels.actions.delete
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.delete.format()}</SvelteButton
     >
   {/each}
   <SvelteForm
@@ -58,15 +56,13 @@ This component displays an ordered list of recipe steps of a recipe.
     }}"
   >
     <h2>
-      {messages.headings.recipeStep.resolveMessage({
+      {messages.headings.recipeStep.format({
         number: $list.length + 1,
       })}
     </h2>
     <RecipeStepEdit />
     <SvelteButton type="submit"
-      >{messages.labels.actions.create
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.create.format()}</SvelteButton
     >
   </SvelteForm>
 {/if}
diff --git a/src/components/content/entity/recipe-step/view/RecipeStepView.svelte b/src/components/content/entity/recipe-step/view/RecipeStepView.svelte
index b5d80a6..fff6dba 100644
--- a/src/components/content/entity/recipe-step/view/RecipeStepView.svelte
+++ b/src/components/content/entity/recipe-step/view/RecipeStepView.svelte
@@ -28,13 +28,11 @@ This component displays the content of a recipe step.
 
 {#if isLoaded($recipeStep)}
   <h2>
-    {messages.headings.recipeStep
-      .resolveMessage({ number: $recipeStep.order })
-      .toString()}
+    {messages.headings.recipeStep.format({ number: $recipeStep.order })}
   </h2>
-  <h3>{messages.headings.ingredients.resolveMessage().toString()}</h3>
+  <h3>{messages.headings.ingredients.format()}</h3>
   <RecipeIngredientList recipeStepId="{id}" factor="{factor}" />
-  <h3>{messages.headings.description.resolveMessage().toString()}</h3>
+  <h3>{messages.headings.description.format()}</h3>
   <Editable
     on:edit="{async ({ detail: { values, changed } }) => {
       const update = { id };
@@ -49,6 +47,6 @@ This component displays the content of a recipe step.
     </svelte:fragment>
     <RecipeStepEdit slot="edit" description="{$recipeStep.description}" />
   </Editable>
-  <h3>{messages.headings.files.resolveMessage().toString()}</h3>
+  <h3>{messages.headings.files.format()}</h3>
   <RecipeFileList recipeStepId="{id}" />
 {/if}
diff --git a/src/components/content/entity/recipe/list/RecipeList.svelte b/src/components/content/entity/recipe/list/RecipeList.svelte
index a508423..8a786e6 100644
--- a/src/components/content/entity/recipe/list/RecipeList.svelte
+++ b/src/components/content/entity/recipe/list/RecipeList.svelte
@@ -42,9 +42,9 @@ This component lists all recipes with a form to create a new recipe.
     } catch (reason) {
       if (reason instanceof ExternalRecipeUrlNotSupportedError) {
         input.setAndReportCustomValidity(
-          messages.validity.externalRecipeUrlNotSupported
-            .resolveMessage({ url: reason.url })
-            .toString(),
+          messages.validity.externalRecipeUrlNotSupported.format({
+            url: reason.url,
+          }),
         );
         return;
       }
@@ -66,10 +66,8 @@ This component lists all recipes with a form to create a new recipe.
             void recipeRepository.delete(id);
           }
         },
-        label: messages.labels.actions.delete.resolveMessage().toString(),
-        labelAll: messages.labels.actions.deleteSelectedItems
-          .resolveMessage()
-          .toString(),
+        label: messages.labels.actions.delete.format(),
+        labelAll: messages.labels.actions.deleteSelectedItems.format(),
         confirmation: true,
       },
     ]}"
@@ -83,19 +81,13 @@ This component lists all recipes with a form to create a new recipe.
       bind:this="{input}"
       name="name"
       required="{true}"
-      label="{messages.labels.entityFields.recipe.name
-        .resolveMessage()
-        .toString()}"
+      label="{messages.labels.entityFields.recipe.name.format()}"
     />
     <SvelteButton type="submit" disabled="{loadingExternalRecipe}"
       ><span aria-live="polite"
         >{#if loadingExternalRecipe}<SvelteProgress
-            label="{messages.labels.descriptions.progress.loadingExternalRecipe
-              .resolveMessage()
-              .toString()}"
-          />{:else}{messages.labels.actions.create
-            .resolveMessage()
-            .toString()}{/if}</span
+            label="{messages.labels.descriptions.progress.loadingExternalRecipe.format()}"
+          />{:else}{messages.labels.actions.create.format()}{/if}</span
       ></SvelteButton
     >
   </SvelteForm>
diff --git a/src/components/content/entity/recipe/view/RecipeView.svelte b/src/components/content/entity/recipe/view/RecipeView.svelte
index 970b951..7face83 100644
--- a/src/components/content/entity/recipe/view/RecipeView.svelte
+++ b/src/components/content/entity/recipe/view/RecipeView.svelte
@@ -31,7 +31,7 @@ This component displays the content of a recipe.
       on:input="{({ detail }) => (factor = detail)}"
       name="factor"
       type="number"
-      label="{messages.labels.factor.resolveMessage().toString()}"
+      label="{messages.labels.factor.format()}"
       value="{factor}"
       min="{0}"
     />
diff --git a/src/components/element/ActionableList.svelte b/src/components/element/ActionableList.svelte
index a1c8d33..a135148 100644
--- a/src/components/element/ActionableList.svelte
+++ b/src/components/element/ActionableList.svelte
@@ -75,9 +75,7 @@
   bind:this="{selectAllInput}"
   on:input="{onInputSelectAll}"
   type="checkbox"
-  aria-label="{messages.labels.descriptions.bulkActions.selectAllItems
-    .resolveMessage()
-    .toString()}"
+  aria-label="{messages.labels.descriptions.bulkActions.selectAllItems.format()}"
   checked="{allSelected}"
   indeterminate="{allSelected === undefined}"
 />
@@ -86,9 +84,7 @@
     <li>
       <input
         type="checkbox"
-        aria-label="{messages.labels.descriptions.bulkActions.selectItem
-          .resolveMessage()
-          .toString()}"
+        aria-label="{messages.labels.descriptions.bulkActions.selectItem.format()}"
         bind:checked="{checked[item]}"
       /><slot item="{item}" />{#each actions as action}<SvelteButton
           on:click="{() => action.callback([item])}"
diff --git a/src/components/element/form/Autocomplete.svelte b/src/components/element/form/Autocomplete.svelte
index 93d3f2f..9074664 100644
--- a/src/components/element/form/Autocomplete.svelte
+++ b/src/components/element/form/Autocomplete.svelte
@@ -146,22 +146,16 @@ The `select` event is fired when a value is selected or deselected. Its detail i
         ...[
           (value) =>
             value.length < min
-              ? messages.validity.autocomplete.min
-                  .resolveMessage({ min })
-                  .toString()
+              ? messages.validity.autocomplete.min.format({ min })
               : undefined,
           (value) =>
             value.length > max
-              ? messages.validity.autocomplete.max
-                  .resolveMessage({ max })
-                  .toString()
+              ? messages.validity.autocomplete.max.format({ max })
               : undefined,
           (value) => {
             for (const item of value) {
               if (excludedValues.includes(item)) {
-                return messages.validity.autocomplete.includesExcluded
-                  .resolveMessage()
-                  .toString();
+                return messages.validity.autocomplete.includesExcluded.format();
               }
             }
           },
@@ -196,9 +190,7 @@ The `select` event is fired when a value is selected or deselected. Its detail i
   <span
     >{#each innerValue as item}<span
         ><slot item="{item}" /><SvelteButton on:click="{() => deselect(item)}"
-          >{messages.labels.actions.delete
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.delete.format()}</SvelteButton
         ></span
       >{/each}</span
   >
@@ -235,9 +227,7 @@ The `select` event is fired when a value is selected or deselected. Its detail i
         <SvelteButton
           on:click="{() => createAndSelect()}"
           disabled="{innerValue.length >= max}"
-          >{messages.labels.actions.create
-            .resolveMessage()
-            .toString()}</SvelteButton
+          >{messages.labels.actions.create.format()}</SvelteButton
         >
       </li>
     {/if}
diff --git a/src/components/element/form/FileInput.svelte b/src/components/element/form/FileInput.svelte
index 359bd82..42309f8 100644
--- a/src/components/element/form/FileInput.svelte
+++ b/src/components/element/form/FileInput.svelte
@@ -100,10 +100,7 @@ The `input` or `change` events are fired when the user sets the value of the fie
       if (selected) {
         onDialogOrFileDrop(selected);
       }
-    }}"
-    >{messages.labels.actions.file.open
-      .resolveMessage()
-      .toString()}</SvelteButton
+    }}">{messages.labels.actions.file.open.format()}</SvelteButton
   >
   <input
     bind:this="{input}"
diff --git a/src/components/element/form/SvelteSelect.svelte b/src/components/element/form/SvelteSelect.svelte
index d033f84..21aa78d 100644
--- a/src/components/element/form/SvelteSelect.svelte
+++ b/src/components/element/form/SvelteSelect.svelte
@@ -29,10 +29,9 @@ The `input` or `change` events are fired when the user selects an option.
    * the form element placeholder
    * @type {string}
    */
-  export let placeholder =
-    messages.imperatives.selectPlaceholder.resolveMessage({
-      label,
-    });
+  export let placeholder = messages.imperatives.selectPlaceholder.format({
+    label,
+  });
   /**
    * whether the form element is required or not
    * @type {boolean}
diff --git a/src/components/layout/ConfirmDialog.svelte b/src/components/layout/ConfirmDialog.svelte
index 9776568..9a38759 100644
--- a/src/components/layout/ConfirmDialog.svelte
+++ b/src/components/layout/ConfirmDialog.svelte
@@ -20,23 +20,17 @@ These events are not fired when the dialog is closed programmatically.
    * The question to ask the user
    * @type {string}
    */
-  export let question = messages.questions.confirmation
-    .resolveMessage()
-    .toString();
+  export let question = messages.questions.confirmation.format();
   /**
    * The cancellation text to show to the user
    * @type {string}
    */
-  export let cancel = messages.labels.actions.cancel
-    .resolveMessage()
-    .toString();
+  export let cancel = messages.labels.actions.cancel.format();
   /**
    * The confirmation text to show to the user
    * @type {string}
    */
-  export let confirm = messages.labels.actions.confirm
-    .resolveMessage()
-    .toString();
+  export let confirm = messages.labels.actions.confirm.format();
 
   /** @type {HTMLDialogElement|undefined} */
   let dialog;
diff --git a/src/components/layout/Editable.svelte b/src/components/layout/Editable.svelte
index 18f70d9..4ec84b6 100644
--- a/src/components/layout/Editable.svelte
+++ b/src/components/layout/Editable.svelte
@@ -28,9 +28,7 @@ The `edit` event is fired on submitting this form. The detail of this event is t
   >
     <slot name="edit" />
     <SvelteButton type="submit"
-      >{messages.labels.actions.update
-        .resolveMessage()
-        .toString()}</SvelteButton
+      >{messages.labels.actions.update.format()}</SvelteButton
     >
   </SvelteForm>
 {:else}
@@ -38,6 +36,6 @@ The `edit` event is fired on submitting this form. The detail of this event is t
 {/if}
 <SvelteButton on:click="{() => (edit = !edit)}"
   >{edit
-    ? messages.labels.actions.cancel.resolveMessage().toString()
-    : messages.labels.actions.edit.resolveMessage().toString()}</SvelteButton
+    ? messages.labels.actions.cancel.format()
+    : messages.labels.actions.edit.format()}</SvelteButton
 >