From 061525a565817e6191573580023d37fb5e7a222e Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Wed, 23 Sep 2020 10:17:42 +0800
Subject: [PATCH] add docs

---
 site/content/docs/02-template-syntax.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/site/content/docs/02-template-syntax.md b/site/content/docs/02-template-syntax.md
index e93449728b..74beaa2358 100644
--- a/site/content/docs/02-template-syntax.md
+++ b/site/content/docs/02-template-syntax.md
@@ -342,6 +342,31 @@ If you don't care about the pending state, you can also omit the initial block.
 {/await}
 ```
 
+### {#key ...}
+
+```sv
+{#key expression}...{/key}
+```
+
+---
+
+Key block destroys and recreates the elements when the value of the expression changes.
+
+This is useful if you want to transition the element whenever the expression value changes.
+
+```sv
+{#key value}
+	<div transition:fade>{value}</div>
+{/key}
+```
+
+Another use case is to reinitialise a Svelte component.
+
+```sv
+{#key value}
+	<Component />
+{/key}
+```
 
 ### {@html ...}