From 95cda04fac9b1b92ab79bf70801683dd14d4f6ad Mon Sep 17 00:00:00 2001
From: Romain l'Ourson <rcrestey@gmail.com>
Date: Sun, 6 Aug 2023 17:48:28 +0200
Subject: [PATCH] Examples (#48)

* docs: add examples 00 to 04

* add examples 05

* add examples 06

* add examples 07

* add examples 08

* add examples 09

* add examples 10

* add examples 11

* add examples 12

* add examples 13

* add examples 14

* add examples 15

* add examples 16

* add examples 17

* add examples 18

* add examples 19-20

* add examples 21

* forgot flight booker

---------

Co-authored-by: Romain Crestey <romain.crestey@radiofrance.com>
---
 .../05-bindings/00-text-inputs/App.svelte     |  4 +-
 .../05-bindings/00-text-inputs/meta.json      |  2 +-
 .../05-bindings/01-numeric-inputs/meta.json   |  2 +-
 .../05-bindings/02-checkbox-inputs/App.svelte |  8 ++--
 .../05-bindings/02-checkbox-inputs/meta.json  |  2 +-
 .../05-bindings/03-group-inputs/App.svelte    | 34 +++++++-------
 .../05-bindings/03-group-inputs/meta.json     |  2 +-
 .../05-bindings/04-textarea-inputs/App.svelte |  6 +--
 .../05-bindings/04-textarea-inputs/meta.json  |  2 +-
 .../05-bindings/05-file-inputs/App.svelte     | 14 +++---
 .../05-bindings/05-file-inputs/meta.json      |  2 +-
 .../05-bindings/06-select-bindings/App.svelte | 17 ++++---
 .../05-bindings/06-select-bindings/meta.json  |  2 +-
 .../07-multiple-select-bindings/App.svelte    | 24 +++++-----
 .../07-multiple-select-bindings/meta.json     |  2 +-
 .../08-each-block-bindings/App.svelte         | 18 ++++---
 .../08-each-block-bindings/meta.json          |  2 +-
 .../05-bindings/09-media-elements/App.svelte  | 23 +++++----
 .../05-bindings/09-media-elements/meta.json   |  2 +-
 .../05-bindings/10-dimensions/App.svelte      |  4 +-
 .../12-component-bindings/App.svelte          |  4 +-
 .../12-component-bindings/Keypad.svelte       |  4 +-
 .../12-component-bindings/meta.json           |  2 +-
 documentation/examples/05-bindings/meta.json  |  2 +-
 .../06-lifecycle/00-onmount/App.svelte        |  6 +--
 .../06-lifecycle/01-ondestroy/App.svelte      |  4 +-
 .../examples/06-lifecycle/02-update/meta.json |  2 +-
 .../examples/06-lifecycle/03-tick/App.svelte  |  2 +-
 documentation/examples/06-lifecycle/meta.json |  2 +-
 .../07-stores/00-writable-stores/App.svelte   |  2 +-
 .../00-writable-stores/Resetter.svelte        |  2 +-
 .../07-stores/00-writable-stores/meta.json    |  2 +-
 .../01-auto-subscriptions/App.svelte          |  2 +-
 .../01-auto-subscriptions/Resetter.svelte     |  2 +-
 .../07-stores/01-auto-subscriptions/meta.json |  2 +-
 .../07-stores/02-readable-stores/App.svelte   |  4 +-
 .../07-stores/02-readable-stores/meta.json    |  2 +-
 .../07-stores/03-derived-stores/App.svelte    |  6 +--
 .../07-stores/03-derived-stores/meta.json     |  2 +-
 .../07-stores/04-custom-stores/App.svelte     |  4 +-
 .../07-stores/04-custom-stores/meta.json      |  2 +-
 .../examples/08-motion/00-tweened/meta.json   |  2 +-
 .../examples/08-motion/01-spring/App.svelte   |  5 +-
 .../examples/08-motion/01-spring/meta.json    |  2 +-
 documentation/examples/08-motion/meta.json    |  2 +-
 .../09-transitions/00-transition/App.svelte   |  2 +-
 .../09-transitions/00-transition/meta.json    |  2 +-
 .../App.svelte                                |  2 +-
 .../meta.json                                 |  2 +-
 .../09-transitions/02-in-and-out/App.svelte   |  2 +-
 .../09-transitions/02-in-and-out/meta.json    |  2 +-
 .../03-custom-css-transitions/App.svelte      |  2 +-
 .../03-custom-css-transitions/meta.json       |  2 +-
 .../04-custom-js-transitions/App.svelte       |  6 ++-
 .../04-custom-js-transitions/meta.json        |  2 +-
 .../05-transition-events/App.svelte           | 14 +++---
 .../05-transition-events/meta.json            |  2 +-
 .../06-deferred-transitions/App.svelte        |  5 +-
 .../06-deferred-transitions/meta.json         |  2 +-
 .../10-animations/00-animate/App.svelte       | 18 +++----
 .../10-animations/00-animate/meta.json        |  2 +-
 .../11-easing/00-easing/Controls.svelte       |  6 +--
 .../examples/11-easing/00-easing/meta.json    |  2 +-
 documentation/examples/11-easing/meta.json    |  2 +-
 .../examples/12-svg/01-clock/App.svelte       | 12 ++---
 .../examples/12-svg/01-clock/meta.json        |  2 +-
 .../examples/12-svg/02-bar-chart/App.svelte   |  8 ++--
 .../examples/12-svg/02-bar-chart/meta.json    |  2 +-
 .../examples/12-svg/03-area-chart/App.svelte  | 18 +++----
 .../examples/12-svg/03-area-chart/meta.json   |  2 +-
 .../examples/12-svg/04-scatterplot/App.svelte |  2 +-
 .../12-svg/04-scatterplot/Scatterplot.svelte  |  6 +--
 .../examples/12-svg/04-scatterplot/meta.json  |  2 +-
 .../12-svg/05-svg-transitions/App.svelte      |  4 +-
 .../12-svg/05-svg-transitions/meta.json       |  2 +-
 .../examples/13-actions/00-actions/App.svelte |  6 ++-
 .../examples/13-actions/00-actions/meta.json  |  2 +-
 .../App.svelte                                |  4 +-
 .../01-adding-parameters-to-actions/meta.json |  2 +-
 .../13-actions/03-actions-pannable/meta.json  |  2 +-
 .../examples/14-classes/00-classes/meta.json  |  2 +-
 .../14-classes/01-class-shorthand/App.svelte  |  4 +-
 .../14-classes/01-class-shorthand/meta.json   |  2 +-
 .../15-composition/00-slots/App.svelte        |  4 +-
 .../01-slot-fallbacks/App.svelte              |  4 +-
 .../01-slot-fallbacks/Box.svelte              |  2 +-
 .../01-slot-fallbacks/meta.json               |  2 +-
 .../15-composition/02-named-slots/App.svelte  |  6 +--
 .../02-named-slots/ContactCard.svelte         |  6 +--
 .../15-composition/02-named-slots/meta.json   |  2 +-
 .../15-composition/03-slot-props/App.svelte   | 13 +++--
 .../15-composition/03-slot-props/meta.json    |  2 +-
 .../04-conditional-slots/Profile.svelte       |  6 +--
 .../04-conditional-slots/meta.json            |  2 +-
 .../15-composition/05-modal/App.svelte        | 47 ++++++++++++++-----
 .../15-composition/05-modal/Modal.svelte      |  7 ++-
 .../15-composition/05-modal/meta.json         |  2 +-
 .../examples/15-composition/meta.json         |  2 +-
 .../16-context/00-context-api/meta.json       |  2 +-
 documentation/examples/16-context/meta.json   |  2 +-
 .../00-svelte-self/App.svelte                 | 10 ++--
 .../01-svelte-component/BlueThing.svelte      |  4 +-
 .../02-svelte-element/App.svelte              |  2 +-
 .../03-svelte-window/App.svelte               |  4 +-
 .../04-svelte-window-bindings/App.svelte      |  6 +--
 .../04-svelte-window-bindings/meta.json       |  2 +-
 .../05-svelte-document/App.svelte             |  5 +-
 .../06-svelte-body/App.svelte                 |  2 +-
 .../07-svelte-head/App.svelte                 |  2 +-
 .../examples/17-special-elements/meta.json    |  2 +-
 .../01-module-exports/App.svelte              |  2 +-
 .../01-module-exports/AudioPlayer.svelte      |  2 +-
 .../01-module-exports/meta.json               |  2 +-
 .../examples/19-debugging/00-debug/App.svelte |  2 +-
 .../examples/19-debugging/00-debug/meta.json  |  2 +-
 documentation/examples/19-debugging/meta.json |  2 +-
 .../20-7guis/01-7guis-counter/App.svelte      |  2 +-
 .../20-7guis/01-7guis-counter/meta.json       |  2 +-
 .../20-7guis/02-7guis-temperature/meta.json   |  2 +-
 .../03-7guis-flight-booker/App.svelte         | 14 +++---
 .../20-7guis/03-7guis-flight-booker/meta.json |  2 +-
 .../20-7guis/04-7guis-timer/App.svelte        |  6 +--
 .../20-7guis/04-7guis-timer/meta.json         |  2 +-
 .../20-7guis/05-7guis-crud/App.svelte         | 12 ++---
 .../20-7guis/06-7guis-circles/App.svelte      | 18 ++++---
 .../20-7guis/06-7guis-circles/meta.json       |  2 +-
 .../01-hacker-news/App.svelte                 |  6 ++-
 .../01-hacker-news/Item.svelte                |  4 +-
 .../01-hacker-news/List.svelte                |  2 +-
 .../01-hacker-news/Summary.svelte             | 11 ++++-
 .../02-immutable-data/App.svelte              | 14 +++---
 .../02-immutable-data/ImmutableTodo.svelte    | 18 ++++---
 .../02-immutable-data/MutableTodo.svelte      | 18 ++++---
 .../02-immutable-data/meta.json               |  2 +-
 134 files changed, 371 insertions(+), 332 deletions(-)

diff --git a/documentation/examples/05-bindings/00-text-inputs/App.svelte b/documentation/examples/05-bindings/00-text-inputs/App.svelte
index 9ec139df21..3777a717bc 100644
--- a/documentation/examples/05-bindings/00-text-inputs/App.svelte
+++ b/documentation/examples/05-bindings/00-text-inputs/App.svelte
@@ -2,5 +2,5 @@
 	let name = '';
 </script>
 
-<input bind:value={name} placeholder="enter your name" />
-<p>Hello {name || 'stranger'}!</p>
+<input bind:value={name} placeholder="tapez votre nom" />
+<p>Bonjour {name || 'étranger'} !</p>
diff --git a/documentation/examples/05-bindings/00-text-inputs/meta.json b/documentation/examples/05-bindings/00-text-inputs/meta.json
index ac90cb18c0..814a30d4cc 100644
--- a/documentation/examples/05-bindings/00-text-inputs/meta.json
+++ b/documentation/examples/05-bindings/00-text-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Text inputs"
+	"title": "Inputs texte"
 }
diff --git a/documentation/examples/05-bindings/01-numeric-inputs/meta.json b/documentation/examples/05-bindings/01-numeric-inputs/meta.json
index a7218c38cd..5f21cdd43b 100644
--- a/documentation/examples/05-bindings/01-numeric-inputs/meta.json
+++ b/documentation/examples/05-bindings/01-numeric-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Numeric inputs"
+	"title": "Inputs numériques"
 }
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
index b337359317..695b3d7a38 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/App.svelte
@@ -4,13 +4,13 @@
 
 <label>
 	<input type="checkbox" bind:checked={yes} />
-	Yes! Send me regular email spam
+	Oui ! Envoyez-moi du courrier indésirable
 </label>
 
 {#if yes}
-	<p>Thank you. We will bombard your inbox and sell your personal details.</p>
+	<p>Merci. Nous allons bombarder votre boite mail et vendre vos données personnelles.</p>
 {:else}
-	<p>You must opt-in to continue. If you're not paying, you're the product.</p>
+	<p>Vous devez accepter pour continuer. Si vous ne payez pas, vous êtes le produit.</p>
 {/if}
 
-<button disabled={!yes}> Subscribe </button>
+<button disabled={!yes}> S'abonner </button>
diff --git a/documentation/examples/05-bindings/02-checkbox-inputs/meta.json b/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
index 262b0f00e5..9ebc180085 100644
--- a/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
+++ b/documentation/examples/05-bindings/02-checkbox-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Checkbox inputs"
+	"title": "Inputs checkbox"
 }
diff --git a/documentation/examples/05-bindings/03-group-inputs/App.svelte b/documentation/examples/05-bindings/03-group-inputs/App.svelte
index 0ab215d519..20ae84bfbe 100644
--- a/documentation/examples/05-bindings/03-group-inputs/App.svelte
+++ b/documentation/examples/05-bindings/03-group-inputs/App.svelte
@@ -1,49 +1,49 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = ['Éclats de menthe'];
 
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+	let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+		return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
 	}
 </script>
 
-<h2>Size</h2>
+<h2>Nombre de boules</h2>
 
 <label>
-	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
+	<input type="radio" bind:group={scoops} name="scoops" value={1} />
+	Une boule
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
+	<input type="radio" bind:group={scoops} name="scoops" value={2} />
+	Deux boules
 </label>
 
 <label>
-	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
+	<input type="radio" bind:group={scoops} name="scoops" value={3} />
+	Trois boules
 </label>
 
-<h2>Flavours</h2>
+<h2>Parfums</h2>
 
 {#each menu as flavour}
 	<label>
-		<input type="checkbox" bind:group={flavours} value={flavour} />
+		<input type="checkbox" bind:group={flavours} name="flavours" value={flavour} />
 		{flavour}
 	</label>
 {/each}
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Veuillez choisir au moins un parfum</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
 {:else}
 	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		Vous avez commandé {scoops}
+		{scoops === 1 ? 'boule' : 'boules'}
+		de {join(flavours)}
 	</p>
 {/if}
diff --git a/documentation/examples/05-bindings/03-group-inputs/meta.json b/documentation/examples/05-bindings/03-group-inputs/meta.json
index 9c7517686d..93a53aa918 100644
--- a/documentation/examples/05-bindings/03-group-inputs/meta.json
+++ b/documentation/examples/05-bindings/03-group-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Group inputs"
+	"title": "Inputs groupés"
 }
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
index ecb809095d..e595d15a0f 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
+++ b/documentation/examples/05-bindings/04-textarea-inputs/App.svelte
@@ -1,11 +1,11 @@
 <script>
 	import { marked } from 'marked';
-	let text = `Some words are *italic*, some are **bold**`;
+	let value = `Certains mots sont en *italique*, d'autres sont en **gras**`;
 </script>
 
-<textarea bind:value={text} />
+{@html marked(value)}
 
-{@html marked(text)}
+<textarea bind:value />
 
 <style>
 	textarea {
diff --git a/documentation/examples/05-bindings/04-textarea-inputs/meta.json b/documentation/examples/05-bindings/04-textarea-inputs/meta.json
index 3e7963efcd..e15dbd5a81 100644
--- a/documentation/examples/05-bindings/04-textarea-inputs/meta.json
+++ b/documentation/examples/05-bindings/04-textarea-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Textarea inputs"
+	"title": "Inputs de zone de texte"
 }
diff --git a/documentation/examples/05-bindings/05-file-inputs/App.svelte b/documentation/examples/05-bindings/05-file-inputs/App.svelte
index fdf478e1bb..cc3037e217 100644
--- a/documentation/examples/05-bindings/05-file-inputs/App.svelte
+++ b/documentation/examples/05-bindings/05-file-inputs/App.svelte
@@ -2,25 +2,25 @@
 	let files;
 
 	$: if (files) {
-		// Note that `files` is of type `FileList`, not an Array:
-		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+		// Notez que `files` est de type `FileList`, ce n'est pas un tableau :
+		// https://developer.mozilla.org/fr/docs/Web/API/FileList
 		console.log(files);
 
 		for (const file of files) {
-			console.log(`${file.name}: ${file.size} bytes`);
+			console.log(`${file.name}: ${file.size} octets`);
 		}
 	}
 </script>
 
-<label for="avatar">Upload a picture:</label>
+<label for="avatar">Sélectionnez une image :</label>
 <input accept="image/png, image/jpeg" bind:files id="avatar" name="avatar" type="file" />
 
-<label for="many">Upload multiple files of any type:</label>
+<label for="many">Sélectionnez plusieurs images de n'importe quel type :</label>
 <input bind:files id="many" multiple type="file" />
 
 {#if files}
-	<h2>Selected files:</h2>
+	<h2>Images sélectionnées :</h2>
 	{#each Array.from(files) as file}
-		<p>{file.name} ({file.size} bytes)</p>
+		<p>{file.name} ({file.size} octets)</p>
 	{/each}
 {/if}
diff --git a/documentation/examples/05-bindings/05-file-inputs/meta.json b/documentation/examples/05-bindings/05-file-inputs/meta.json
index 92d0587e87..0f071c30c1 100644
--- a/documentation/examples/05-bindings/05-file-inputs/meta.json
+++ b/documentation/examples/05-bindings/05-file-inputs/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "File inputs"
+	"title": "Inputs de fichiers"
 }
diff --git a/documentation/examples/05-bindings/06-select-bindings/App.svelte b/documentation/examples/05-bindings/06-select-bindings/App.svelte
index 7785258fe2..0cfefd23f9 100644
--- a/documentation/examples/05-bindings/06-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/06-select-bindings/App.svelte
@@ -1,8 +1,11 @@
 <script>
 	let questions = [
-		{ id: 1, text: `Where did you go to school?` },
-		{ id: 2, text: `What is your mother's name?` },
-		{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
+		{ id: 1, text: `Où alliez-vous à l'école ?` },
+		{ id: 2, text: `Quel est le nom de jeune de fille de votre mère ?` },
+		{
+			id: 3,
+			text: `Donnez-nous un autre élément personnel qu'une personne mal intentionnée pourrait facilement trouver sur Google`
+		}
 	];
 
 	let selected;
@@ -10,11 +13,11 @@
 	let answer = '';
 
 	function handleSubmit() {
-		alert(`answered question ${selected.id} (${selected.text}) with "${answer}"`);
+		alert(`la réponse à la question ${selected.id} (${selected.text}) est "${answer}"`);
 	}
 </script>
 
-<h2>Insecurity questions</h2>
+<h2>Questions de non-sécurité</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
 	<select bind:value={selected} on:change={() => (answer = '')}>
@@ -27,10 +30,10 @@
 
 	<input bind:value={answer} />
 
-	<button disabled={!answer} type="submit"> Submit </button>
+	<button disabled={!answer} type="submit"> Envoyer </button>
 </form>
 
-<p>selected question {selected ? selected.id : '[waiting...]'}</p>
+<p>question choisie {selected ? selected.id : '[en attente...]'}</p>
 
 <style>
 	input {
diff --git a/documentation/examples/05-bindings/06-select-bindings/meta.json b/documentation/examples/05-bindings/06-select-bindings/meta.json
index 0e5fdbafd3..bb363b4d52 100644
--- a/documentation/examples/05-bindings/06-select-bindings/meta.json
+++ b/documentation/examples/05-bindings/06-select-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Select bindings"
+	"title": "Liaisons de sélection"
 }
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
index 2fd19c28ad..6d6db30933 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/App.svelte
@@ -1,12 +1,12 @@
 <script>
 	let scoops = 1;
-	let flavours = ['Mint choc chip'];
+	let flavours = ['Éclats de menthe'];
 
-	let menu = ['Cookies and cream', 'Mint choc chip', 'Raspberry ripple'];
+	let menu = ['Cookie crémeux', 'Éclats de menthe', 'Vague à la fraise'];
 
 	function join(flavours) {
 		if (flavours.length === 1) return flavours[0];
-		return `${flavours.slice(0, -1).join(', ')} and ${flavours[flavours.length - 1]}`;
+		return `${flavours.slice(0, -1).join(', ')} et ${flavours[flavours.length - 1]}`;
 	}
 </script>
 
@@ -14,20 +14,20 @@
 
 <label>
 	<input type="radio" bind:group={scoops} value={1} />
-	One scoop
+	Une boule
 </label>
 
 <label>
 	<input type="radio" bind:group={scoops} value={2} />
-	Two scoops
+	Deux boules
 </label>
 
 <label>
 	<input type="radio" bind:group={scoops} value={3} />
-	Three scoops
+	Trois boules
 </label>
 
-<h2>Flavours</h2>
+<h2>Parfums</h2>
 
 <select multiple bind:value={flavours}>
 	{#each menu as flavour}
@@ -38,13 +38,13 @@
 </select>
 
 {#if flavours.length === 0}
-	<p>Please select at least one flavour</p>
+	<p>Veuillez choisir au moins un parfum</p>
 {:else if flavours.length > scoops}
-	<p>Can't order more flavours than scoops!</p>
+	<p>Vous ne pouvez pas choisir plus de parfums que de boules !</p>
 {:else}
 	<p>
-		You ordered {scoops}
-		{scoops === 1 ? 'scoop' : 'scoops'}
-		of {join(flavours)}
+		Vous avez commandé {scoops}
+		{scoops === 1 ? 'boule' : 'boules'}
+		de {join(flavours)}
 	</p>
 {/if}
diff --git a/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json b/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
index 11b6cafd83..28143b219e 100644
--- a/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
+++ b/documentation/examples/05-bindings/07-multiple-select-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Select multiple"
+	"title": "Sélection multiple"
 }
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
index a8118093d3..93e5046171 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
+++ b/documentation/examples/05-bindings/08-each-block-bindings/App.svelte
@@ -1,8 +1,8 @@
 <script>
 	let todos = [
-		{ done: false, text: 'finish Svelte tutorial' },
-		{ done: false, text: 'build an app' },
-		{ done: false, text: 'world domination' }
+		{ done: false, text: 'finir le tutoriel Svelte' },
+		{ done: false, text: 'construire une app' },
+		{ done: false, text: 'dominer le monde' }
 	];
 
 	function add() {
@@ -22,12 +22,16 @@
 	<div>
 		<input type="checkbox" bind:checked={todo.done} />
 
-		<input placeholder="What needs to be done?" bind:value={todo.text} disabled={todo.done} />
+		<input
+			placeholder="Qu'avez-vous besoin de faire ?"
+			bind:value={todo.text}
+			disabled={todo.done}
+		/>
 	</div>
 {/each}
 
-<p>{remaining} remaining</p>
+<p>Encore {remaining}</p>
 
-<button on:click={add}> Add new </button>
+<button on:click={add}> Ajouter </button>
 
-<button on:click={clear}> Clear completed </button>
+<button on:click={clear}> Effacer les tâches complétées </button>
diff --git a/documentation/examples/05-bindings/08-each-block-bindings/meta.json b/documentation/examples/05-bindings/08-each-block-bindings/meta.json
index bb4e1e1e88..060ce66a84 100644
--- a/documentation/examples/05-bindings/08-each-block-bindings/meta.json
+++ b/documentation/examples/05-bindings/08-each-block-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Each block bindings"
+	"title": "Liaisons de bloc each"
 }
diff --git a/documentation/examples/05-bindings/09-media-elements/App.svelte b/documentation/examples/05-bindings/09-media-elements/App.svelte
index 836804f8bc..d12774ada0 100644
--- a/documentation/examples/05-bindings/09-media-elements/App.svelte
+++ b/documentation/examples/05-bindings/09-media-elements/App.svelte
@@ -1,5 +1,5 @@
 <script>
-	// These values are bound to properties of the video
+	// Ces valeurs sont liées aux propriétés de la vidéo
 	let time = 0;
 	let duration;
 	let paused = true;
@@ -7,26 +7,27 @@
 	let showControls = true;
 	let showControlsTimeout;
 
-	// Used to track time of last mouse down event
+	// Utilisée pour suivre le timing du dernier évènement mousedown
 	let lastMouseDown;
 
 	function handleMove(e) {
-		// Make the controls visible, but fade out after
-		// 2.5 seconds of inactivity
+		// Rend les contrôles visibles, mais les estompe après
+		// 2.5 secondes d'inactivité
 		clearTimeout(showControlsTimeout);
 		showControlsTimeout = setTimeout(() => (showControls = false), 2500);
 		showControls = true;
 
-		if (!duration) return; // video not loaded yet
-		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
+		if (!duration) return; // la vidéo n'est pas encore chargée
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // la souris n'est pas encore enfoncée
 
 		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
 		time = (duration * (clientX - left)) / (right - left);
 	}
 
-	// we can't rely on the built-in click event, because it fires
-	// after a drag — we have to listen for clicks ourselves
+	// nous ne pouvons pas nous fier à l'évènement clic natif,
+	// parce qu'il est déclenché après avoir fait glisser (drag) la souris
+	// — nous devons écouter les clics nous-mêmes
 	function handleMousedown(e) {
 		lastMouseDown = new Date();
 	}
@@ -50,7 +51,7 @@
 </script>
 
 <h1>Caminandes: Llamigos</h1>
-<p>From <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
+<p>Par <a href="https://studio.blender.org/films">Blender Studio</a>. CC-BY</p>
 
 <div>
 	<video
@@ -72,7 +73,9 @@
 
 		<div class="info">
 			<span class="time">{format(time)}</span>
-			<span>click anywhere to {paused ? 'play' : 'pause'} / drag to seek</span>
+			<span
+				>cliquez n'importe où pour {paused ? 'lire' : 'mettre en pause'} / glissez pour chercher</span
+			>
 			<span class="time">{format(duration)}</span>
 		</div>
 	</div>
diff --git a/documentation/examples/05-bindings/09-media-elements/meta.json b/documentation/examples/05-bindings/09-media-elements/meta.json
index 66dfeb7047..b7ebbace6f 100644
--- a/documentation/examples/05-bindings/09-media-elements/meta.json
+++ b/documentation/examples/05-bindings/09-media-elements/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Media elements"
+	"title": "Éléments media"
 }
diff --git a/documentation/examples/05-bindings/10-dimensions/App.svelte b/documentation/examples/05-bindings/10-dimensions/App.svelte
index 4d4a8b2cf2..312f88b928 100644
--- a/documentation/examples/05-bindings/10-dimensions/App.svelte
+++ b/documentation/examples/05-bindings/10-dimensions/App.svelte
@@ -2,13 +2,13 @@
 	let w;
 	let h;
 	let size = 42;
-	let text = 'edit me';
+	let text = 'éditez-moi';
 </script>
 
 <input type="range" bind:value={size} />
 <input bind:value={text} />
 
-<p>size: {w}px x {h}px</p>
+<p>taille: {w}px x {h}px</p>
 
 <div bind:clientWidth={w} bind:clientHeight={h}>
 	<span style="font-size: {size}px">{text}</span>
diff --git a/documentation/examples/05-bindings/12-component-bindings/App.svelte b/documentation/examples/05-bindings/12-component-bindings/App.svelte
index 254ced9464..e019c74e62 100644
--- a/documentation/examples/05-bindings/12-component-bindings/App.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/App.svelte
@@ -2,10 +2,10 @@
 	import Keypad from './Keypad.svelte';
 
 	let pin;
-	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin';
+	$: view = pin ? pin.replace(/\d(?!$)/g, '•') : 'entrez votre code';
 
 	function handleSubmit() {
-		alert(`submitted ${pin}`);
+		alert(`votre code ${pin}`);
 	}
 </script>
 
diff --git a/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte b/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
index c814a2238f..0a7a8d696a 100644
--- a/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
+++ b/documentation/examples/05-bindings/12-component-bindings/Keypad.svelte
@@ -21,9 +21,9 @@
 	<button on:click={select(8)}>8</button>
 	<button on:click={select(9)}>9</button>
 
-	<button disabled={!value} on:click={clear}>clear</button>
+	<button disabled={!value} on:click={clear}>effacer</button>
 	<button on:click={select(0)}>0</button>
-	<button disabled={!value} on:click={submit}>submit</button>
+	<button disabled={!value} on:click={submit}>valider</button>
 </div>
 
 <style>
diff --git a/documentation/examples/05-bindings/12-component-bindings/meta.json b/documentation/examples/05-bindings/12-component-bindings/meta.json
index 5ed7f96ac2..0aad351a29 100644
--- a/documentation/examples/05-bindings/12-component-bindings/meta.json
+++ b/documentation/examples/05-bindings/12-component-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Component bindings"
+	"title": "Liaisons de composant"
 }
diff --git a/documentation/examples/05-bindings/meta.json b/documentation/examples/05-bindings/meta.json
index b6b01225e3..0da0e180fd 100644
--- a/documentation/examples/05-bindings/meta.json
+++ b/documentation/examples/05-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Bindings"
+	"title": "Liaisons"
 }
diff --git a/documentation/examples/06-lifecycle/00-onmount/App.svelte b/documentation/examples/06-lifecycle/00-onmount/App.svelte
index c8d1f6092f..cfe4eae7cd 100644
--- a/documentation/examples/06-lifecycle/00-onmount/App.svelte
+++ b/documentation/examples/06-lifecycle/00-onmount/App.svelte
@@ -9,7 +9,7 @@
 	});
 </script>
 
-<h1>Photo album</h1>
+<h1>Album photo</h1>
 
 <div class="photos">
 	{#each photos as photo}
@@ -18,8 +18,8 @@
 			<figcaption>{photo.title}</figcaption>
 		</figure>
 	{:else}
-		<!-- this block renders when photos.length === 0 -->
-		<p>loading...</p>
+		<!-- ce bloc est affiché lorque photos.length === 0 -->
+		<p>chargement...</p>
 	{/each}
 </div>
 
diff --git a/documentation/examples/06-lifecycle/01-ondestroy/App.svelte b/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
index ededcc4f9e..d3c46903b2 100644
--- a/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
+++ b/documentation/examples/06-lifecycle/01-ondestroy/App.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <p>
-	The page has been open for
+	La page est ouverte depuis
 	{seconds}
-	{seconds === 1 ? 'second' : 'seconds'}
+	{seconds > 1 ? 'secondes' : 'seconde'}
 </p>
diff --git a/documentation/examples/06-lifecycle/02-update/meta.json b/documentation/examples/06-lifecycle/02-update/meta.json
index 7f4db08030..3d12a5b62a 100644
--- a/documentation/examples/06-lifecycle/02-update/meta.json
+++ b/documentation/examples/06-lifecycle/02-update/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "beforeUpdate and afterUpdate"
+	"title": "beforeUpdate et afterUpdate"
 }
diff --git a/documentation/examples/06-lifecycle/03-tick/App.svelte b/documentation/examples/06-lifecycle/03-tick/App.svelte
index 2f076946b3..698b250658 100644
--- a/documentation/examples/06-lifecycle/03-tick/App.svelte
+++ b/documentation/examples/06-lifecycle/03-tick/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { tick } from 'svelte';
 
-	let text = `Select some text and hit the tab key to toggle uppercase`;
+	let text = `Sélectionnez du texte et appuyez sur Tab pour mettre en majuscules`;
 
 	async function handleKeydown(event) {
 		if (event.key !== 'Tab') return;
diff --git a/documentation/examples/06-lifecycle/meta.json b/documentation/examples/06-lifecycle/meta.json
index 5ed3972e7a..88d04845cc 100644
--- a/documentation/examples/06-lifecycle/meta.json
+++ b/documentation/examples/06-lifecycle/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Lifecycle"
+	"title": "Cycle de vie"
 }
diff --git a/documentation/examples/07-stores/00-writable-stores/App.svelte b/documentation/examples/07-stores/00-writable-stores/App.svelte
index 3d301a760f..176386ace1 100644
--- a/documentation/examples/07-stores/00-writable-stores/App.svelte
+++ b/documentation/examples/07-stores/00-writable-stores/App.svelte
@@ -11,7 +11,7 @@
 	});
 </script>
 
-<h1>The count is {countValue}</h1>
+<h1>Le compteur vaut {countValue}</h1>
 
 <Incrementer />
 <Decrementer />
diff --git a/documentation/examples/07-stores/00-writable-stores/Resetter.svelte b/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
index 9c8809961f..2931cf52bc 100644
--- a/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
+++ b/documentation/examples/07-stores/00-writable-stores/Resetter.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<button on:click={reset}> reset </button>
+<button on:click={reset}> réinitialiser </button>
diff --git a/documentation/examples/07-stores/00-writable-stores/meta.json b/documentation/examples/07-stores/00-writable-stores/meta.json
index 9e899622e3..8a0dd645ba 100644
--- a/documentation/examples/07-stores/00-writable-stores/meta.json
+++ b/documentation/examples/07-stores/00-writable-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Writable stores"
+	"title": "Stores d'écriture"
 }
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/App.svelte b/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
index 9923689329..f0ee0271f2 100644
--- a/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
+++ b/documentation/examples/07-stores/01-auto-subscriptions/App.svelte
@@ -5,7 +5,7 @@
 	import Resetter from './Resetter.svelte';
 </script>
 
-<h1>The count is {$count}</h1>
+<h1>Le compteur vaut {$count}</h1>
 
 <Incrementer />
 <Decrementer />
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte b/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
index 9c8809961f..2931cf52bc 100644
--- a/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
+++ b/documentation/examples/07-stores/01-auto-subscriptions/Resetter.svelte
@@ -6,4 +6,4 @@
 	}
 </script>
 
-<button on:click={reset}> reset </button>
+<button on:click={reset}> réinitialiser </button>
diff --git a/documentation/examples/07-stores/01-auto-subscriptions/meta.json b/documentation/examples/07-stores/01-auto-subscriptions/meta.json
index 7a4e2e7167..1823ae02aa 100644
--- a/documentation/examples/07-stores/01-auto-subscriptions/meta.json
+++ b/documentation/examples/07-stores/01-auto-subscriptions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Auto-subscriptions"
+	"title": "Abonnements automatiques"
 }
diff --git a/documentation/examples/07-stores/02-readable-stores/App.svelte b/documentation/examples/07-stores/02-readable-stores/App.svelte
index 6d1d80b455..9b495ae214 100644
--- a/documentation/examples/07-stores/02-readable-stores/App.svelte
+++ b/documentation/examples/07-stores/02-readable-stores/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { time } from './stores.js';
 
-	const formatter = new Intl.DateTimeFormat('en', {
+	const formatter = new Intl.DateTimeFormat('fr', {
 		hour12: true,
 		hour: 'numeric',
 		minute: '2-digit',
@@ -9,4 +9,4 @@
 	});
 </script>
 
-<h1>The time is {formatter.format($time)}</h1>
+<h1>Il est {formatter.format($time)}</h1>
diff --git a/documentation/examples/07-stores/02-readable-stores/meta.json b/documentation/examples/07-stores/02-readable-stores/meta.json
index 1ba22f9367..2db7cb7f61 100644
--- a/documentation/examples/07-stores/02-readable-stores/meta.json
+++ b/documentation/examples/07-stores/02-readable-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Readable stores"
+	"title": "Stores de lecture"
 }
diff --git a/documentation/examples/07-stores/03-derived-stores/App.svelte b/documentation/examples/07-stores/03-derived-stores/App.svelte
index d1013c1a26..119e761ca1 100644
--- a/documentation/examples/07-stores/03-derived-stores/App.svelte
+++ b/documentation/examples/07-stores/03-derived-stores/App.svelte
@@ -9,10 +9,10 @@
 	});
 </script>
 
-<h1>The time is {formatter.format($time)}</h1>
+<h1>Il est {formatter.format($time)}</h1>
 
 <p>
-	This page has been open for
+	Cette page est ouverte depuis
 	{$elapsed}
-	{$elapsed === 1 ? 'second' : 'seconds'}
+	{$elapsed > 1 ? 'secondes' : 'seconde'}
 </p>
diff --git a/documentation/examples/07-stores/03-derived-stores/meta.json b/documentation/examples/07-stores/03-derived-stores/meta.json
index 5574475370..a584655c81 100644
--- a/documentation/examples/07-stores/03-derived-stores/meta.json
+++ b/documentation/examples/07-stores/03-derived-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Derived stores"
+	"title": "Stores dérivés"
 }
diff --git a/documentation/examples/07-stores/04-custom-stores/App.svelte b/documentation/examples/07-stores/04-custom-stores/App.svelte
index dbdd299d69..ef4881ba51 100644
--- a/documentation/examples/07-stores/04-custom-stores/App.svelte
+++ b/documentation/examples/07-stores/04-custom-stores/App.svelte
@@ -2,8 +2,8 @@
 	import { count } from './stores.js';
 </script>
 
-<h1>The count is {$count}</h1>
+<h1>Le compteur vaut {$count}</h1>
 
 <button on:click={count.increment}>+</button>
 <button on:click={count.decrement}>-</button>
-<button on:click={count.reset}>reset</button>
+<button on:click={count.reset}>réinitialiser</button>
diff --git a/documentation/examples/07-stores/04-custom-stores/meta.json b/documentation/examples/07-stores/04-custom-stores/meta.json
index 7f1b426835..b15f6fca75 100644
--- a/documentation/examples/07-stores/04-custom-stores/meta.json
+++ b/documentation/examples/07-stores/04-custom-stores/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Custom stores"
+	"title": "Stores personnalisés"
 }
diff --git a/documentation/examples/08-motion/00-tweened/meta.json b/documentation/examples/08-motion/00-tweened/meta.json
index 97d369cd1b..4a1e8e477d 100644
--- a/documentation/examples/08-motion/00-tweened/meta.json
+++ b/documentation/examples/08-motion/00-tweened/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Tweened"
+	"title": "Interpolation"
 }
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
index e5b59901aa..b2420cbfb0 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -14,17 +14,16 @@
 
 <div style="position: absolute; right: 1em;">
 	<label>
-		<h3>stiffness ({coords.stiffness})</h3>
+		<h3>raideur ({coords.stiffness})</h3>
 		<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01" />
 	</label>
 
 	<label>
-		<h3>damping ({coords.damping})</h3>
+		<h3>amortissement ({coords.damping})</h3>
 		<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01" />
 	</label>
 </div>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <svg
 	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
 	on:mousedown={() => size.set(30)}
diff --git a/documentation/examples/08-motion/01-spring/meta.json b/documentation/examples/08-motion/01-spring/meta.json
index 7c926445a6..1e3a478635 100644
--- a/documentation/examples/08-motion/01-spring/meta.json
+++ b/documentation/examples/08-motion/01-spring/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Spring"
+	"title": "Ressorts"
 }
diff --git a/documentation/examples/08-motion/meta.json b/documentation/examples/08-motion/meta.json
index 14919954a9..565f826023 100644
--- a/documentation/examples/08-motion/meta.json
+++ b/documentation/examples/08-motion/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Motion"
+	"title": "Mouvement"
 }
diff --git a/documentation/examples/09-transitions/00-transition/App.svelte b/documentation/examples/09-transitions/00-transition/App.svelte
index 29e9254d14..d59dd5ba95 100644
--- a/documentation/examples/09-transitions/00-transition/App.svelte
+++ b/documentation/examples/09-transitions/00-transition/App.svelte
@@ -9,5 +9,5 @@
 </label>
 
 {#if visible}
-	<p transition:fade>Fades in and out</p>
+	<p transition:fade>Entre et sort en s'estompant</p>
 {/if}
diff --git a/documentation/examples/09-transitions/00-transition/meta.json b/documentation/examples/09-transitions/00-transition/meta.json
index 8d466a6219..96c42bf9bf 100644
--- a/documentation/examples/09-transitions/00-transition/meta.json
+++ b/documentation/examples/09-transitions/00-transition/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The transition directive"
+	"title": "La directive de transition"
 }
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
index 318739f1d0..4adcbbf183 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/App.svelte
@@ -9,5 +9,5 @@
 </label>
 
 {#if visible}
-	<p transition:fly={{ y: 200, duration: 2000 }}>Flies in and out</p>
+	<p transition:fly={{ y: 200, duration: 2000 }}>Entre et sort en volant</p>
 {/if}
diff --git a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
index 8a857ebcbb..0af800f0fe 100644
--- a/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
+++ b/documentation/examples/09-transitions/01-adding-parameters-to-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Adding parameters"
+	"title": "Ajout de paramètres"
 }
diff --git a/documentation/examples/09-transitions/02-in-and-out/App.svelte b/documentation/examples/09-transitions/02-in-and-out/App.svelte
index bb44e5ca9f..ed9a117e2b 100644
--- a/documentation/examples/09-transitions/02-in-and-out/App.svelte
+++ b/documentation/examples/09-transitions/02-in-and-out/App.svelte
@@ -9,5 +9,5 @@
 </label>
 
 {#if visible}
-	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Flies in, fades out</p>
+	<p in:fly={{ y: 200, duration: 2000 }} out:fade>Entre en volant, sort en s'estompant</p>
 {/if}
diff --git a/documentation/examples/09-transitions/02-in-and-out/meta.json b/documentation/examples/09-transitions/02-in-and-out/meta.json
index ae0d4e800d..280b89b051 100644
--- a/documentation/examples/09-transitions/02-in-and-out/meta.json
+++ b/documentation/examples/09-transitions/02-in-and-out/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "In and out"
+	"title": "In et out"
 }
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
index c85fe7ef89..bf3fc2a453 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/App.svelte
@@ -29,7 +29,7 @@
 
 {#if visible}
 	<div class="centered" in:spin={{ duration: 8000 }} out:fade>
-		<span>transitions!</span>
+		<span>transitionne !</span>
 	</div>
 {/if}
 
diff --git a/documentation/examples/09-transitions/03-custom-css-transitions/meta.json b/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
index cbe988abc8..2bf21b4c45 100644
--- a/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
+++ b/documentation/examples/09-transitions/03-custom-css-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Custom CSS transitions"
+	"title": "Transitions CSS personnalisées"
 }
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
index 9ccd18a0f7..ee764a52d9 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/App.svelte
@@ -5,7 +5,9 @@
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
+			throw new Error(
+				`Cette transition ne fonctionne que sur les éléments qui n'ont qu'un seul noeud enfant de type texte`
+			);
 		}
 
 		const text = node.textContent;
@@ -27,5 +29,5 @@
 </label>
 
 {#if visible}
-	<p transition:typewriter>The quick brown fox jumps over the lazy dog</p>
+	<p transition:typewriter>Portez ce vieux whisky au juge blond qui fume</p>
 {/if}
diff --git a/documentation/examples/09-transitions/04-custom-js-transitions/meta.json b/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
index 4ec4afdfce..b0bc49080a 100644
--- a/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
+++ b/documentation/examples/09-transitions/04-custom-js-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Custom JS transitions"
+	"title": "Transitions JS personnalisées"
 }
diff --git a/documentation/examples/09-transitions/05-transition-events/App.svelte b/documentation/examples/09-transitions/05-transition-events/App.svelte
index 31ef18c930..027b122900 100644
--- a/documentation/examples/09-transitions/05-transition-events/App.svelte
+++ b/documentation/examples/09-transitions/05-transition-events/App.svelte
@@ -2,10 +2,10 @@
 	import { fly } from 'svelte/transition';
 
 	let visible = true;
-	let status = 'waiting...';
+	let status = 'en attente...';
 </script>
 
-<p>status: {status}</p>
+<p>statut: {status}</p>
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
@@ -15,11 +15,11 @@
 {#if visible}
 	<p
 		transition:fly={{ y: 200, duration: 2000 }}
-		on:introstart={() => (status = 'intro started')}
-		on:outrostart={() => (status = 'outro started')}
-		on:introend={() => (status = 'intro ended')}
-		on:outroend={() => (status = 'outro ended')}
+		on:introstart={() => (status = `début de l'entrée`)}
+		on:outrostart={() => (status = 'début de la sortie')}
+		on:introend={() => (status = `fin de l'entrée`)}
+		on:outroend={() => (status = `fin de la sortie`)}
 	>
-		Flies in and out
+		Entre et sort en volant
 	</p>
 {/if}
diff --git a/documentation/examples/09-transitions/05-transition-events/meta.json b/documentation/examples/09-transitions/05-transition-events/meta.json
index cad1f94386..14457983d9 100644
--- a/documentation/examples/09-transitions/05-transition-events/meta.json
+++ b/documentation/examples/09-transitions/05-transition-events/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Transition events"
+	"title": "Évènements de transition"
 }
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
index 8f603165c1..5306824609 100644
--- a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
+++ b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -29,7 +29,7 @@
 
 <div class="container">
 	<div class="phone">
-		<h1>Photo gallery</h1>
+		<h1>Galerie photo</h1>
 
 		<div class="grid">
 			{#each images as image}
@@ -48,8 +48,7 @@
 
 		{#if selected}
 			{#await selected then d}
-				<div class="photo" in:receive|global={{ key: d.id }} out:send|global={{ key: d.id }}>
-					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+				<div class="photo" in:receive={{ key: d.id }} out:send={{ key: d.id }}>
 					<img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
 
 					<p class="credit">
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/meta.json b/documentation/examples/09-transitions/06-deferred-transitions/meta.json
index 9b9e1e09bc..750702a48a 100644
--- a/documentation/examples/09-transitions/06-deferred-transitions/meta.json
+++ b/documentation/examples/09-transitions/06-deferred-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Deferred transitions"
+	"title": "Transitions retardées"
 }
diff --git a/documentation/examples/10-animations/00-animate/App.svelte b/documentation/examples/10-animations/00-animate/App.svelte
index 7228fee49b..80b9cb8751 100644
--- a/documentation/examples/10-animations/00-animate/App.svelte
+++ b/documentation/examples/10-animations/00-animate/App.svelte
@@ -20,12 +20,12 @@
 	});
 
 	let todos = [
-		{ id: 1, done: false, description: 'write some docs' },
-		{ id: 2, done: false, description: 'start writing JSConf talk' },
-		{ id: 3, done: true, description: 'buy some milk' },
-		{ id: 4, done: false, description: 'mow the lawn' },
-		{ id: 5, done: false, description: 'feed the turtle' },
-		{ id: 6, done: false, description: 'fix some bugs' }
+		{ id: 1, done: false, description: 'écrire de la doc' },
+		{ id: 2, done: false, description: 'commencer ma près de JSTalk' },
+		{ id: 3, done: true, description: 'acheter du lait' },
+		{ id: 4, done: false, description: 'tondre la pelouse' },
+		{ id: 5, done: false, description: 'nourrir la tortue' },
+		{ id: 6, done: false, description: 'résoudre des bugs' }
 	];
 
 	let uid = todos.length + 1;
@@ -49,12 +49,12 @@
 <div class="board">
 	<input
 		class="new-todo"
-		placeholder="what needs to be done?"
+		placeholder="que dois-je faire ?"
 		on:keydown={(event) => event.key === 'Enter' && add(event.target)}
 	/>
 
 	<div class="left">
-		<h2>todo</h2>
+		<h2>à faire</h2>
 		{#each todos.filter((t) => !t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
 				<input type="checkbox" bind:checked={todo.done} />
@@ -65,7 +65,7 @@
 	</div>
 
 	<div class="right">
-		<h2>done</h2>
+		<h2>fait</h2>
 		{#each todos.filter((t) => t.done) as todo (todo.id)}
 			<label in:receive={{ key: todo.id }} out:send={{ key: todo.id }} animate:flip>
 				<input type="checkbox" bind:checked={todo.done} />
diff --git a/documentation/examples/10-animations/00-animate/meta.json b/documentation/examples/10-animations/00-animate/meta.json
index 147c1a971f..4b8f55594d 100644
--- a/documentation/examples/10-animations/00-animate/meta.json
+++ b/documentation/examples/10-animations/00-animate/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The animate directive"
+	"title": "La directive animate"
 }
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index a938ee235b..05c92b715b 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -16,7 +16,7 @@
 
 <div class="easing-sidebar">
 	<div class="easing-types">
-		<h3>Ease</h3>
+		<h3>Lissage</h3>
 		{#if mobile}
 			<select bind:value={current_ease}>
 				{#each [...eases] as [name]}
@@ -53,7 +53,7 @@
 			</ul>
 		{/if}
 	</div>
-	<h4>Duration</h4>
+	<h4>Durée</h4>
 	<div class="duration">
 		<span>
 			<input type="number" bind:value={duration} min="0" step="100" />
@@ -61,7 +61,7 @@
 			<button class="number" on:click={() => (duration += 100)}>+</button>
 		</span>
 		<button class="play" on:click={() => dispatch('play')}>
-			{playing ? 'Restart' : 'Play'}
+			{playing ? 'Recommencer' : 'Jouer'}
 		</button>
 	</div>
 </div>
diff --git a/documentation/examples/11-easing/00-easing/meta.json b/documentation/examples/11-easing/00-easing/meta.json
index 0c8a4969ff..59d40cabb8 100644
--- a/documentation/examples/11-easing/00-easing/meta.json
+++ b/documentation/examples/11-easing/00-easing/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Ease Visualiser"
+	"title": "Visualisateur de lissage"
 }
diff --git a/documentation/examples/11-easing/meta.json b/documentation/examples/11-easing/meta.json
index 54bd68373d..87ef08e006 100644
--- a/documentation/examples/11-easing/meta.json
+++ b/documentation/examples/11-easing/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Easing"
+	"title": "Lissage"
 }
diff --git a/documentation/examples/12-svg/01-clock/App.svelte b/documentation/examples/12-svg/01-clock/App.svelte
index 7548dff2c9..126dd4b843 100644
--- a/documentation/examples/12-svg/01-clock/App.svelte
+++ b/documentation/examples/12-svg/01-clock/App.svelte
@@ -3,8 +3,8 @@
 
 	let time = new Date();
 
-	// these automatically update when `time`
-	// changes, because of the `$:` prefix
+	// ces valeurs changent automatiquement lorsque
+	// `time` change, grâce au préfixe `$:`
 	$: hours = time.getHours();
 	$: minutes = time.getMinutes();
 	$: seconds = time.getSeconds();
@@ -23,7 +23,7 @@
 <svg viewBox="-50 -50 100 100">
 	<circle class="clock-face" r="48" />
 
-	<!-- markers -->
+	<!-- marqueurs -->
 	{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
 		<line class="major" y1="35" y2="45" transform="rotate({30 * minute})" />
 
@@ -32,13 +32,13 @@
 		{/each}
 	{/each}
 
-	<!-- hour hand -->
+	<!-- heures -->
 	<line class="hour" y1="2" y2="-20" transform="rotate({30 * hours + minutes / 2})" />
 
-	<!-- minute hand -->
+	<!-- minutes -->
 	<line class="minute" y1="4" y2="-30" transform="rotate({6 * minutes + seconds / 10})" />
 
-	<!-- second hand -->
+	<!-- secondes -->
 	<g transform="rotate({6 * seconds})">
 		<line class="second" y1="10" y2="-38" />
 		<line class="second-counterweight" y1="10" y2="2" />
diff --git a/documentation/examples/12-svg/01-clock/meta.json b/documentation/examples/12-svg/01-clock/meta.json
index 85917ba578..cf19f8f65a 100644
--- a/documentation/examples/12-svg/01-clock/meta.json
+++ b/documentation/examples/12-svg/01-clock/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Clock"
+	"title": "Horloge"
 }
diff --git a/documentation/examples/12-svg/02-bar-chart/App.svelte b/documentation/examples/12-svg/02-bar-chart/App.svelte
index 283b109ac0..663e2cfe0a 100644
--- a/documentation/examples/12-svg/02-bar-chart/App.svelte
+++ b/documentation/examples/12-svg/02-bar-chart/App.svelte
@@ -33,21 +33,21 @@
 	$: barWidth = innerWidth / xTicks.length;
 </script>
 
-<h2>US birthrate by year</h2>
+<h2>Taux de natalité aux États-unis par année</h2>
 
 <div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
-		<!-- y axis -->
+		<!-- axe y -->
 		<g class="axis y-axis">
 			{#each yTicks as tick}
 				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
 					<line x2="100%" />
-					<text y="-4">{tick} {tick === 20 ? ' per 1,000 population' : ''}</text>
+					<text y="-4">{tick} {tick === 20 ? ' pour 1 000 habitants' : ''}</text>
 				</g>
 			{/each}
 		</g>
 
-		<!-- x axis -->
+		<!-- axe x -->
 		<g class="axis x-axis">
 			{#each points as point, i}
 				<g class="tick" transform="translate({xScale(i)},{height})">
diff --git a/documentation/examples/12-svg/02-bar-chart/meta.json b/documentation/examples/12-svg/02-bar-chart/meta.json
index d72e5a95a2..a418871873 100644
--- a/documentation/examples/12-svg/02-bar-chart/meta.json
+++ b/documentation/examples/12-svg/02-bar-chart/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Bar chart"
+	"title": "Graphique en barres"
 }
diff --git a/documentation/examples/12-svg/03-area-chart/App.svelte b/documentation/examples/12-svg/03-area-chart/App.svelte
index fb79b04878..e230c0cd96 100644
--- a/documentation/examples/12-svg/03-area-chart/App.svelte
+++ b/documentation/examples/12-svg/03-area-chart/App.svelte
@@ -27,21 +27,21 @@
 	}
 </script>
 
-<h2>Arctic sea ice minimum</h2>
+<h2>Épaisseur minimum de la calotte glacière en Arctique</h2>
 
 <div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
 	<svg>
-		<!-- y axis -->
+		<!-- axe y -->
 		<g class="axis y-axis" transform="translate(0, {padding.top})">
 			{#each yTicks as tick}
 				<g class="tick tick-{tick}" transform="translate(0, {yScale(tick) - padding.bottom})">
 					<line x2="100%" />
-					<text y="-4">{tick} {tick === 8 ? ' million sq km' : ''}</text>
+					<text y="-4">{tick} {tick === 8 ? ' millions de km2' : ''}</text>
 				</g>
 			{/each}
 		</g>
 
-		<!-- x axis -->
+		<!-- axe x -->
 		<g class="axis x-axis">
 			{#each xTicks as tick}
 				<g class="tick tick-{tick}" transform="translate({xScale(tick)},{height})">
@@ -51,15 +51,15 @@
 			{/each}
 		</g>
 
-		<!-- data -->
+		<!-- donnée -->
 		<path class="path-area" d={area} />
 		<path class="path-line" d={path} />
 	</svg>
 </div>
 
 <p>
-	Average September extent. Source: <a href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/"
-		>NSIDC/NASA</a
+	Étendue moyenne de septembre. Source: <a
+		href="https://climate.nasa.gov/vital-signs/arctic-sea-ice/">NSIDC/NASA</a
 	>
 </p>
 
@@ -86,12 +86,12 @@
 	}
 
 	.tick line {
-		stroke: #888;
+		stroke: #aaa;
 		stroke-dasharray: 2;
 	}
 
 	.tick text {
-		fill: #888;
+		fill: #666;
 		text-anchor: start;
 	}
 
diff --git a/documentation/examples/12-svg/03-area-chart/meta.json b/documentation/examples/12-svg/03-area-chart/meta.json
index fa86f9a990..c23516ebb8 100644
--- a/documentation/examples/12-svg/03-area-chart/meta.json
+++ b/documentation/examples/12-svg/03-area-chart/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Area chart"
+	"title": "Graphique d'aire"
 }
diff --git a/documentation/examples/12-svg/04-scatterplot/App.svelte b/documentation/examples/12-svg/04-scatterplot/App.svelte
index 186193b119..6108353009 100644
--- a/documentation/examples/12-svg/04-scatterplot/App.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/App.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div class="chart">
-	<h2>Anscombe's quartet</h2>
+	<h2>Quartet d'Anscombe</h2>
 
 	<Scatterplot points={data.a} />
 	<Scatterplot points={data.b} />
diff --git a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
index 9c0a96efc5..596921cbb9 100644
--- a/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
+++ b/documentation/examples/12-svg/04-scatterplot/Scatterplot.svelte
@@ -32,7 +32,7 @@
 <svelte:window on:resize={resize} />
 
 <svg bind:this={svg}>
-	<!-- y axis -->
+	<!-- axe y -->
 	<g class="axis y-axis">
 		{#each yTicks as tick}
 			<g class="tick tick-{tick}" transform="translate(0, {yScale(tick)})">
@@ -42,7 +42,7 @@
 		{/each}
 	</g>
 
-	<!-- x axis -->
+	<!-- axe x -->
 	<g class="axis x-axis">
 		{#each xTicks as tick}
 			<g class="tick" transform="translate({xScale(tick)},0)">
@@ -52,7 +52,7 @@
 		{/each}
 	</g>
 
-	<!-- data -->
+	<!-- donnée -->
 	{#each points as point}
 		<circle cx={xScale(point.x)} cy={yScale(point.y)} r="5" />
 	{/each}
diff --git a/documentation/examples/12-svg/04-scatterplot/meta.json b/documentation/examples/12-svg/04-scatterplot/meta.json
index df11c668a9..1b84de9346 100644
--- a/documentation/examples/12-svg/04-scatterplot/meta.json
+++ b/documentation/examples/12-svg/04-scatterplot/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Scatterplot"
+	"title": "Nuages de points"
 }
diff --git a/documentation/examples/12-svg/05-svg-transitions/App.svelte b/documentation/examples/12-svg/05-svg-transitions/App.svelte
index 3a4b1710c8..7c1df29cc6 100644
--- a/documentation/examples/12-svg/05-svg-transitions/App.svelte
+++ b/documentation/examples/12-svg/05-svg-transitions/App.svelte
@@ -21,14 +21,14 @@
 
 	<div class="centered" out:fly={{ y: -20, duration: 800 }}>
 		{#each 'SVELTE' as char, i}
-			<span in:fade|global={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
+			<span in:fade={{ delay: 1000 + i * 150, duration: 800 }}>{char}</span>
 		{/each}
 	</div>
 {/if}
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	toggle me
+	activer
 </label>
 
 <link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet" />
diff --git a/documentation/examples/12-svg/05-svg-transitions/meta.json b/documentation/examples/12-svg/05-svg-transitions/meta.json
index 79a57977d7..012988a470 100644
--- a/documentation/examples/12-svg/05-svg-transitions/meta.json
+++ b/documentation/examples/12-svg/05-svg-transitions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "SVG transitions"
+	"title": "Transitions SVG"
 }
diff --git a/documentation/examples/13-actions/00-actions/App.svelte b/documentation/examples/13-actions/00-actions/App.svelte
index fcd0ca6ae3..6d8c03be72 100644
--- a/documentation/examples/13-actions/00-actions/App.svelte
+++ b/documentation/examples/13-actions/00-actions/App.svelte
@@ -4,9 +4,11 @@
 	let showModal = true;
 </script>
 
-<button on:click={() => (showModal = true)}>Show Modal</button>
+<button on:click={() => (showModal = true)}>Afficher la modale</button>
 {#if showModal}
-	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>Click outside me!</div>
+	<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
+		Cliquez à l'extérieur !
+	</div>
 {/if}
 
 <style>
diff --git a/documentation/examples/13-actions/00-actions/meta.json b/documentation/examples/13-actions/00-actions/meta.json
index fb4dc640dd..fb2c8ebd0f 100644
--- a/documentation/examples/13-actions/00-actions/meta.json
+++ b/documentation/examples/13-actions/00-actions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The use directive"
+	"title": "La directive use"
 }
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
index 23cc9f2f9e..4aaeedbf5c 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/App.svelte
@@ -13,9 +13,9 @@
 <button
 	use:longpress={duration}
 	on:longpress={() => (pressed = true)}
-	on:mouseenter={() => (pressed = false)}>press and hold</button
+	on:mouseenter={() => (pressed = false)}>maintenez appuyé</button
 >
 
 {#if pressed}
-	<p>congratulations, you pressed and held for {duration}ms</p>
+	<p>félicitations, vous avez maintenu le bouton appuyé pendant {duration} ms</p>
 {/if}
diff --git a/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json b/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
index 8a857ebcbb..0af800f0fe 100644
--- a/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
+++ b/documentation/examples/13-actions/01-adding-parameters-to-actions/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Adding parameters"
+	"title": "Ajout de paramètres"
 }
diff --git a/documentation/examples/13-actions/03-actions-pannable/meta.json b/documentation/examples/13-actions/03-actions-pannable/meta.json
index 3041762ecd..5536ab2a39 100644
--- a/documentation/examples/13-actions/03-actions-pannable/meta.json
+++ b/documentation/examples/13-actions/03-actions-pannable/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "A more complex action"
+	"title": "Une action plus complexe"
 }
diff --git a/documentation/examples/14-classes/00-classes/meta.json b/documentation/examples/14-classes/00-classes/meta.json
index 82fca54c3c..691868f054 100644
--- a/documentation/examples/14-classes/00-classes/meta.json
+++ b/documentation/examples/14-classes/00-classes/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The class directive"
+	"title": "La directive de classe"
 }
diff --git a/documentation/examples/14-classes/01-class-shorthand/App.svelte b/documentation/examples/14-classes/01-class-shorthand/App.svelte
index ad39916ce5..2f36b1fad3 100644
--- a/documentation/examples/14-classes/01-class-shorthand/App.svelte
+++ b/documentation/examples/14-classes/01-class-shorthand/App.svelte
@@ -4,11 +4,11 @@
 
 <label>
 	<input type="checkbox" bind:checked={big} />
-	big
+	grand
 </label>
 
 <div class:big>
-	some {big ? 'big' : 'small'} text
+	un texte de {big ? 'grande' : 'petite'} taille
 </div>
 
 <style>
diff --git a/documentation/examples/14-classes/01-class-shorthand/meta.json b/documentation/examples/14-classes/01-class-shorthand/meta.json
index ee98f80149..bb9e383d48 100644
--- a/documentation/examples/14-classes/01-class-shorthand/meta.json
+++ b/documentation/examples/14-classes/01-class-shorthand/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Shorthand class directive"
+	"title": "Directive de classe raccourcie"
 }
diff --git a/documentation/examples/15-composition/00-slots/App.svelte b/documentation/examples/15-composition/00-slots/App.svelte
index 986bdc01c5..1d99f102e9 100644
--- a/documentation/examples/15-composition/00-slots/App.svelte
+++ b/documentation/examples/15-composition/00-slots/App.svelte
@@ -3,6 +3,6 @@
 </script>
 
 <Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
+	<h2>Bonjour !</h2>
+	<p>Ceci est une boîte. Elle peut contenir toutes sortes de choses.</p>
 </Box>
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/App.svelte b/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
index 708428d4d8..d595bee901 100644
--- a/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
+++ b/documentation/examples/15-composition/01-slot-fallbacks/App.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <Box>
-	<h2>Hello!</h2>
-	<p>This is a box. It can contain anything.</p>
+	<h2>Bonjour !</h2>
+	<p>Ceci est une boîte. Elle peut contenir toutes sortes de choses.</p>
 </Box>
 
 <Box />
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte b/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
index 8cb8128b31..abec7c75cb 100644
--- a/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
+++ b/documentation/examples/15-composition/01-slot-fallbacks/Box.svelte
@@ -1,6 +1,6 @@
 <div class="box">
 	<slot>
-		<em>no content was provided</em>
+		<em>aucun contenu n'a été fourni</em>
 	</slot>
 </div>
 
diff --git a/documentation/examples/15-composition/01-slot-fallbacks/meta.json b/documentation/examples/15-composition/01-slot-fallbacks/meta.json
index ccc7d49a93..37a53da2bb 100644
--- a/documentation/examples/15-composition/01-slot-fallbacks/meta.json
+++ b/documentation/examples/15-composition/01-slot-fallbacks/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Slot fallbacks"
+	"title": "Slots par défaut"
 }
diff --git a/documentation/examples/15-composition/02-named-slots/App.svelte b/documentation/examples/15-composition/02-named-slots/App.svelte
index ea27d75edf..3113aad601 100644
--- a/documentation/examples/15-composition/02-named-slots/App.svelte
+++ b/documentation/examples/15-composition/02-named-slots/App.svelte
@@ -3,10 +3,10 @@
 </script>
 
 <ContactCard>
-	<span slot="name"> P. Sherman </span>
+	<span slot="name"> P. Dupont </span>
 
 	<span slot="address">
-		42 Wallaby Way<br />
-		Sydney
+		42 rue de la chocolatine<br />
+		Bordeaux
 	</span>
 </ContactCard>
diff --git a/documentation/examples/15-composition/02-named-slots/ContactCard.svelte b/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
index d72da2ad4c..9c74c8bd23 100644
--- a/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
+++ b/documentation/examples/15-composition/02-named-slots/ContactCard.svelte
@@ -1,19 +1,19 @@
 <article class="contact-card">
 	<h2>
 		<slot name="name">
-			<span class="missing">Unknown name</span>
+			<span class="missing">Nom inconnu</span>
 		</slot>
 	</h2>
 
 	<div class="address">
 		<slot name="address">
-			<span class="missing">Unknown address</span>
+			<span class="missing">Adresse inconnue</span>
 		</slot>
 	</div>
 
 	<div class="email">
 		<slot name="email">
-			<span class="missing">Unknown email</span>
+			<span class="missing">e-mail inconnu</span>
 		</slot>
 	</div>
 </article>
diff --git a/documentation/examples/15-composition/02-named-slots/meta.json b/documentation/examples/15-composition/02-named-slots/meta.json
index b2f48bdaec..a89712c5ef 100644
--- a/documentation/examples/15-composition/02-named-slots/meta.json
+++ b/documentation/examples/15-composition/02-named-slots/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Named slots"
+	"title": "Slots nommés"
 }
diff --git a/documentation/examples/15-composition/03-slot-props/App.svelte b/documentation/examples/15-composition/03-slot-props/App.svelte
index c281e61b04..5b6860ac31 100644
--- a/documentation/examples/15-composition/03-slot-props/App.svelte
+++ b/documentation/examples/15-composition/03-slot-props/App.svelte
@@ -5,9 +5,9 @@
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
-			<p>I am being hovered upon.</p>
+			<p>On me survole.</p>
 		{:else}
-			<p>Hover over me!</p>
+			<p>Survolez-moi !</p>
 		{/if}
 	</div>
 </Hoverable>
@@ -15,9 +15,9 @@
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
-			<p>I am being hovered upon.</p>
+			<p>On me survole.</p>
 		{:else}
-			<p>Hover over me!</p>
+			<p>Survolez-moi !</p>
 		{/if}
 	</div>
 </Hoverable>
@@ -25,9 +25,9 @@
 <Hoverable let:hovering={active}>
 	<div class:active>
 		{#if active}
-			<p>I am being hovered upon.</p>
+			<p>On me survole.</p>
 		{:else}
-			<p>Hover over me!</p>
+			<p>Survolez-moi !</p>
 		{/if}
 	</div>
 </Hoverable>
@@ -46,6 +46,5 @@
 
 	p {
 		pointer-events: none;
-		color: black;
 	}
 </style>
diff --git a/documentation/examples/15-composition/03-slot-props/meta.json b/documentation/examples/15-composition/03-slot-props/meta.json
index 4b28b342fa..e14e15e0b3 100644
--- a/documentation/examples/15-composition/03-slot-props/meta.json
+++ b/documentation/examples/15-composition/03-slot-props/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Slot props"
+	"title": "Propriétés de slot"
 }
diff --git a/documentation/examples/15-composition/04-conditional-slots/Profile.svelte b/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
index 963506ebca..621cec6765 100644
--- a/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
+++ b/documentation/examples/15-composition/04-conditional-slots/Profile.svelte
@@ -1,12 +1,12 @@
 <section>
-	<div>Name</div>
+	<div>Nom</div>
 	<slot name="name" />
 	{#if $$slots.email}
-		<div>Email</div>
+		<div>e-mail</div>
 		<slot name="email" />
 	{/if}
 	{#if $$slots.phone}
-		<div>Phone</div>
+		<div>Téléphone</div>
 		<slot name="phone" />
 	{/if}
 </section>
diff --git a/documentation/examples/15-composition/04-conditional-slots/meta.json b/documentation/examples/15-composition/04-conditional-slots/meta.json
index 26d24b0812..2ced2a077b 100644
--- a/documentation/examples/15-composition/04-conditional-slots/meta.json
+++ b/documentation/examples/15-composition/04-conditional-slots/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Conditional Slots"
+	"title": "Slots conditionnels"
 }
diff --git a/documentation/examples/15-composition/05-modal/App.svelte b/documentation/examples/15-composition/05-modal/App.svelte
index 107affa11d..79de940327 100644
--- a/documentation/examples/15-composition/05-modal/App.svelte
+++ b/documentation/examples/15-composition/05-modal/App.svelte
@@ -4,28 +4,53 @@
 	let showModal = false;
 </script>
 
-<button on:click={() => (showModal = true)}> show modal </button>
+<button on:click={() => (showModal = true)}> afficher la modale </button>
 
 <Modal bind:showModal>
 	<h2 slot="header">
 		modal
-		<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+		<small><em>adjectif</em> mod·al \ˈmō-dəl\</small>
 	</h2>
 
+	<h3>Définitions</h3>
 	<ol class="definition-list">
-		<li>of or relating to modality in logic</li>
+		<li>qui concerne le mode des verbes</li>
+		<li>qui a rapport au mode en musique</li>
 		<li>
-			containing provisions as to the mode of procedure or the manner of taking effect —used of a
-			contract or legacy
+			se dit d'une musique employant d'autres échelles que les deux modes classiques majeur et
+			mineur (par opposition à tonal)
 		</li>
-		<li>of or relating to a musical mode</li>
-		<li>of or relating to structure as opposed to substance</li>
 		<li>
-			of, relating to, or constituting a grammatical form or category characteristically indicating
-			predication
+			auxiliaire ou verbe modal ou modal (nom masculin), verbe qui sert à exprimer les modalités
+			logiques de l'action (contingent vs nécessaire, probable vs possible, etc.).
+		</li>
+		<li>
+			classe modale, pour un caractère continu dont les valeurs sont groupées en classes de même
+			étendue, classe logique dont la fréquence est maximale
+		</li>
+		<li>
+			logique modale, système de logique qui comporte, en sus des connecteurs et quantificateurs de
+			la logique classique, deux opérateurs unaires de modalité, l'un pour la nécessité (« il est
+			nécessaire que… »), l'autre pour la possibilité (« il est possible que… »)
+		</li>
+	</ol>
+
+	<h3>Expressions</h3>
+	<ol class="expression-list">
+		<li>
+			auxiliaire ou verbe modal ou modal (nom masculin), verbe qui sert à exprimer les modalités
+			logiques de l'action (contingent vs nécessaire, probable vs possible, etc.).
+		</li>
+		<li>
+			classe modale, pour un caractère continu dont les valeurs sont groupées en classes de même
+			étendue, classe logique dont la fréquence est maximale
+		</li>
+		<li>
+			logique modale, système de logique qui comporte, en sus des connecteurs et quantificateurs de
+			la logique classique, deux opérateurs unaires de modalité, l'un pour la nécessité (« il est
+			nécessaire que… »), l'autre pour la possibilité (« il est possible que… »)
 		</li>
-		<li>of or relating to a statistical mode</li>
 	</ol>
 
-	<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+	<a href="https://www.larousse.fr/dictionnaires/francais/modal/51904">larousse.fr</a>
 </Modal>
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index 3b832030fe..51db8c7eaf 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -1,25 +1,24 @@
 <script>
-	export let showModal; // boolean
+	export let showModal; // booléen
 
 	let dialog; // HTMLDialogElement
 
 	$: if (dialog && showModal) dialog.showModal();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <dialog
 	bind:this={dialog}
 	on:close={() => (showModal = false)}
 	on:click|self={() => dialog.close()}
 >
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
 		<hr />
 		<slot />
 		<hr />
 		<!-- svelte-ignore a11y-autofocus -->
-		<button autofocus on:click={() => dialog.close()}>close modal</button>
+		<button autofocus on:click={() => dialog.close()}>fermer la modale</button>
 	</div>
 </dialog>
 
diff --git a/documentation/examples/15-composition/05-modal/meta.json b/documentation/examples/15-composition/05-modal/meta.json
index 360dafa159..cacd003503 100644
--- a/documentation/examples/15-composition/05-modal/meta.json
+++ b/documentation/examples/15-composition/05-modal/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Modal"
+	"title": "Modale"
 }
diff --git a/documentation/examples/15-composition/meta.json b/documentation/examples/15-composition/meta.json
index 1d81c05f29..d09bc136eb 100644
--- a/documentation/examples/15-composition/meta.json
+++ b/documentation/examples/15-composition/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Component composition"
+	"title": "Composition de composants"
 }
diff --git a/documentation/examples/16-context/00-context-api/meta.json b/documentation/examples/16-context/00-context-api/meta.json
index f95f4c32b6..db3257d5ad 100644
--- a/documentation/examples/16-context/00-context-api/meta.json
+++ b/documentation/examples/16-context/00-context-api/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "setContext and getContext"
+	"title": "setContext et getContext"
 }
diff --git a/documentation/examples/16-context/meta.json b/documentation/examples/16-context/meta.json
index bb3c2c607d..7d79715125 100644
--- a/documentation/examples/16-context/meta.json
+++ b/documentation/examples/16-context/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Context API"
+	"title": "API de contexte"
 }
diff --git a/documentation/examples/17-special-elements/00-svelte-self/App.svelte b/documentation/examples/17-special-elements/00-svelte-self/App.svelte
index 52c6daf613..c5eeb1e119 100644
--- a/documentation/examples/17-special-elements/00-svelte-self/App.svelte
+++ b/documentation/examples/17-special-elements/00-svelte-self/App.svelte
@@ -4,16 +4,16 @@
 	let root = [
 		{
 			type: 'folder',
-			name: 'Important work stuff',
+			name: 'Trucs importants de boulot',
 			files: [{ type: 'file', name: 'quarterly-results.xlsx' }]
 		},
 		{
 			type: 'folder',
-			name: 'Animal GIFs',
+			name: "GIF d'animaux",
 			files: [
 				{
 					type: 'folder',
-					name: 'Dogs',
+					name: 'Chiens',
 					files: [
 						{ type: 'file', name: 'treadmill.gif' },
 						{ type: 'file', name: 'rope-jumping.gif' }
@@ -21,7 +21,7 @@
 				},
 				{
 					type: 'folder',
-					name: 'Goats',
+					name: 'Chèvres',
 					files: [
 						{ type: 'file', name: 'parkour.gif' },
 						{ type: 'file', name: 'rampage.gif' }
@@ -32,7 +32,7 @@
 				{ type: 'file', name: 'monkey-on-a-pig.gif' }
 			]
 		},
-		{ type: 'file', name: 'TODO.md' }
+		{ type: 'file', name: 'À_FAIRE.md' }
 	];
 </script>
 
diff --git a/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte b/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
index 551f1afbbe..f525dca545 100644
--- a/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
+++ b/documentation/examples/17-special-elements/01-svelte-component/BlueThing.svelte
@@ -1,7 +1,7 @@
-<strong>Blue thing</strong>
+<strong>Truc rouge</strong>
 
 <style>
 	strong {
-		color: blue;
+		color: red;
 	}
 </style>
diff --git a/documentation/examples/17-special-elements/02-svelte-element/App.svelte b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
index 068f7b3c4f..0640e93b5f 100644
--- a/documentation/examples/17-special-elements/02-svelte-element/App.svelte
+++ b/documentation/examples/17-special-elements/02-svelte-element/App.svelte
@@ -9,4 +9,4 @@
 	{/each}
 </select>
 
-<svelte:element this={selected}>I'm a {selected} tag</svelte:element>
+<svelte:element this={selected}>Je suis une balise {selected}</svelte:element>
diff --git a/documentation/examples/17-special-elements/03-svelte-window/App.svelte b/documentation/examples/17-special-elements/03-svelte-window/App.svelte
index 8ccc87d2b3..163219922b 100644
--- a/documentation/examples/17-special-elements/03-svelte-window/App.svelte
+++ b/documentation/examples/17-special-elements/03-svelte-window/App.svelte
@@ -12,10 +12,10 @@
 
 <div style="text-align: center">
 	{#if key}
-		<kbd>{key === ' ' ? 'Space' : key}</kbd>
+		<kbd>{key === ' ' ? 'Espace' : key}</kbd>
 		<p>{keyCode}</p>
 	{:else}
-		<p>Focus this window and press any key</p>
+		<p>Mettez le focus sur cette fenêtre et appuyez sur n'importe quelle touche</p>
 	{/if}
 </div>
 
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
index 7e85600abe..e9823ff6d6 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/App.svelte
@@ -11,16 +11,16 @@
 		<img
 			style="transform: translate(0,{(-y * layer) / (layers.length - 1)}px)"
 			src="https://www.firewatchgame.com/images/parallax/parallax{layer}.png"
-			alt="parallax layer {layer}"
+			alt="couche parallax {layer}"
 		/>
 	{/each}
 </a>
 
 <div class="text">
-	<span style="opacity: {1 - Math.max(0, y / 40)}"> scroll down </span>
+	<span style="opacity: {1 - Math.max(0, y / 40)}"> Faites défiler vers le bas </span>
 
 	<div class="foreground">
-		You have scrolled {y} pixels
+		Vous avez parcouru {y} pixels
 	</div>
 </div>
 
diff --git a/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json b/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
index c4864331cc..eba96d3f15 100644
--- a/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
+++ b/documentation/examples/17-special-elements/04-svelte-window-bindings/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "<svelte:window> bindings"
+	"title": "Liaisons <svelte:window>"
 }
diff --git a/documentation/examples/17-special-elements/05-svelte-document/App.svelte b/documentation/examples/17-special-elements/05-svelte-document/App.svelte
index e11a9005db..c9de2028a2 100644
--- a/documentation/examples/17-special-elements/05-svelte-document/App.svelte
+++ b/documentation/examples/17-special-elements/05-svelte-document/App.svelte
@@ -1,10 +1,9 @@
 <script>
 	let selection = '';
-
 	const handleSelectionChange = (e) => (selection = document.getSelection());
 </script>
 
 <svelte:document on:selectionchange={handleSelectionChange} />
 
-<p>Select this text to fire events</p>
-<p>Selection: {selection}</p>
+<p>Sélectionner ce texte pour déclencher des évènements</p>
+<p>Sélection: {selection}</p>
diff --git a/documentation/examples/17-special-elements/06-svelte-body/App.svelte b/documentation/examples/17-special-elements/06-svelte-body/App.svelte
index 71edebea48..65bedf2241 100644
--- a/documentation/examples/17-special-elements/06-svelte-body/App.svelte
+++ b/documentation/examples/17-special-elements/06-svelte-body/App.svelte
@@ -10,7 +10,7 @@
 <!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
 <img
 	class:curious={hereKitty}
-	alt="Kitten wants to know what's going on"
+	alt="Des chatons curieux veulent savoir ce qu'il se passe"
 	src="/tutorial/kitten.png"
 />
 
diff --git a/documentation/examples/17-special-elements/07-svelte-head/App.svelte b/documentation/examples/17-special-elements/07-svelte-head/App.svelte
index 5e6bb2d945..01a6546ed3 100644
--- a/documentation/examples/17-special-elements/07-svelte-head/App.svelte
+++ b/documentation/examples/17-special-elements/07-svelte-head/App.svelte
@@ -2,4 +2,4 @@
 	<link rel="stylesheet" href="/tutorial/dark-theme.css" />
 </svelte:head>
 
-<h1>Hello world!</h1>
+<h1>Bonjour tout le monde !</h1>
diff --git a/documentation/examples/17-special-elements/meta.json b/documentation/examples/17-special-elements/meta.json
index 6c2af96c1d..fa47b3b421 100644
--- a/documentation/examples/17-special-elements/meta.json
+++ b/documentation/examples/17-special-elements/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Special elements"
+	"title": "Éléments spéciaux"
 }
diff --git a/documentation/examples/18-module-context/01-module-exports/App.svelte b/documentation/examples/18-module-context/01-module-exports/App.svelte
index a018d3429f..ab510aa253 100644
--- a/documentation/examples/18-module-context/01-module-exports/App.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/App.svelte
@@ -2,7 +2,7 @@
 	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
 </script>
 
-<button on:click={stopAll}> stop all audio </button>
+<button on:click={stopAll}> arrêter tous les lecteurs </button>
 
 <!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
 <AudioPlayer
diff --git a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
index b76601e025..4d9e8b418b 100644
--- a/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
+++ b/documentation/examples/18-module-context/01-module-exports/AudioPlayer.svelte
@@ -33,7 +33,7 @@
 
 <article class:playing={!paused}>
 	<h2>{title}</h2>
-	<p><strong>{composer}</strong> / performed by {performer}</p>
+	<p><strong>{composer}</strong> / interprété par {performer}</p>
 
 	<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
 </article>
diff --git a/documentation/examples/18-module-context/01-module-exports/meta.json b/documentation/examples/18-module-context/01-module-exports/meta.json
index 5d718fc840..ce21d57aa4 100644
--- a/documentation/examples/18-module-context/01-module-exports/meta.json
+++ b/documentation/examples/18-module-context/01-module-exports/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Named exports"
+	"title": "Exports nommés"
 }
diff --git a/documentation/examples/19-debugging/00-debug/App.svelte b/documentation/examples/19-debugging/00-debug/App.svelte
index 30bffc896c..65aed6a887 100644
--- a/documentation/examples/19-debugging/00-debug/App.svelte
+++ b/documentation/examples/19-debugging/00-debug/App.svelte
@@ -10,4 +10,4 @@
 
 {@debug user}
 
-<h1>Hello {user.firstname}!</h1>
+<h1>Bonjour {user.firstname} !</h1>
diff --git a/documentation/examples/19-debugging/00-debug/meta.json b/documentation/examples/19-debugging/00-debug/meta.json
index e899108a45..0137afa334 100644
--- a/documentation/examples/19-debugging/00-debug/meta.json
+++ b/documentation/examples/19-debugging/00-debug/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "The @debug tag"
+	"title": "La balise @debug"
 }
diff --git a/documentation/examples/19-debugging/meta.json b/documentation/examples/19-debugging/meta.json
index 5cfdfbc17d..c1d03178ac 100644
--- a/documentation/examples/19-debugging/meta.json
+++ b/documentation/examples/19-debugging/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Debugging"
+	"title": "Débugger"
 }
diff --git a/documentation/examples/20-7guis/01-7guis-counter/App.svelte b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
index 26c8c51477..eb570dd0cc 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/App.svelte
+++ b/documentation/examples/20-7guis/01-7guis-counter/App.svelte
@@ -4,4 +4,4 @@
 </script>
 
 <input type="number" bind:value={count} />
-<button on:click={() => (count += 1)}>count</button>
+<button on:click={() => (count += 1)}>compter</button>
diff --git a/documentation/examples/20-7guis/01-7guis-counter/meta.json b/documentation/examples/20-7guis/01-7guis-counter/meta.json
index c7fe17ca02..578a5f43ad 100644
--- a/documentation/examples/20-7guis/01-7guis-counter/meta.json
+++ b/documentation/examples/20-7guis/01-7guis-counter/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Counter"
+	"title": "Compteur"
 }
diff --git a/documentation/examples/20-7guis/02-7guis-temperature/meta.json b/documentation/examples/20-7guis/02-7guis-temperature/meta.json
index c5eacde091..5c390f2b9d 100644
--- a/documentation/examples/20-7guis/02-7guis-temperature/meta.json
+++ b/documentation/examples/20-7guis/02-7guis-temperature/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Temperature Converter"
+	"title": "Convertisseur de température"
 }
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
index 42caebe506..d45ba1e77f 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/App.svelte
@@ -15,11 +15,11 @@
 	$: endDate = convertToDate(end);
 
 	function bookFlight() {
-		const type = isReturn ? 'return' : 'one-way';
+		const type = isReturn ? 'A-R' : 'aller simple';
 
-		let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
-		if (type === 'return') {
-			message += ` and returning ${endDate.toDateString()}`;
+		let message = `Vous avez réservé un vol ${type}, qui décolle le ${startDate.toDateString()}`;
+		if (type === 'A-R') {
+			message += ` et revient le ${endDate.toDateString()}`;
 		}
 
 		alert(message);
@@ -38,14 +38,14 @@
 </script>
 
 <select bind:value={isReturn}>
-	<option value={false}>one-way flight</option>
-	<option value={true}>return flight</option>
+	<option value={false}>Aller simple</option>
+	<option value={true}>Aller-retour</option>
 </select>
 
 <input type="date" bind:value={start} />
 <input type="date" bind:value={end} disabled={!isReturn} />
 
-<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>book</button>
+<button on:click={bookFlight} disabled={isReturn && startDate >= endDate}>réserver</button>
 
 <style>
 	select,
diff --git a/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json b/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
index 05abfec119..31db07c9c6 100644
--- a/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
+++ b/documentation/examples/20-7guis/03-7guis-flight-booker/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Flight booker"
+	"title": "Réservateur de vol"
 }
diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
index dab2d6de44..f659f61447 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
@@ -24,15 +24,15 @@
 </script>
 
 <label>
-	elapsed time:
+	temps écoulé :
 	<progress value={elapsed / duration} />
 </label>
 
 <div>{(elapsed / 1000).toFixed(1)}s</div>
 
 <label>
-	duration:
+	durée :
 	<input type="range" bind:value={duration} min="1" max="20000" />
 </label>
 
-<button on:click={() => (elapsed = 0)}>reset</button>
+<button on:click={() => (elapsed = 0)}>réinitialiser</button>
diff --git a/documentation/examples/20-7guis/04-7guis-timer/meta.json b/documentation/examples/20-7guis/04-7guis-timer/meta.json
index fdae7a752c..0ea6a966be 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/meta.json
+++ b/documentation/examples/20-7guis/04-7guis-timer/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Timer"
+	"title": "Chronomètre"
 }
diff --git a/documentation/examples/20-7guis/05-7guis-crud/App.svelte b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
index 15a2ee6cd0..0c8465d2a0 100644
--- a/documentation/examples/20-7guis/05-7guis-crud/App.svelte
+++ b/documentation/examples/20-7guis/05-7guis-crud/App.svelte
@@ -36,7 +36,7 @@
 	}
 
 	function remove() {
-		// Remove selected person from the source array (people), not the filtered array
+		// Supprime la personne sélectionnée du tableau source (people), mais pas du tableau filtré
 		const index = people.indexOf(selected);
 		people = [...people.slice(0, index), ...people.slice(index + 1)];
 
@@ -58,13 +58,13 @@
 	{/each}
 </select>
 
-<label><input bind:value={first} placeholder="first" /></label>
-<label><input bind:value={last} placeholder="last" /></label>
+<label><input bind:value={first} placeholder="premier" /></label>
+<label><input bind:value={last} placeholder="dernier" /></label>
 
 <div class="buttons">
-	<button on:click={create} disabled={!first || !last}>create</button>
-	<button on:click={update} disabled={!first || !last || !selected}>update</button>
-	<button on:click={remove} disabled={!selected}>delete</button>
+	<button on:click={create} disabled={!first || !last}>créer</button>
+	<button on:click={update} disabled={!first || !last || !selected}>éditer</button>
+	<button on:click={remove} disabled={!selected}>supprimer</button>
 </div>
 
 <style>
diff --git a/documentation/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
index 12d79a1a05..aed5198167 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
@@ -1,9 +1,8 @@
 <!--
 https://eugenkiss.github.io/7guis/tasks#circle
 
-Click on the canvas to draw a circle. Click on a circle
-to select it. Right-click on the canvas to adjust the
-radius of the selected circle.
+Cliquez sur le canvas pour dessiner un cercle. Cliquez sur un cercle pour le sélectionner.
+Faites un clic-droit sur le canvas pour ajuster le rayon du cercle sélectionné
 -->
 
 <script>
@@ -18,8 +17,8 @@ radius of the selected circle.
 		if (adjusting) {
 			adjusting = false;
 
-			// if circle was adjusted,
-			// push to the stack
+			// si le cercle est ajusté,
+			// l'ajouter à la pile
 			if (adjusted) push();
 			return;
 		}
@@ -66,13 +65,12 @@ radius of the selected circle.
 </script>
 
 <div class="controls">
-	<button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
-	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>redo</button>
+	<button on:click={() => travel(-1)} disabled={i === 0}>annuler</button>
+	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>refaire</button>
 </div>
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+
 <svg on:click={handleClick}>
 	{#each circles as circle}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<circle
 			cx={circle.cx}
 			cy={circle.cy}
@@ -89,7 +87,7 @@ radius of the selected circle.
 
 {#if adjusting}
 	<div class="adjuster">
-		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
+		<p>ajuster le diamètre du cercle en position {selected.cx}, {selected.cy}</p>
 		<input type="range" value={selected.r} on:input={adjust} />
 	</div>
 {/if}
diff --git a/documentation/examples/20-7guis/06-7guis-circles/meta.json b/documentation/examples/20-7guis/06-7guis-circles/meta.json
index 963e1f9421..639bbdf455 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/meta.json
+++ b/documentation/examples/20-7guis/06-7guis-circles/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Circle Drawer"
+	"title": "Créateur de cercles"
 }
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
index e954246595..91483ab50c 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/App.svelte
@@ -7,7 +7,7 @@
 	let page;
 
 	async function hashchange() {
-		// the poor man's router!
+		// le routeur du pauvre !
 		const path = window.location.hash.slice(1);
 
 		if (path.startsWith('/item')) {
@@ -50,4 +50,8 @@
 		font-size: 12px;
 		margin: 0 0 1em 0;
 	}
+
+	main :global(a) {
+		color: rgb(0, 0, 150);
+	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
index db57a25757..7491ad4caa 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/Item.svelte
@@ -7,7 +7,7 @@
 	$: url = !item.domain ? `https://news.ycombinator.com/${item.url}` : item.url;
 </script>
 
-<a href={returnTo}>&laquo; back</a>
+<a href={returnTo}>&laquo; retour</a>
 
 <article>
 	<a href={url}>
@@ -17,7 +17,7 @@
 		{/if}
 	</a>
 
-	<p class="meta">submitted by {item.user} {item.time_ago}</p>
+	<p class="meta">posté par {item.user} {item.time_ago}</p>
 </article>
 
 <div class="comments">
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
index e3f0b7b822..45192229c0 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/List.svelte
@@ -25,7 +25,7 @@
 
 	<a href="#/top/{page + 1}">page {page + 1}</a>
 {:else}
-	<p class="loading">loading...</p>
+	<p class="loading">chargement...</p>
 {/if}
 
 <style>
diff --git a/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte b/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
index 360d2181b6..53dfd1a47a 100644
--- a/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
+++ b/documentation/examples/21-miscellaneous/01-hacker-news/Summary.svelte
@@ -5,7 +5,7 @@
 
 	function comment_text() {
 		const c = item.comments_count;
-		return `${c} ${c === 1 ? 'comment' : 'comments'}`;
+		return `${c} ${c === 1 ? 'commentaire' : 'commentaires'}`;
 	}
 
 	$: url = item.type === 'ask' ? `https://news.ycombinator.com/${item.url}` : item.url;
@@ -14,7 +14,10 @@
 <article>
 	<span>{i + offset + 1}</span>
 	<h2><a target="_blank" rel="noreferrer" href={url}>{item.title}</a></h2>
-	<p class="meta"><a href="#/item/{item.id}">{comment_text()}</a> by {item.user} {item.time_ago}</p>
+	<p class="meta">
+		<a href="#/item/{item.id}">{comment_text()}</a> par {item.user}
+		{item.time_ago}
+	</p>
 </article>
 
 <style>
@@ -33,4 +36,8 @@
 		position: absolute;
 		left: 0;
 	}
+
+	a {
+		color: #333;
+	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
index 05d0820f9e..4264a26b80 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
@@ -3,15 +3,15 @@
 	import MutableTodo from './MutableTodo.svelte';
 
 	let todos = [
-		{ id: 1, done: true, text: 'wash the car' },
-		{ id: 2, done: false, text: 'take the dog for a walk' },
-		{ id: 3, done: false, text: 'mow the lawn' }
+		{ id: 1, done: true, text: 'laver la voiture' },
+		{ id: 2, done: false, text: 'sortir le chien' },
+		{ id: 3, done: false, text: 'tondre la pelouse' }
 	];
 
 	function toggle(id) {
 		todos = todos.map((todo) => {
 			if (todo.id === id) {
-				// return a new object
+				// renvoie un nouvel objet
 				return {
 					id,
 					done: !todo.done,
@@ -19,7 +19,7 @@
 				};
 			}
 
-			// return the same object
+			// renvoie le même objet
 			return todo;
 		});
 	}
@@ -27,10 +27,10 @@
 
 <h2>Immutable</h2>
 {#each todos as todo}
-	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} /><br>
+	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} />
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<MutableTodo {todo} on:click={() => toggle(todo.id)} /><br>
+	<MutableTodo {todo} on:click={() => toggle(todo.id)} />
 {/each}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 8044f6be4e..ebdf438f63 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -6,25 +6,23 @@
 
 	export let todo;
 
-	let btn;
+	let div;
 
 	afterUpdate(() => {
-		flash(btn);
+		flash(div);
 	});
 </script>
 
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<button bind:this={btn} on:click>
+<!-- le texte clignote en rouge quand
+     l'objet `todo` change -->
+<div bind:this={div} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</button>
+</div>
 
 <style>
-	button {
+	div {
 		cursor: pointer;
-		border:none;
-		background:none;
-		font-size:14px;
+		line-height: 1.5;
 	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index f92468ab79..9fd4f4c97d 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -4,25 +4,23 @@
 
 	export let todo;
 
-	let btn;
+	let div;
 
 	afterUpdate(() => {
-		flash(btn);
+		flash(div);
 	});
 </script>
 
-<!-- the text will flash red whenever
-		the `todo` object changes -->
-<button bind:this={btn}>
+<!-- le texte clignote en rouge quand
+     l'objet `todo` change -->
+<div bind:this={div} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</button>
+</div>
 
 <style>
-	button {
+	div {
 		cursor: pointer;
-		border:none;
-		background:none;
-		font-size:14px;
+		line-height: 1.5;
 	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/meta.json b/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
index a896bad1b4..22818ce705 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/meta.json
@@ -1,3 +1,3 @@
 {
-	"title": "Immutable data"
+	"title": "Données immutables"
 }