diff --git a/assets/tutorials/create-composite/create-composite-additional.png b/assets/tutorials/create-composite/create-composite-additional.png
new file mode 100644
index 00000000..ad465403
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-additional.png differ
diff --git a/assets/tutorials/create-composite/create-composite-binding.png b/assets/tutorials/create-composite/create-composite-binding.png
new file mode 100644
index 00000000..c0a4e162
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-binding.png differ
diff --git a/assets/tutorials/create-composite/create-composite-execution.gif b/assets/tutorials/create-composite/create-composite-execution.gif
new file mode 100644
index 00000000..2f7795ca
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-execution.gif differ
diff --git a/assets/tutorials/create-composite/create-composite-instance.png b/assets/tutorials/create-composite/create-composite-instance.png
new file mode 100644
index 00000000..5a01c0ab
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-instance.png differ
diff --git a/assets/tutorials/create-composite/create-composite-location.png b/assets/tutorials/create-composite/create-composite-location.png
new file mode 100644
index 00000000..392d5f89
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-location.png differ
diff --git a/assets/tutorials/create-composite/create-composite-setup.png b/assets/tutorials/create-composite/create-composite-setup.png
new file mode 100644
index 00000000..383bbf31
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-setup.png differ
diff --git a/assets/tutorials/create-composite/create-composite-specifique.png b/assets/tutorials/create-composite/create-composite-specifique.png
new file mode 100644
index 00000000..67f811ae
Binary files /dev/null and b/assets/tutorials/create-composite/create-composite-specifique.png differ
diff --git a/tutorials/create-composite.md b/tutorials/create-composite.md
new file mode 100644
index 00000000..8ed47bdf
--- /dev/null
+++ b/tutorials/create-composite.md
@@ -0,0 +1,73 @@
+---
+title: Création d'un composite
+parent: Tutoriels
+---
+
+Il est souvent nécessaire au sein des Synapps de répéter ou de paramétrer tout un ensemble d'acteurs, pour se faire on utilise le [composite]({{ site.baseurl }}{% link concepts/composite.md %}).
+
+### Ressources : {#ressource}
+
+>Composite simple permettant d'afficher un bouton qui ouvre une modale :
+>```
+>SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"composite1","name":"Composite 1"},"leadActor":{"type":"layout/stack","key":"stack1","children":[{"type":"input/button","key":"button1","properties":{"content":"Cliquer pour ouvrir la modale","mode":"primary","horizontalAlignment":"middle"}},{"type":"layout/modal","key":"modal-on-click1","properties":{"height":"450px","width":"450px","clickOutsideToClose":false},"additionalDefs":{"showTrigger":{"type":"actor","label":"Affichage","helperTxt":"Acteur qui déclenche l'affichage."},"hideTrigger":{"type":"actor","label":"Fermeture","helperTxt":"Acteur qui déclenche la fermeture."}},"additionals":{"showTrigger":"button1","hideTrigger":"button2"},"children":[{"type":"layout/stack","key":"stack2","children":[{"type":"display/text","key":"text1","properties":{"content":"Hello world !","horizontalAlignment":"middle","verticalAlignment":"middle"}},{"type":"input/button","key":"button2","properties":{"content":"Cliquer pour fermer la modale","horizontalAlignment":"middle","verticalAlignment":"middle","mode":"danger"}}],"properties":{"verticalAlignment":"expand"}}],"events":{"onPostInit":["const showTrigger = context.getActor(this.additionals.showTrigger);","","","if (showTrigger) {"," const originalOnClickFx = showTrigger.events.onClick ? showTrigger.events.onClick.fx : null;"," if (originalOnClickFx) {"," showTrigger.removeEvent('onClick');"," }",""," showTrigger.createEvent('onClick', (ctx) => {"," this.properties.isShown = true;"," if (originalOnClickFx) {"," originalOnClickFx(ctx);"," }"," });","}","","const hideTrigger = context.getActor(this.additionals.hideTrigger);","","if (hideTrigger) {"," const originalOnClickFx = hideTrigger.events.onClick ? hideTrigger.events.onClick.fx : null;"," if (originalOnClickFx) {"," hideTrigger.removeEvent('onClick');"," }",""," hideTrigger.createEvent('onClick', (ctx) => {"," this.properties.isShown = false;"," if (originalOnClickFx) {"," originalOnClickFx(ctx);"," }"," });","}"]}}],"properties":{"fontSize":"4vmin"}}}
+>```
+
+>Composite paramétré à l'aide d'une *propriété spécifique* permettant d'afficher un bouton qui ouvre une modale avec un texte personnalisable :
+>```
+>SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"composite1","name":"Composite 1","additionalDefs":{"myTexte":{"type":"text","label":"Mon texte","value":"Hello world !"}}},"leadActor":{"type":"layout/stack","key":"stack1","children":[{"type":"input/button","key":"button1","properties":{"content":"Cliquer pour ouvrir la modale","mode":"primary","horizontalAlignment":"middle"}},{"type":"layout/modal","key":"modal-on-click1","properties":{"height":"450px","width":"450px","clickOutsideToClose":false},"additionalDefs":{"showTrigger":{"type":"actor","label":"Affichage","helperTxt":"Acteur qui déclenche l'affichage."},"hideTrigger":{"type":"actor","label":"Fermeture","helperTxt":"Acteur qui déclenche la fermeture."}},"additionals":{"showTrigger":"button1","hideTrigger":"button2"},"children":[{"type":"layout/stack","key":"stack2","children":[{"type":"display/text","key":"text1","properties":{"content":"Hello world !","horizontalAlignment":"middle","verticalAlignment":"middle","fontSize":"3vmin"},"bindings":{"properties.content":"stage@properties.myTexte"}},{"type":"input/button","key":"button2","properties":{"content":"Cliquer pour fermer la modale","horizontalAlignment":"middle","verticalAlignment":"middle","mode":"danger","fontSize":"2vmin"}}],"properties":{"verticalAlignment":"expand"}}],"events":{"onPostInit":["const showTrigger = context.getActor(this.additionals.showTrigger);","","","if (showTrigger) {"," const originalOnClickFx = showTrigger.events.onClick ? showTrigger.events.onClick.fx : null;"," if (originalOnClickFx) {"," showTrigger.removeEvent('onClick');"," }",""," showTrigger.createEvent('onClick', (ctx) => {"," this.properties.isShown = true;"," if (originalOnClickFx) {"," originalOnClickFx(ctx);"," }"," });","}","","const hideTrigger = context.getActor(this.additionals.hideTrigger);","","if (hideTrigger) {"," const originalOnClickFx = hideTrigger.events.onClick ? hideTrigger.events.onClick.fx : null;"," if (originalOnClickFx) {"," hideTrigger.removeEvent('onClick');"," }",""," hideTrigger.createEvent('onClick', (ctx) => {"," this.properties.isShown = false;"," if (originalOnClickFx) {"," originalOnClickFx(ctx);"," }"," });","}"]}}],"properties":{"fontSize":"4vmin"}}}
+>```
+
+## Objectif du Tutoriel :
+
+Ce tutoriel vise à expliquer dans un premier temps comment créer un composite simple et à l'intégrer dans une scène .
+Par la suite, nous verrons comment paramétrer ce composite et comment modifier ce paramètre pour chaque instance de composite.
+
+# Étape 1 : Créer un composite
+
+Les composites sont accessibles depuis la librairie des [composites]({{ site.baseurl }}{% link concepts/composite.md %}).
+
+Nous allons donc créer un composite exemple avec quelques acteurs qui va permettre d'afficher un bouton qui ouvre une modale avec du texte. Ce composite est trouvable dans la partie [ressource](#ressource)
+
+>
+>
+
+
+# Étape 2 : Inclure des instances de composite dans ma scène
+
+Le composite que nous vennons de créer est maintenant disponible en bas de la liste des acteurs à ajouter :
+
+>
+
+Nous pouvons donc créer de multiples instances de ce composite au sein de notre scène, cela nous évitera d'avoir à dupliquer des acteurs.
+
+# Étape 3 : Ajouter des propriétés spécifiques de composite
+
+Les instances précédentes comportent toutes les mêmes acteurs avec exactement les mêmes informations, nous voudrions donc pouvoir personnaliser les informations au sein chaque instance.
+Nous allons donc ajouter des *propriétés spécifiques de composite*.
+
+Ces *propriétés spécifiques* sont semblables aux [additionelles]{{ site.baseurl }}{% link concepts/additionals.md %}.
+
+Pour ajouter une propriété spécifique à un composite, il faut se rendre sur le composite lui même, section spécifiques.
+
+>
+
+Pour ce tutoriel, nous allons créer une propriété spécifique de type *texte* et lier le texte affiché à l'intérieur de la modale à cette *propriété spécifique* :
+
+>
+
+>
+
+Cette *propriété spécifique* peut maintenant être retrouvée dans n'importe quelle instance de composite, nous pouvons ainsi changer le texte situé à l'intérieur de la modale pour chaque instance de composite.
+>📌 **REMARQUE**
+> Il est possible de lier ces propriété spécifiques.
+
+>
+
+# Étape 4 : Exécution de la synapp
+
+>
+
+Notre scène présente 3 instances du même composite mais chacun dispose de son texte à afficher dans la modale.
+Ce composite est trouvable dans la partie [ressource](#ressource)
+
+Nous avons paramétré notre composite à l'aide d'une *propriété spécifique*, il est ainsi possible d'ajouter de nombreuses *propriétés spécifiques* afin d'obtenir des composite entièrement customisable.
diff --git a/tutorials/index.md b/tutorials/index.md
index 5cc4a629..0257400c 100644
--- a/tutorials/index.md
+++ b/tutorials/index.md
@@ -16,10 +16,8 @@ nav_order: 5
### A venir
- Réaliser une navigation simple
-- Réaliser une navigation avec un acteur écran
- Passer des paramètres à une scène
- Utiliser les fournisseurs de variable
-- Créer un composite
- Créer un composite avec fournisseur de donnée
- Mise à la ligne dans un empilement
- Adapter la taille d'un texte à son contenu