diff --git a/site/examples/check-lists.js b/site/examples/check-lists.tsx
similarity index 96%
rename from site/examples/check-lists.js
rename to site/examples/check-lists.tsx
index b40dbc70e52..ec55e59b644 100644
--- a/site/examples/check-lists.js
+++ b/site/examples/check-lists.tsx
@@ -7,12 +7,12 @@ import {
   useReadOnly,
   ReactEditor,
 } from 'slate-react'
-import { Editor, Transforms, Range, Point, createEditor } from 'slate'
+import { Node, Editor, Transforms, Range, Point, createEditor } from 'slate'
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 
 const CheckListsExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withChecklists(withHistory(withReact(createEditor()))),
diff --git a/site/examples/editable-voids.js b/site/examples/editable-voids.tsx
similarity index 96%
rename from site/examples/editable-voids.js
rename to site/examples/editable-voids.tsx
index c2187cc9307..6f836cee967 100644
--- a/site/examples/editable-voids.js
+++ b/site/examples/editable-voids.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { Transforms, createEditor } from 'slate'
+import { Transforms, createEditor, Node } from 'slate'
 import { Slate, Editable, useEditor, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
@@ -8,7 +8,7 @@ import RichTextEditor from './richtext'
 import { Button, Icon, Toolbar } from '../components'
 
 const EditableVoidsExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(
     () => withEditableVoids(withHistory(withReact(createEditor()))),
     []
diff --git a/site/examples/embeds.js b/site/examples/embeds.tsx
similarity index 96%
rename from site/examples/embeds.js
rename to site/examples/embeds.tsx
index 3d8a7c83186..c7eccc05cab 100644
--- a/site/examples/embeds.js
+++ b/site/examples/embeds.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react'
-import { Transforms, createEditor } from 'slate'
+import { Transforms, createEditor, Node } from 'slate'
 import {
   Slate,
   Editable,
@@ -11,7 +11,7 @@ import {
 } from 'slate-react'
 
 const EmbedsExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
diff --git a/site/examples/forced-layout.js b/site/examples/forced-layout.tsx
similarity index 97%
rename from site/examples/forced-layout.js
rename to site/examples/forced-layout.tsx
index e5cb344303f..f10e2bd81a8 100644
--- a/site/examples/forced-layout.js
+++ b/site/examples/forced-layout.tsx
@@ -34,7 +34,7 @@ const withLayout = editor => {
 }
 
 const ForcedLayoutExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withLayout(withHistory(withReact(createEditor()))),
diff --git a/site/examples/hovering-toolbar.js b/site/examples/hovering-toolbar.tsx
similarity index 93%
rename from site/examples/hovering-toolbar.js
rename to site/examples/hovering-toolbar.tsx
index e3568b3daac..1317e413110 100644
--- a/site/examples/hovering-toolbar.js
+++ b/site/examples/hovering-toolbar.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useRef, useEffect } from 'react'
 import { Slate, Editable, ReactEditor, withReact, useSlate } from 'slate-react'
-import { Editor, Transforms, Text, createEditor } from 'slate'
+import { Editor, Transforms, Text, createEditor, Node } from 'slate'
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 
@@ -8,7 +8,7 @@ import { Button, Icon, Menu, Portal } from '../components'
 import { Range } from 'slate'
 
 const HoveringMenuExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
 
   return (
@@ -17,7 +17,7 @@ const HoveringMenuExample = () => {
       <Editable
         renderLeaf={props => <Leaf {...props} />}
         placeholder="Enter some text..."
-        onDOMBeforeInput={event => {
+        onDOMBeforeInput={(event: InputEvent) => {
           event.preventDefault()
           switch (event.inputType) {
             case 'formatBold':
@@ -67,7 +67,7 @@ const Leaf = ({ attributes, children, leaf }) => {
 }
 
 const HoveringToolbar = () => {
-  const ref = useRef()
+  const ref = useRef<HTMLDivElement | null>()
   const editor = useSlate()
 
   useEffect(() => {
@@ -91,7 +91,7 @@ const HoveringToolbar = () => {
     const domSelection = window.getSelection()
     const domRange = domSelection.getRangeAt(0)
     const rect = domRange.getBoundingClientRect()
-    el.style.opacity = 1
+    el.style.opacity = '1'
     el.style.top = `${rect.top + window.pageYOffset - el.offsetHeight}px`
     el.style.left = `${rect.left +
       window.pageXOffset -
diff --git a/site/examples/huge-document.js b/site/examples/huge-document.tsx
similarity index 100%
rename from site/examples/huge-document.js
rename to site/examples/huge-document.tsx
diff --git a/site/examples/images.js b/site/examples/images.tsx
similarity index 97%
rename from site/examples/images.js
rename to site/examples/images.tsx
index 249f79eb62d..431bc092ca7 100644
--- a/site/examples/images.js
+++ b/site/examples/images.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react'
 import imageExtensions from 'image-extensions'
 import isUrl from 'is-url'
-import { Transforms, createEditor } from 'slate'
+import { Node, Transforms, createEditor } from 'slate'
 import {
   Slate,
   Editable,
@@ -16,7 +16,7 @@ import { css } from 'emotion'
 import { Button, Icon, Toolbar } from '../components'
 
 const ImagesExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(
     () => withImages(withHistory(withReact(createEditor()))),
     []
diff --git a/site/examples/links.js b/site/examples/links.tsx
similarity index 96%
rename from site/examples/links.js
rename to site/examples/links.tsx
index 92d205d18f2..e5b1201fe35 100644
--- a/site/examples/links.js
+++ b/site/examples/links.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useMemo } from 'react'
 import isUrl from 'is-url'
 import { Slate, Editable, withReact, useSlate } from 'slate-react'
-import { Transforms, Editor, Range, createEditor } from 'slate'
+import { Node, Transforms, Editor, Range, createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 
 import { Button, Icon, Toolbar } from '../components'
 
 const LinkExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(
     () => withLinks(withHistory(withReact(createEditor()))),
     []
diff --git a/site/examples/markdown-preview.js b/site/examples/markdown-preview.tsx
similarity index 97%
rename from site/examples/markdown-preview.js
rename to site/examples/markdown-preview.tsx
index 78a3eb2279f..d75c1e04635 100644
--- a/site/examples/markdown-preview.js
+++ b/site/examples/markdown-preview.tsx
@@ -1,7 +1,7 @@
 import Prism from 'prismjs'
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Text, createEditor } from 'slate'
+import { Node, Text, createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 
@@ -9,7 +9,7 @@ import { css } from 'emotion'
 ;Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])([\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.italic.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.bold.inside.italic=Prism.util.clone(Prism.languages.markdown.italic),Prism.languages.markdown.italic.inside.bold=Prism.util.clone(Prism.languages.markdown.bold); // prettier-ignore
 
 const MarkdownPreviewExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(([node, path]) => {
diff --git a/site/examples/markdown-shortcuts.js b/site/examples/markdown-shortcuts.tsx
similarity index 97%
rename from site/examples/markdown-shortcuts.js
rename to site/examples/markdown-shortcuts.tsx
index 4421ea6a33c..68ad98140ea 100644
--- a/site/examples/markdown-shortcuts.js
+++ b/site/examples/markdown-shortcuts.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Editor, Transforms, Range, Point, createEditor } from 'slate'
+import { Node, Editor, Transforms, Range, Point, createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 
 const SHORTCUTS = {
@@ -17,7 +17,7 @@ const SHORTCUTS = {
 }
 
 const MarkdownShortcutsExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const editor = useMemo(
     () => withShortcuts(withReact(withHistory(createEditor()))),
diff --git a/site/examples/mentions.js b/site/examples/mentions.tsx
similarity index 98%
rename from site/examples/mentions.js
rename to site/examples/mentions.tsx
index 2289d151b86..f558e2e6814 100644
--- a/site/examples/mentions.js
+++ b/site/examples/mentions.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useRef, useEffect, useState } from 'react'
-import { Editor, Transforms, Range, createEditor } from 'slate'
+import { Node, Editor, Transforms, Range, createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 import {
   Slate,
@@ -13,9 +13,9 @@ import {
 import { Portal } from '../components'
 
 const MentionExample = () => {
-  const ref = useRef()
-  const [value, setValue] = useState(initialValue)
-  const [target, setTarget] = useState()
+  const ref = useRef<HTMLDivElement | null>()
+  const [value, setValue] = useState<Node[]>(initialValue)
+  const [target, setTarget] = useState<Range | undefined>()
   const [index, setIndex] = useState(0)
   const [search, setSearch] = useState('')
   const renderElement = useCallback(props => <Element {...props} />, [])
diff --git a/site/examples/paste-html.js b/site/examples/paste-html.tsx
similarity index 98%
rename from site/examples/paste-html.js
rename to site/examples/paste-html.tsx
index a06bc618745..8142a61bed2 100644
--- a/site/examples/paste-html.js
+++ b/site/examples/paste-html.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { jsx } from 'slate-hyperscript'
-import { Transforms, createEditor } from 'slate'
+import { Node, Transforms, createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 import { css } from 'emotion'
 import {
@@ -80,7 +80,7 @@ export const deserialize = el => {
 }
 
 const PasteHtmlExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
diff --git a/site/examples/plaintext.js b/site/examples/plaintext.tsx
similarity index 85%
rename from site/examples/plaintext.js
rename to site/examples/plaintext.tsx
index 6d458703de2..6677671722d 100644
--- a/site/examples/plaintext.js
+++ b/site/examples/plaintext.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useMemo } from 'react'
-import { createEditor } from 'slate'
+import { Node, createEditor } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
 const PlainTextExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
diff --git a/site/examples/read-only.js b/site/examples/read-only.tsx
similarity index 84%
rename from site/examples/read-only.js
rename to site/examples/read-only.tsx
index 0aca0cb4892..b1b403e2696 100644
--- a/site/examples/read-only.js
+++ b/site/examples/read-only.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useMemo } from 'react'
-import { createEditor } from 'slate'
+import { createEditor, Node } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
 const ReadOnlyExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const editor = useMemo(() => withReact(createEditor()), [])
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
diff --git a/site/examples/search-highlighting.js b/site/examples/search-highlighting.tsx
similarity index 93%
rename from site/examples/search-highlighting.js
rename to site/examples/search-highlighting.tsx
index 15c72b5e9ec..037aac5cc8f 100644
--- a/site/examples/search-highlighting.js
+++ b/site/examples/search-highlighting.tsx
@@ -1,14 +1,14 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Text, createEditor } from 'slate'
+import { Text, Node, createEditor } from 'slate'
 import { css } from 'emotion'
 import { withHistory } from 'slate-history'
 
 import { Icon, Toolbar } from '../components'
 
 const SearchHighlightingExample = () => {
-  const [value, setValue] = useState(initialValue)
-  const [search, setSearch] = useState()
+  const [value, setValue] = useState<Node[]>(initialValue)
+  const [search, setSearch] = useState<string | undefined>()
   const editor = useMemo(() => withHistory(withReact(createEditor())), [])
   const decorate = useCallback(
     ([node, path]) => {
diff --git a/site/examples/tables.js b/site/examples/tables.tsx
similarity index 97%
rename from site/examples/tables.js
rename to site/examples/tables.tsx
index 301bc470e86..5b3250fcb3d 100644
--- a/site/examples/tables.js
+++ b/site/examples/tables.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { Slate, Editable, withReact } from 'slate-react'
-import { Editor, Range, Point, createEditor } from 'slate'
+import { Editor, Range, Point, Node, createEditor } from 'slate'
 import { withHistory } from 'slate-history'
 
 const TablesExample = () => {
-  const [value, setValue] = useState(initialValue)
+  const [value, setValue] = useState<Node[]>(initialValue)
   const renderElement = useCallback(props => <Element {...props} />, [])
   const renderLeaf = useCallback(props => <Leaf {...props} />, [])
   const editor = useMemo(
diff --git a/site/next.config.js b/site/next.config.js
index 2a599c6fd9f..b5336a5bfdb 100644
--- a/site/next.config.js
+++ b/site/next.config.js
@@ -14,8 +14,7 @@ module.exports = {
         continue
       }
 
-      let example = file.replace('.js', '')
-      example = file.replace('.tsx', '')
+      const example = file.replace('.tsx', '')
       pages[`/examples/${example}`] = { page: '/examples/[example]', example }
     }