diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index b58570f85..871868f0e 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -6,3 +6,9 @@ updates:
       interval: "weekly"
       day: "friday"
     open-pull-requests-limit: 5
+
+  - package-ecosystem: "npm"
+    directory: "/website"
+    schedule:
+      interval: "daily"
+    target-branch: "master"
diff --git a/.github/workflows/build-website.yml b/.github/workflows/build-website.yml
index a67eca797..18e31b04a 100644
--- a/.github/workflows/build-website.yml
+++ b/.github/workflows/build-website.yml
@@ -20,15 +20,21 @@ jobs:
       PR_INFO_FILE: ".PR_INFO"
     steps:
       - uses: actions/checkout@v2
+
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "16"
+
+      - name: Check Translations
+        run: |
+          cd website
+          npm install
+          npm run check-translations
 
       - name: Build
         run: |
           cd website
-          npm install
           npm run build
 
       - name: Upload build artifact
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index aaca04c3b..f27a882f1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -101,3 +101,10 @@ Below, you can find some useful guidance and best practices on how to write APIs
 
 - [The Rust API Guidelines](https://rust-lang.github.io/api-guidelines/)
 - [Elegant Library APIs in Rust](https://deterministic.space/elegant-apis-in-rust.html)
+
+## Website
+
+The source code of our website ([https://yew.rs](https://yew.rs)) is in the [website directory](website).
+Most of the times, edits can be done in markdown.
+
+[website/README.md](website/README.md) has more detailed instructions.
\ No newline at end of file
diff --git a/README.md b/README.md
index bf46ee912..03bbb56fc 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
     <a href="https://crates.io/crates/yew"><img alt="Crate Info" src="https://img.shields.io/crates/v/yew.svg"/></a>
     <a href="https://docs.rs/yew/"><img alt="API Docs" src="https://img.shields.io/badge/docs.rs-yew-green"/></a>
     <a href="https://discord.gg/VQck8X4"><img alt="Discord Chat" src="https://img.shields.io/discord/701068342760570933"/></a>
-    <a href="https://gitlocalize.com/repo/4999"> <img src="https://gitlocalize.com/repo/4999/whole_project/badge.svg" /> </a>
+    <a href="https://gitlocalize.com/repo/4999/whole_project?utm_source=badge"> <img src="https://gitlocalize.com/repo/4999/whole_project/badge.svg" /> </a>
     <a href="https://blog.rust-lang.org/2020/12/31/Rust-1.56.0.html"><img alt="Rustc Version 1.56.0+" src="https://img.shields.io/badge/rustc-1.56%2B-lightgrey.svg"/></a>
   </p>
 
diff --git a/website/README.md b/website/README.md
index 7bf6d35b7..8fea65924 100644
--- a/website/README.md
+++ b/website/README.md
@@ -2,6 +2,9 @@
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
+Most of the content sits inside the [docs](docs) folder and the [versioned_docs](versioned_docs) folder in the form of 
+markdown.
+
 ## Installation
 
 ```console
@@ -18,7 +21,7 @@ This command starts a local development server and opens up a browser window. Mo
 without having to restart the server.
 Note this only builds for English locale unlike a production build.
 
-> Documentation is written in `mdx`, markdown empowered with jsx.
+> Documentation is written in `mdx`, a superset of markdown empowered with jsx.
 > JetBrains and VSCode both provide MDX plugins.
 
 ## Production Build
@@ -29,10 +32,34 @@ npm run build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-## Deployment
+## Localization
 
-```console
-GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+Localization is done on [GitLocalize](https://gitlocalize.com/repo/4999/whole_project).
+You can sign in with your GitHub account to start translating.
+
+When you add to the docs in the `mdx` files,  
+Contributors on GitLocalize will translate the added content
+and the translation will get dumped under the [i18n](i18n) folder in a later time.
+
+If you are a native speaker of one of the translated languages,
+and you are interested in translating your edits yourself, 
+you are welcome to navigate to the folder and do it yourself!
+
+If you want to write displayed content in `html/jsx` instead of vanilla markdown,
+You should wrap your text in `<Translate/>` tags.
+It helps docusaurus to extract those texts and compile them to `.json` files to
+get further translated in GitLocalize.
+
+```jsx
+import Translate from '@docusaurus/Translate';
+
+<h2>
+    <Translate id="header.translation.id" description="the header description">
+        This header will be translated
+    </Translate>
+</h2>;
 ```
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+If your pull request adds new `<Translation>` tags,
+make sure you do `npm run write-translations` to generate the new stubs for later localization.
+And you are always welcome to add localization yourself in your native languages!
diff --git a/website/check-translations.js b/website/check-translations.js
new file mode 100644
index 000000000..8b61965c6
--- /dev/null
+++ b/website/check-translations.js
@@ -0,0 +1,37 @@
+const {i18n: {locales}} = require('./docusaurus.config.js');
+const util = require('util');
+const exec = util.promisify(require('child_process').exec);
+const path = require('path');
+const fs = require('fs');
+const os = require('os');
+const dircompare = require('dir-compare');
+const writeTranslations = require('./write-translations.js')
+
+
+const temp = fs.mkdtempSync(path.join(os.tmpdir(), 'yew-website-'));
+
+
+async function main() {
+    await new Promise(resolve => {
+        fs.cp('i18n', temp, {recursive: true}, () => {
+            resolve()
+        })
+    })
+
+    await writeTranslations()
+
+    const result = await dircompare.compare(temp, 'i18n', {compareContent: true});
+    if (result.same) {
+        console.log("Translations unchanged");
+    } else {
+        console.error("Translations changed, please run `npm run write-translations` to generate the stubs");
+        process.exitCode = 1;
+    }
+}
+
+main()
+    .catch(e => console.error(e))
+
+
+
+
diff --git a/website/i18n/ja/code.json b/website/i18n/ja/code.json
new file mode 100644
index 000000000..3df58d96d
--- /dev/null
+++ b/website/i18n/ja/code.json
@@ -0,0 +1,198 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "This page crashed.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Try again",
+    "description": "The label of the button to try again when the page crashed"
+  },
+  "theme.NotFound.title": {
+    "message": "ページが見つかりません",
+    "description": "The title of the 404 page"
+  },
+  "theme.NotFound.p1": {
+    "message": "お探しのページが見つかりませんでした。",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "このページにリンクしているサイトの所有者に連絡をしてリンクが壊れていることを伝えてください。",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "閉じる",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Scroll back to top",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Archive",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Archive",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "ブログ記事一覧のナビゲーション",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "新しい記事",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "過去の記事",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "約{readingTime}分",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.post.readMore": {
+    "message": "もっと見る",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "ブログ記事のナビゲーション",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "新しい記事",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "過去の記事",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Blog recent posts navigation",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.blog.post.plurals": {
+    "message": "{count}件",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "「{tagName}」タグの記事が{nPosts}あります",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "全てのタグを見る",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "クリップボードにコードをコピー",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "コピーしました",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "コピー",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "サイドバーを開く",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "サイドバーを開く",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "ドキュメントのナビゲーション",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.next": {
+    "message": "次へ",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "前へ",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "サイドバーを隠す",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "サイドバーを隠す",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": {
+    "message": "Toggle the collapsible sidebar category '{label}'",
+    "description": "The ARIA label to toggle the collapsible sidebar category"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "One doc tagged|{count} docs tagged",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} with \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "これはリリース前の{siteTitle} {versionLabel}のドキュメントです。",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "これは{siteTitle} {versionLabel}のドキュメントで現在はアクティブにメンテナンスされていません。",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "最新のドキュメントは{latestVersionLink} ({versionLabel}) を見てください。",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "最新バージョン",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "このページを編集",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "見出しへの直接リンク",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": "{date}に",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": "{user}が",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "{atDate}{byUser}最終更新",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Back to main menu",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Versions",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "メインコンテンツまでスキップ",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "タグ:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "On this page",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "タグ",
+    "description": "The title of the tag list page"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current.json b/website/i18n/ja/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 000000000..259c1caf1
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,82 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts.link.generated-index.title": {
+    "message": "Yew concepts",
+    "description": "The generated-index page title for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts.link.generated-index.description": {
+    "message": "Learn about the important Yew concepts!",
+    "description": "The generated-index page description for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen.link.generated-index.title": {
+    "message": "wasm-bindgen",
+    "description": "The generated-index page title for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen.link.generated-index.description": {
+    "message": "Learn about wasm-bindgen",
+    "description": "The generated-index page description for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics.link.generated-index.title": {
+    "message": "Advanced topics",
+    "description": "The generated-index page title for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics.link.generated-index.description": {
+    "message": "Learn about the advanced topics and inner workings of Yew!",
+    "description": "The generated-index page description for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More.link.generated-index.title": {
+    "message": "Miscellaneous",
+    "description": "The generated-index page title for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0.json b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0.json
new file mode 100644
index 000000000..76ef8c1a8
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.18.0.json
@@ -0,0 +1,42 @@
+{
+  "version.label": {
+    "message": "0.18.0",
+    "description": "The label for version 0.18.0"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Project Setup": {
+    "message": "Project Setup",
+    "description": "The label for category Project Setup in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Services": {
+    "message": "Services",
+    "description": "The label for category Services in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/version-0.19.0.json b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.19.0.json
new file mode 100644
index 000000000..755f3ae10
--- /dev/null
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/version-0.19.0.json
@@ -0,0 +1,58 @@
+{
+  "version.label": {
+    "message": "0.19.0",
+    "description": "The label for version 0.19.0"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Project Setup": {
+    "message": "Project Setup",
+    "description": "The label for category Project Setup in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/ja/docusaurus-theme-classic/footer.json b/website/i18n/ja/docusaurus-theme-classic/footer.json
new file mode 100644
index 000000000..fe88dc57b
--- /dev/null
+++ b/website/i18n/ja/docusaurus-theme-classic/footer.json
@@ -0,0 +1,38 @@
+{
+  "link.title.Support": {
+    "message": "Support",
+    "description": "The title of the footer links column with title=Support in the footer"
+  },
+  "link.title.Participate": {
+    "message": "Participate",
+    "description": "The title of the footer links column with title=Participate in the footer"
+  },
+  "link.title.More": {
+    "message": "More",
+    "description": "The title of the footer links column with title=More in the footer"
+  },
+  "link.item.label.Fund Issues": {
+    "message": "Fund Issues",
+    "description": "The label of footer link with label=Fund Issues linking to https://issuehunt.io/r/yewstack/yew"
+  },
+  "link.item.label.Sponsor Project": {
+    "message": "Sponsor Project",
+    "description": "The label of footer link with label=Sponsor Project linking to https://opencollective.com/yew"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/yewstack/yew"
+  },
+  "link.item.label.Discord": {
+    "message": "Discord",
+    "description": "The label of footer link with label=Discord linking to https://discord.gg/VQck8X4"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/yewstack"
+  },
+  "link.item.label.Yew Awesome": {
+    "message": "Yew Awesome",
+    "description": "The label of footer link with label=Yew Awesome linking to https://github.com/jetli/awesome-yew"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/ja/docusaurus-theme-classic/navbar.json b/website/i18n/ja/docusaurus-theme-classic/navbar.json
new file mode 100644
index 000000000..e2f600ffa
--- /dev/null
+++ b/website/i18n/ja/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "message": "Yew",
+    "description": "The title in the navbar"
+  },
+  "item.label.Docs": {
+    "message": "Docs",
+    "description": "Navbar item with label Docs"
+  },
+  "item.label.API": {
+    "message": "API",
+    "description": "Navbar item with label API"
+  },
+  "item.label.GitHub": {
+    "message": "GitHub",
+    "description": "Navbar item with label GitHub"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-CN/code.json b/website/i18n/zh-CN/code.json
new file mode 100644
index 000000000..c4e34f318
--- /dev/null
+++ b/website/i18n/zh-CN/code.json
@@ -0,0 +1,198 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "This page crashed.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Try again",
+    "description": "The label of the button to try again when the page crashed"
+  },
+  "theme.NotFound.title": {
+    "message": "页面找不到啦",
+    "description": "The title of the 404 page"
+  },
+  "theme.NotFound.p1": {
+    "message": "We could not find what you were looking for.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "Close",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Scroll back to top",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Archive",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Archive",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "Blog list page navigation",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "Newer Entries",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "Older Entries",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "One min read|{readingTime} min read",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.post.readMore": {
+    "message": "Read More",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "Blog post page navigation",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "Newer Post",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "Older Post",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Blog recent posts navigation",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.blog.post.plurals": {
+    "message": "One post|{count} posts",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} tagged with \"{tagName}\"",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "View All Tags",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "Copy code to clipboard",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "Copied",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "Copy",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "Expand sidebar",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "Expand sidebar",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "Docs pages navigation",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.next": {
+    "message": "Next",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "Previous",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "Collapse sidebar",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "Collapse sidebar",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": {
+    "message": "Toggle the collapsible sidebar category '{label}'",
+    "description": "The ARIA label to toggle the collapsible sidebar category"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "One doc tagged|{count} docs tagged",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} with \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "This is unreleased documentation for {siteTitle} {versionLabel} version.",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "latest version",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "Edit this page",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "Direct link to heading",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " on {date}",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " by {user}",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "Last updated{atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Back to main menu",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Versions",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "Skip to main content",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "Tags:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "On this page",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "Tags",
+    "description": "The title of the tag list page"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/current.json b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 000000000..259c1caf1
--- /dev/null
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,82 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts.link.generated-index.title": {
+    "message": "Yew concepts",
+    "description": "The generated-index page title for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts.link.generated-index.description": {
+    "message": "Learn about the important Yew concepts!",
+    "description": "The generated-index page description for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen.link.generated-index.title": {
+    "message": "wasm-bindgen",
+    "description": "The generated-index page title for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen.link.generated-index.description": {
+    "message": "Learn about wasm-bindgen",
+    "description": "The generated-index page description for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics.link.generated-index.title": {
+    "message": "Advanced topics",
+    "description": "The generated-index page title for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics.link.generated-index.description": {
+    "message": "Learn about the advanced topics and inner workings of Yew!",
+    "description": "The generated-index page description for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More.link.generated-index.title": {
+    "message": "Miscellaneous",
+    "description": "The generated-index page title for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.18.0.json b/website/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.18.0.json
new file mode 100644
index 000000000..76ef8c1a8
--- /dev/null
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.18.0.json
@@ -0,0 +1,42 @@
+{
+  "version.label": {
+    "message": "0.18.0",
+    "description": "The label for version 0.18.0"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Project Setup": {
+    "message": "Project Setup",
+    "description": "The label for category Project Setup in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Services": {
+    "message": "Services",
+    "description": "The label for category Services in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.19.0.json b/website/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.19.0.json
new file mode 100644
index 000000000..755f3ae10
--- /dev/null
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/version-0.19.0.json
@@ -0,0 +1,58 @@
+{
+  "version.label": {
+    "message": "0.19.0",
+    "description": "The label for version 0.19.0"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Project Setup": {
+    "message": "Project Setup",
+    "description": "The label for category Project Setup in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-CN/docusaurus-theme-classic/footer.json b/website/i18n/zh-CN/docusaurus-theme-classic/footer.json
new file mode 100644
index 000000000..fe88dc57b
--- /dev/null
+++ b/website/i18n/zh-CN/docusaurus-theme-classic/footer.json
@@ -0,0 +1,38 @@
+{
+  "link.title.Support": {
+    "message": "Support",
+    "description": "The title of the footer links column with title=Support in the footer"
+  },
+  "link.title.Participate": {
+    "message": "Participate",
+    "description": "The title of the footer links column with title=Participate in the footer"
+  },
+  "link.title.More": {
+    "message": "More",
+    "description": "The title of the footer links column with title=More in the footer"
+  },
+  "link.item.label.Fund Issues": {
+    "message": "Fund Issues",
+    "description": "The label of footer link with label=Fund Issues linking to https://issuehunt.io/r/yewstack/yew"
+  },
+  "link.item.label.Sponsor Project": {
+    "message": "Sponsor Project",
+    "description": "The label of footer link with label=Sponsor Project linking to https://opencollective.com/yew"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/yewstack/yew"
+  },
+  "link.item.label.Discord": {
+    "message": "Discord",
+    "description": "The label of footer link with label=Discord linking to https://discord.gg/VQck8X4"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/yewstack"
+  },
+  "link.item.label.Yew Awesome": {
+    "message": "Yew Awesome",
+    "description": "The label of footer link with label=Yew Awesome linking to https://github.com/jetli/awesome-yew"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-CN/docusaurus-theme-classic/navbar.json b/website/i18n/zh-CN/docusaurus-theme-classic/navbar.json
new file mode 100644
index 000000000..e2f600ffa
--- /dev/null
+++ b/website/i18n/zh-CN/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "message": "Yew",
+    "description": "The title in the navbar"
+  },
+  "item.label.Docs": {
+    "message": "Docs",
+    "description": "Navbar item with label Docs"
+  },
+  "item.label.API": {
+    "message": "API",
+    "description": "Navbar item with label API"
+  },
+  "item.label.GitHub": {
+    "message": "GitHub",
+    "description": "Navbar item with label GitHub"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-TW/code.json b/website/i18n/zh-TW/code.json
new file mode 100644
index 000000000..5200609e7
--- /dev/null
+++ b/website/i18n/zh-TW/code.json
@@ -0,0 +1,198 @@
+{
+  "theme.ErrorPageContent.title": {
+    "message": "This page crashed.",
+    "description": "The title of the fallback page when the page crashed"
+  },
+  "theme.ErrorPageContent.tryAgain": {
+    "message": "Try again",
+    "description": "The label of the button to try again when the page crashed"
+  },
+  "theme.NotFound.title": {
+    "message": "Page Not Found",
+    "description": "The title of the 404 page"
+  },
+  "theme.NotFound.p1": {
+    "message": "We could not find what you were looking for.",
+    "description": "The first paragraph of the 404 page"
+  },
+  "theme.NotFound.p2": {
+    "message": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
+    "description": "The 2nd paragraph of the 404 page"
+  },
+  "theme.AnnouncementBar.closeButtonAriaLabel": {
+    "message": "Close",
+    "description": "The ARIA label for close button of announcement bar"
+  },
+  "theme.BackToTopButton.buttonAriaLabel": {
+    "message": "Scroll back to top",
+    "description": "The ARIA label for the back to top button"
+  },
+  "theme.blog.archive.title": {
+    "message": "Archive",
+    "description": "The page & hero title of the blog archive page"
+  },
+  "theme.blog.archive.description": {
+    "message": "Archive",
+    "description": "The page & hero description of the blog archive page"
+  },
+  "theme.blog.paginator.navAriaLabel": {
+    "message": "Blog list page navigation",
+    "description": "The ARIA label for the blog pagination"
+  },
+  "theme.blog.paginator.newerEntries": {
+    "message": "Newer Entries",
+    "description": "The label used to navigate to the newer blog posts page (previous page)"
+  },
+  "theme.blog.paginator.olderEntries": {
+    "message": "Older Entries",
+    "description": "The label used to navigate to the older blog posts page (next page)"
+  },
+  "theme.blog.post.readingTime.plurals": {
+    "message": "One min read|{readingTime} min read",
+    "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.post.readMore": {
+    "message": "Read More",
+    "description": "The label used in blog post item excerpts to link to full blog posts"
+  },
+  "theme.blog.post.paginator.navAriaLabel": {
+    "message": "Blog post page navigation",
+    "description": "The ARIA label for the blog posts pagination"
+  },
+  "theme.blog.post.paginator.newerPost": {
+    "message": "Newer Post",
+    "description": "The blog post button label to navigate to the newer/previous post"
+  },
+  "theme.blog.post.paginator.olderPost": {
+    "message": "Older Post",
+    "description": "The blog post button label to navigate to the older/next post"
+  },
+  "theme.blog.sidebar.navAriaLabel": {
+    "message": "Blog recent posts navigation",
+    "description": "The ARIA label for recent posts in the blog sidebar"
+  },
+  "theme.blog.post.plurals": {
+    "message": "One post|{count} posts",
+    "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.blog.tagTitle": {
+    "message": "{nPosts} tagged with \"{tagName}\"",
+    "description": "The title of the page for a blog tag"
+  },
+  "theme.tags.tagsPageLink": {
+    "message": "View All Tags",
+    "description": "The label of the link targeting the tag list page"
+  },
+  "theme.CodeBlock.copyButtonAriaLabel": {
+    "message": "Copy code to clipboard",
+    "description": "The ARIA label for copy code blocks button"
+  },
+  "theme.CodeBlock.copied": {
+    "message": "Copied",
+    "description": "The copied button label on code blocks"
+  },
+  "theme.CodeBlock.copy": {
+    "message": "Copy",
+    "description": "The copy button label on code blocks"
+  },
+  "theme.docs.sidebar.expandButtonTitle": {
+    "message": "Expand sidebar",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.sidebar.expandButtonAriaLabel": {
+    "message": "Expand sidebar",
+    "description": "The ARIA label and title attribute for expand button of doc sidebar"
+  },
+  "theme.docs.paginator.navAriaLabel": {
+    "message": "Docs pages navigation",
+    "description": "The ARIA label for the docs pagination"
+  },
+  "theme.docs.paginator.next": {
+    "message": "Next",
+    "description": "The label used to navigate to the next doc"
+  },
+  "theme.docs.paginator.previous": {
+    "message": "Previous",
+    "description": "The label used to navigate to the previous doc"
+  },
+  "theme.docs.sidebar.collapseButtonTitle": {
+    "message": "Collapse sidebar",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.docs.sidebar.collapseButtonAriaLabel": {
+    "message": "Collapse sidebar",
+    "description": "The title attribute for collapse button of doc sidebar"
+  },
+  "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": {
+    "message": "Toggle the collapsible sidebar category '{label}'",
+    "description": "The ARIA label to toggle the collapsible sidebar category"
+  },
+  "theme.docs.tagDocListPageTitle.nDocsTagged": {
+    "message": "One doc tagged|{count} docs tagged",
+    "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+  },
+  "theme.docs.tagDocListPageTitle": {
+    "message": "{nDocsTagged} with \"{tagName}\"",
+    "description": "The title of the page for a docs tag"
+  },
+  "theme.docs.versions.unreleasedVersionLabel": {
+    "message": "This is unreleased documentation for {siteTitle} {versionLabel} version.",
+    "description": "The label used to tell the user that he's browsing an unreleased doc version"
+  },
+  "theme.docs.versions.unmaintainedVersionLabel": {
+    "message": "This is documentation for {siteTitle} {versionLabel}, which is no longer actively maintained.",
+    "description": "The label used to tell the user that he's browsing an unmaintained doc version"
+  },
+  "theme.docs.versions.latestVersionSuggestionLabel": {
+    "message": "For up-to-date documentation, see the {latestVersionLink} ({versionLabel}).",
+    "description": "The label used to tell the user to check the latest version"
+  },
+  "theme.docs.versions.latestVersionLinkLabel": {
+    "message": "latest version",
+    "description": "The label used for the latest version suggestion link label"
+  },
+  "theme.common.editThisPage": {
+    "message": "Edit this page",
+    "description": "The link label to edit the current page"
+  },
+  "theme.common.headingLinkTitle": {
+    "message": "Direct link to heading",
+    "description": "Title for link to heading"
+  },
+  "theme.lastUpdated.atDate": {
+    "message": " on {date}",
+    "description": "The words used to describe on which date a page has been last updated"
+  },
+  "theme.lastUpdated.byUser": {
+    "message": " by {user}",
+    "description": "The words used to describe by who the page has been last updated"
+  },
+  "theme.lastUpdated.lastUpdatedAtBy": {
+    "message": "Last updated{atDate}{byUser}",
+    "description": "The sentence used to display when a page has been last updated, and by who"
+  },
+  "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
+    "message": "← Back to main menu",
+    "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+  },
+  "theme.navbar.mobileVersionsDropdown.label": {
+    "message": "Versions",
+    "description": "The label for the navbar versions dropdown on mobile view"
+  },
+  "theme.common.skipToMainContent": {
+    "message": "Skip to main content",
+    "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
+  },
+  "theme.tags.tagsListLabel": {
+    "message": "Tags:",
+    "description": "The label alongside a tag list"
+  },
+  "theme.TOCCollapsible.toggleButtonLabel": {
+    "message": "On this page",
+    "description": "The label used by the button on the collapsible TOC component"
+  },
+  "theme.tags.tagsPageTitle": {
+    "message": "Tags",
+    "description": "The title of the tag list page"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-docs/current.json b/website/i18n/zh-TW/docusaurus-plugin-content-docs/current.json
new file mode 100644
index 000000000..259c1caf1
--- /dev/null
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-docs/current.json
@@ -0,0 +1,82 @@
+{
+  "version.label": {
+    "message": "Next",
+    "description": "The label for version current"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts.link.generated-index.title": {
+    "message": "Yew concepts",
+    "description": "The generated-index page title for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts.link.generated-index.description": {
+    "message": "Learn about the important Yew concepts!",
+    "description": "The generated-index page description for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen.link.generated-index.title": {
+    "message": "wasm-bindgen",
+    "description": "The generated-index page title for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen.link.generated-index.description": {
+    "message": "Learn about wasm-bindgen",
+    "description": "The generated-index page description for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics.link.generated-index.title": {
+    "message": "Advanced topics",
+    "description": "The generated-index page title for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics.link.generated-index.description": {
+    "message": "Learn about the advanced topics and inner workings of Yew!",
+    "description": "The generated-index page description for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More.link.generated-index.title": {
+    "message": "Miscellaneous",
+    "description": "The generated-index page title for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-docs/version-0.18.0.json b/website/i18n/zh-TW/docusaurus-plugin-content-docs/version-0.18.0.json
new file mode 100644
index 000000000..76ef8c1a8
--- /dev/null
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-docs/version-0.18.0.json
@@ -0,0 +1,42 @@
+{
+  "version.label": {
+    "message": "0.18.0",
+    "description": "The label for version 0.18.0"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Project Setup": {
+    "message": "Project Setup",
+    "description": "The label for category Project Setup in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Services": {
+    "message": "Services",
+    "description": "The label for category Services in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-TW/docusaurus-plugin-content-docs/version-0.19.0.json b/website/i18n/zh-TW/docusaurus-plugin-content-docs/version-0.19.0.json
new file mode 100644
index 000000000..755f3ae10
--- /dev/null
+++ b/website/i18n/zh-TW/docusaurus-plugin-content-docs/version-0.19.0.json
@@ -0,0 +1,58 @@
+{
+  "version.label": {
+    "message": "0.19.0",
+    "description": "The label for version 0.19.0"
+  },
+  "sidebar.sidebar.category.Getting Started": {
+    "message": "Getting Started",
+    "description": "The label for category Getting Started in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Project Setup": {
+    "message": "Project Setup",
+    "description": "The label for category Project Setup in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Concepts": {
+    "message": "Concepts",
+    "description": "The label for category Concepts in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.wasm-bindgen": {
+    "message": "wasm-bindgen",
+    "description": "The label for category wasm-bindgen in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Components": {
+    "message": "Components",
+    "description": "The label for category Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.HTML": {
+    "message": "HTML",
+    "description": "The label for category HTML in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Function Components": {
+    "message": "Function Components",
+    "description": "The label for category Function Components in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Advanced topics": {
+    "message": "Advanced topics",
+    "description": "The label for category Advanced topics in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.More": {
+    "message": "More",
+    "description": "The label for category More in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.Migration guides": {
+    "message": "Migration guides",
+    "description": "The label for category Migration guides in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew": {
+    "message": "yew",
+    "description": "The label for category yew in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-agent": {
+    "message": "yew-agent",
+    "description": "The label for category yew-agent in sidebar sidebar"
+  },
+  "sidebar.sidebar.category.yew-router": {
+    "message": "yew-router",
+    "description": "The label for category yew-router in sidebar sidebar"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-TW/docusaurus-theme-classic/footer.json b/website/i18n/zh-TW/docusaurus-theme-classic/footer.json
new file mode 100644
index 000000000..fe88dc57b
--- /dev/null
+++ b/website/i18n/zh-TW/docusaurus-theme-classic/footer.json
@@ -0,0 +1,38 @@
+{
+  "link.title.Support": {
+    "message": "Support",
+    "description": "The title of the footer links column with title=Support in the footer"
+  },
+  "link.title.Participate": {
+    "message": "Participate",
+    "description": "The title of the footer links column with title=Participate in the footer"
+  },
+  "link.title.More": {
+    "message": "More",
+    "description": "The title of the footer links column with title=More in the footer"
+  },
+  "link.item.label.Fund Issues": {
+    "message": "Fund Issues",
+    "description": "The label of footer link with label=Fund Issues linking to https://issuehunt.io/r/yewstack/yew"
+  },
+  "link.item.label.Sponsor Project": {
+    "message": "Sponsor Project",
+    "description": "The label of footer link with label=Sponsor Project linking to https://opencollective.com/yew"
+  },
+  "link.item.label.GitHub": {
+    "message": "GitHub",
+    "description": "The label of footer link with label=GitHub linking to https://github.com/yewstack/yew"
+  },
+  "link.item.label.Discord": {
+    "message": "Discord",
+    "description": "The label of footer link with label=Discord linking to https://discord.gg/VQck8X4"
+  },
+  "link.item.label.Twitter": {
+    "message": "Twitter",
+    "description": "The label of footer link with label=Twitter linking to https://twitter.com/yewstack"
+  },
+  "link.item.label.Yew Awesome": {
+    "message": "Yew Awesome",
+    "description": "The label of footer link with label=Yew Awesome linking to https://github.com/jetli/awesome-yew"
+  }
+}
\ No newline at end of file
diff --git a/website/i18n/zh-TW/docusaurus-theme-classic/navbar.json b/website/i18n/zh-TW/docusaurus-theme-classic/navbar.json
new file mode 100644
index 000000000..e2f600ffa
--- /dev/null
+++ b/website/i18n/zh-TW/docusaurus-theme-classic/navbar.json
@@ -0,0 +1,18 @@
+{
+  "title": {
+    "message": "Yew",
+    "description": "The title in the navbar"
+  },
+  "item.label.Docs": {
+    "message": "Docs",
+    "description": "Navbar item with label Docs"
+  },
+  "item.label.API": {
+    "message": "API",
+    "description": "Navbar item with label API"
+  },
+  "item.label.GitHub": {
+    "message": "GitHub",
+    "description": "Navbar item with label GitHub"
+  }
+}
\ No newline at end of file
diff --git a/website/mdx-jetbrains.jpg b/website/mdx-jetbrains.jpg
new file mode 100644
index 000000000..7b5cc00c6
Binary files /dev/null and b/website/mdx-jetbrains.jpg differ
diff --git a/website/package-lock.json b/website/package-lock.json
index f9d774cfe..fd937ed1f 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -29,6 +29,7 @@
         "@types/react": "^17.0.8",
         "@types/react-helmet": "^6.1.1",
         "@types/react-router-dom": "^5.1.7",
+        "dir-compare": "^4.0.0",
         "typescript": "^4.3.2"
       }
     },
@@ -5772,6 +5773,31 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "node_modules/dir-compare": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.0.0.tgz",
+      "integrity": "sha512-wC7thVKL3V656tO61rbEDE4LTeeYrUC2pAUL00AaXYghBhjjVNRyBlpH6POzb44ZuK23OSrqF6TbSC/QYeqfAg==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^3.0.4",
+        "p-limit": "^3.1.0 "
+      }
+    },
+    "node_modules/dir-compare/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -17368,6 +17394,27 @@
         }
       }
     },
+    "dir-compare": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-4.0.0.tgz",
+      "integrity": "sha512-wC7thVKL3V656tO61rbEDE4LTeeYrUC2pAUL00AaXYghBhjjVNRyBlpH6POzb44ZuK23OSrqF6TbSC/QYeqfAg==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4",
+        "p-limit": "^3.1.0 "
+      },
+      "dependencies": {
+        "p-limit": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+          "dev": true,
+          "requires": {
+            "yocto-queue": "^0.1.0"
+          }
+        }
+      }
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
diff --git a/website/package.json b/website/package.json
index 7c3aa8af5..0a896ab10 100644
--- a/website/package.json
+++ b/website/package.json
@@ -10,7 +10,8 @@
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
+    "check-translations": "node ./check-translations.js",
+    "write-translations": "node ./write-translations.js",
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
@@ -47,6 +48,7 @@
     "@types/react": "^17.0.8",
     "@types/react-helmet": "^6.1.1",
     "@types/react-router-dom": "^5.1.7",
-    "typescript": "^4.3.2"
+    "typescript": "^4.3.2",
+    "dir-compare": "^4.0.0"
   }
 }
diff --git a/website/write-translations.js b/website/write-translations.js
new file mode 100644
index 000000000..eba8112ab
--- /dev/null
+++ b/website/write-translations.js
@@ -0,0 +1,32 @@
+const {i18n: {locales}} = require('./docusaurus.config.js');
+const util = require('util');
+const exec = util.promisify(require('child_process').exec);
+
+/**
+ * @param {string} locale
+ */
+async function writeTranslation(locale) {
+    // exec rejects when the subprocess exits with non-zero code
+    const {stdout, stderr} = await exec(`npm run docusaurus -- write-translations --locale ${locale}`)
+    console.log(stdout)
+    console.error(stderr)
+}
+
+
+async function writeTranslations() {
+    for (const locale of locales
+        .filter(locale => locale !== 'en')) {
+        await writeTranslation(locale);
+    }
+}
+
+module.exports = writeTranslations
+
+if (require.main === module) {
+    writeTranslations()
+        .catch(e => console.error(e))
+}
+
+
+
+