diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4debff1..4f1cedf5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,10 @@
 - [#842](https://github.com/estruyf/vscode-front-matter/issues/842): Allow to set the `frontMatter.taxonomy.slugTemplate` setting to an empty string
 - [#845](https://github.com/estruyf/vscode-front-matter/issues/845): Fix empty values for number fields
 
+### 🚧 Work in progress
+
+- [#837](https://github.com/estruyf/vscode-front-matter/issues/837): Replacing the VSCode Webview UI Toolkit with [vscrui](https://github.com/estruyf/vscrui) due to the deprecation of the VSCode Webview UI Toolkit library
+
 ## [10.3.0] - 2024-08-13 - [Release notes](https://beta.frontmatter.codes/updates/v10.3.0)
 
 ### ✨ New features
diff --git a/package-lock.json b/package-lock.json
index bf7cf073..3f22f67b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,7 +98,7 @@
         "uniforms-bridge-json-schema": "^3.10.2",
         "uniforms-unstyled": "^3.10.2",
         "url-join-ts": "^1.0.5",
-        "vscrui": "^0.1.0-beta.1084843",
+        "vscrui": "^0.1.0-beta.1088540",
         "wc-react": "github:estruyf/wc-react",
         "webpack": "^5.75.0",
         "webpack-bundle-analyzer": "^4.7.0",
@@ -12447,9 +12447,9 @@
       }
     },
     "node_modules/vscrui": {
-      "version": "0.1.0-beta.1084843",
-      "resolved": "https://registry.npmjs.org/vscrui/-/vscrui-0.1.0-beta.1084843.tgz",
-      "integrity": "sha512-a56jsuyVy15pG/INaNPwLjoBFtCVbks3FuhtlX+CIwtzb5m2FjWqiiaF2Qe6YI8dxB5HbIg1nQ32whYnrczKtw==",
+      "version": "0.1.0-beta.1088540",
+      "resolved": "https://registry.npmjs.org/vscrui/-/vscrui-0.1.0-beta.1088540.tgz",
+      "integrity": "sha512-tdy0E1Cuj6YapZDhV8H2WRRHMFFIe4I5dkEEt+Nttc/KFbCoEQnCEInDw1LG9tKT02wnzp8qXm3Jdacq62CHgQ==",
       "dev": true,
       "funding": {
         "type": "github",
diff --git a/package.json b/package.json
index 74f9c3c9..ed521441 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
     "color": "#0e131f",
     "theme": "dark"
   },
-  "badges": [{
+  "badges": [
+    {
       "description": "version",
       "url": "https://img.shields.io/github/package-json/v/estruyf/vscode-front-matter?color=green&label=vscode-front-matter&style=flat-square",
       "href": "https://github.com/estruyf/vscode-front-matter"
@@ -70,7 +71,8 @@
         "**/.frontmatter/config/*.json": "jsonc"
       }
     },
-    "keybindings": [{
+    "keybindings": [
+      {
         "command": "frontMatter.dashboard",
         "key": "alt+d"
       },
@@ -94,19 +96,23 @@
       }
     ],
     "viewsContainers": {
-      "activitybar": [{
-        "id": "frontmatter-explorer",
-        "title": "FM",
-        "icon": "$(fm-logo)"
-      }]
+      "activitybar": [
+        {
+          "id": "frontmatter-explorer",
+          "title": "FM",
+          "icon": "$(fm-logo)"
+        }
+      ]
     },
     "views": {
-      "frontmatter-explorer": [{
-        "id": "frontMatter.explorer",
-        "name": "Front Matter",
-        "icon": "$(fm-logo)",
-        "type": "webview"
-      }]
+      "frontmatter-explorer": [
+        {
+          "id": "frontMatter.explorer",
+          "name": "Front Matter",
+          "icon": "$(fm-logo)",
+          "type": "webview"
+        }
+      ]
     },
     "configuration": {
       "title": "%settings.configuration.title%",
@@ -174,7 +180,8 @@
         "frontMatter.content.defaultFileType": {
           "type": "string",
           "default": "md",
-          "oneOf": [{
+          "oneOf": [
+            {
               "enum": [
                 "md",
                 "mdx"
@@ -190,7 +197,8 @@
         "frontMatter.content.defaultSorting": {
           "type": "string",
           "default": "",
-          "oneOf": [{
+          "oneOf": [
+            {
               "enum": [
                 "LastModifiedAsc",
                 "LastModifiedDesc",
@@ -542,7 +550,8 @@
             "categories"
           ],
           "markdownDescription": "%setting.frontMatter.content.filters.markdownDescription%",
-          "items": [{
+          "items": [
+            {
               "type": "string",
               "enum": [
                 "contentFolders",
@@ -616,7 +625,8 @@
               "command": {
                 "$id": "#scriptCommand",
                 "type": "string",
-                "anyOf": [{
+                "anyOf": [
+                  {
                     "enum": [
                       "node",
                       "bash",
@@ -812,7 +822,8 @@
               "title",
               "file"
             ],
-            "anyOf": [{
+            "anyOf": [
+              {
                 "required": [
                   "schema"
                 ]
@@ -880,7 +891,8 @@
               "id",
               "path"
             ],
-            "anyOf": [{
+            "anyOf": [
+              {
                 "required": [
                   "schema"
                 ]
@@ -1121,26 +1133,29 @@
               }
             }
           },
-          "default": [{
-            "name": "default",
-            "fileTypes": null,
-            "fields": [{
-                "title": "Title",
-                "name": "title",
-                "type": "string"
-              },
-              {
-                "title": "Caption",
-                "name": "caption",
-                "type": "string"
-              },
-              {
-                "title": "Alt text",
-                "name": "alt",
-                "type": "string"
-              }
-            ]
-          }],
+          "default": [
+            {
+              "name": "default",
+              "fileTypes": null,
+              "fields": [
+                {
+                  "title": "Title",
+                  "name": "title",
+                  "type": "string"
+                },
+                {
+                  "title": "Caption",
+                  "name": "caption",
+                  "type": "string"
+                },
+                {
+                  "title": "Alt text",
+                  "name": "alt",
+                  "type": "string"
+                }
+              ]
+            }
+          ],
           "scope": "Media"
         },
         "frontMatter.media.supportedMimeTypes": {
@@ -1243,7 +1258,8 @@
               "fileType": {
                 "type": "string",
                 "default": "",
-                "oneOf": [{
+                "oneOf": [
+                  {
                     "enum": [
                       "md",
                       "mdx"
@@ -1382,7 +1398,8 @@
                       "default": "",
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description%",
                       "not": {
-                        "anyOf": [{
+                        "anyOf": [
+                          {
                             "const": ""
                           },
                           {
@@ -1583,7 +1600,8 @@
                     "type",
                     "name"
                   ],
-                  "allOf": [{
+                  "allOf": [
+                    {
                       "if": {
                         "properties": {
                           "type": {
@@ -1795,48 +1813,51 @@
               "fields"
             ]
           },
-          "default": [{
-            "name": "default",
-            "pageBundle": false,
-            "fields": [{
-                "title": "Title",
-                "name": "title",
-                "type": "string"
-              },
-              {
-                "title": "Description",
-                "name": "description",
-                "type": "string"
-              },
-              {
-                "title": "Publishing date",
-                "name": "date",
-                "type": "datetime",
-                "default": "{{now}}",
-                "isPublishDate": true
-              },
-              {
-                "title": "Content preview",
-                "name": "preview",
-                "type": "image"
-              },
-              {
-                "title": "Is in draft",
-                "name": "draft",
-                "type": "boolean"
-              },
-              {
-                "title": "Tags",
-                "name": "tags",
-                "type": "tags"
-              },
-              {
-                "title": "Categories",
-                "name": "categories",
-                "type": "categories"
-              }
-            ]
-          }],
+          "default": [
+            {
+              "name": "default",
+              "pageBundle": false,
+              "fields": [
+                {
+                  "title": "Title",
+                  "name": "title",
+                  "type": "string"
+                },
+                {
+                  "title": "Description",
+                  "name": "description",
+                  "type": "string"
+                },
+                {
+                  "title": "Publishing date",
+                  "name": "date",
+                  "type": "datetime",
+                  "default": "{{now}}",
+                  "isPublishDate": true
+                },
+                {
+                  "title": "Content preview",
+                  "name": "preview",
+                  "type": "image"
+                },
+                {
+                  "title": "Is in draft",
+                  "name": "draft",
+                  "type": "boolean"
+                },
+                {
+                  "title": "Tags",
+                  "name": "tags",
+                  "type": "tags"
+                },
+                {
+                  "title": "Categories",
+                  "name": "categories",
+                  "type": "categories"
+                }
+              ]
+            }
+          ],
           "scope": "Taxonomy"
         },
         "frontMatter.taxonomy.customTaxonomy": {
@@ -1849,7 +1870,8 @@
                 "type": "string",
                 "description": "%setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description%",
                 "not": {
-                  "anyOf": [{
+                  "anyOf": [
+                    {
                       "const": ""
                     },
                     {
@@ -2048,7 +2070,8 @@
         }
       }
     },
-    "commands": [{
+    "commands": [
+      {
         "command": "frontMatter.project.switch",
         "title": "%command.frontMatter.project.switch%",
         "category": "Front Matter",
@@ -2380,16 +2403,21 @@
         }
       }
     ],
-    "submenus": [{
-      "id": "frontmatter.submenu",
-      "label": "Front Matter"
-    }],
+    "submenus": [
+      {
+        "id": "frontmatter.submenu",
+        "label": "Front Matter"
+      }
+    ],
     "menus": {
-      "webview/context": [{
-        "command": "workbench.action.webview.openDeveloperTools",
-        "when": "frontMatter:isDevelopment"
-      }],
-      "editor/title": [{
+      "webview/context": [
+        {
+          "command": "workbench.action.webview.openDeveloperTools",
+          "when": "frontMatter:isDevelopment"
+        }
+      ],
+      "editor/title": [
+        {
           "command": "frontMatter.markup.heading",
           "group": "navigation@-133",
           "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
@@ -2475,11 +2503,14 @@
           "when": "resourceFilename == 'frontmatter.json'"
         }
       ],
-      "explorer/context": [{
-        "submenu": "frontmatter.submenu",
-        "group": "frontmatter@1"
-      }],
-      "frontmatter.submenu": [{
+      "explorer/context": [
+        {
+          "submenu": "frontmatter.submenu",
+          "group": "frontmatter@1"
+        }
+      ],
+      "frontmatter.submenu": [
+        {
           "command": "frontMatter.createFromTemplate",
           "when": "explorerResourceIsFolder",
           "group": "frontmatter@1"
@@ -2495,7 +2526,8 @@
           "group": "frontmatter@3"
         }
       ],
-      "commandPalette": [{
+      "commandPalette": [
+        {
           "command": "frontMatter.init",
           "when": "frontMatterCanInit"
         },
@@ -2672,7 +2704,8 @@
           "when": "frontMatter:file:isValid == true"
         }
       ],
-      "view/title": [{
+      "view/title": [
+        {
           "command": "frontMatter.docs",
           "group": "navigation@-1",
           "when": "view == frontMatter.explorer"
@@ -2709,13 +2742,16 @@
         }
       ]
     },
-    "languages": [{
-      "id": "frontmatter.project.output",
-      "mimetypes": [
-        "text/x-code-output"
-      ]
-    }],
-    "grammars": [{
+    "languages": [
+      {
+        "id": "frontmatter.project.output",
+        "mimetypes": [
+          "text/x-code-output"
+        ]
+      }
+    ],
+    "grammars": [
+      {
         "path": "./syntaxes/hugo.tmLanguage.json",
         "scopeName": "frontmatter.markdown.hugo",
         "injectTo": [
@@ -2728,45 +2764,48 @@
         "path": "./syntaxes/frontmatter-output.tmLanguage.json"
       }
     ],
-    "walkthroughs": [{
-      "id": "frontmatter.welcome",
-      "title": "Get started with Front Matter",
-      "description": "Discover the features of Front Matter and learn how to use the CMS for your SSG or static site.",
-      "steps": [{
-          "id": "frontmatter.welcome.init",
-          "title": "Get started",
-          "description": "Initial steps to get started.\n[Open dashboard](command:frontMatter.dashboard)",
-          "media": {
-            "markdown": "assets/walkthrough/get-started.md"
+    "walkthroughs": [
+      {
+        "id": "frontmatter.welcome",
+        "title": "Get started with Front Matter",
+        "description": "Discover the features of Front Matter and learn how to use the CMS for your SSG or static site.",
+        "steps": [
+          {
+            "id": "frontmatter.welcome.init",
+            "title": "Get started",
+            "description": "Initial steps to get started.\n[Open dashboard](command:frontMatter.dashboard)",
+            "media": {
+              "markdown": "assets/walkthrough/get-started.md"
+            },
+            "completionEvents": [
+              "onContext:frontMatterInitialized"
+            ]
           },
-          "completionEvents": [
-            "onContext:frontMatterInitialized"
-          ]
-        },
-        {
-          "id": "frontmatter.welcome.documentation",
-          "title": "Documentation",
-          "description": "Check out the documentation for Front Matter.\n[View our documentation](https://frontmatter.codes/docs)",
-          "media": {
-            "markdown": "assets/walkthrough/documentation.md"
+          {
+            "id": "frontmatter.welcome.documentation",
+            "title": "Documentation",
+            "description": "Check out the documentation for Front Matter.\n[View our documentation](https://frontmatter.codes/docs)",
+            "media": {
+              "markdown": "assets/walkthrough/documentation.md"
+            },
+            "completionEvents": [
+              "onLink:https://frontmatter.codes/docs"
+            ]
           },
-          "completionEvents": [
-            "onLink:https://frontmatter.codes/docs"
-          ]
-        },
-        {
-          "id": "frontmatter.welcome.supporter",
-          "title": "Support the project",
-          "description": "Become a supporter.\n[Support the project](https://github.com/sponsors/estruyf)",
-          "media": {
-            "markdown": "assets/walkthrough/support-the-project.md"
-          },
-          "completionEvents": [
-            "onLink:https://github.com/sponsors/estruyf"
-          ]
-        }
-      ]
-    }]
+          {
+            "id": "frontmatter.welcome.supporter",
+            "title": "Support the project",
+            "description": "Become a supporter.\n[Support the project](https://github.com/sponsors/estruyf)",
+            "media": {
+              "markdown": "assets/walkthrough/support-the-project.md"
+            },
+            "completionEvents": [
+              "onLink:https://github.com/sponsors/estruyf"
+            ]
+          }
+        ]
+      }
+    ]
   },
   "scripts": {
     "dev:ext": "npm run clean && npm run localization:generate && npm-run-all --parallel watch:*",
@@ -2880,7 +2919,7 @@
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
-    "vscrui": "^0.1.0-beta.1084843",
+    "vscrui": "^0.1.0-beta.1088540",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",
@@ -2893,4 +2932,4 @@
   "vsce": {
     "dependencies": false
   }
-}
\ No newline at end of file
+}
diff --git a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
index 187e4b49..8ce3a193 100644
--- a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Field, FieldGroup } from '../../../models';
-import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
+import { Dropdown as VSCodeDropdown, DropdownOption } from 'vscrui';
 
 export interface IDataBlockSelectorProps {
   field: Field;
@@ -31,8 +31,8 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
   }, []);
 
   const onGroupSelect = useCallback(
-    (event: any) => {
-      const group = event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value;
+    (selection: DropdownOption) => {
+      const group = selection.value === EMPTY_OPTION ? null : selection.value;
 
       if (group) {
         onGroupSet(group);
@@ -71,23 +71,17 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
 
   return (
     <div className="json_data__selector">
-      <h3>{LocalizationKey.panelDataBlockDataBlockSelectorLabel}</h3>
+      <h3>{localize(LocalizationKey.panelDataBlockDataBlockSelectorLabel)}</h3>
 
       <VSCodeDropdown
         value={selectedGroup ?? EMPTY_OPTION}
-        onChange={onGroupSelect}
-        style={{
-          width: '100%',
-          marginBottom: '1rem'
-        }}
-      >
-        <VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
-        {options.map((o) => (
-          <VSCodeOption key={o} value={o}>
-            {o}
-          </VSCodeOption>
-        ))}
-      </VSCodeDropdown>
+        onChange={(value) => onGroupSelect(value as DropdownOption)}
+        className='!block mb-4'
+        options={[
+          { value: EMPTY_OPTION, label: '\u00A0' },
+          ...options.map((o) => ({ value: o, label: o }))
+        ]}
+      />
     </div>
   );
 };
diff --git a/src/panelWebView/components/JsonField/JsonFieldSelector.tsx b/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
index 15eee277..50067247 100644
--- a/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
+++ b/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Field } from '../../../models';
 import { DataType } from '../../../models/DataType';
-import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
+import { Dropdown as VSCodeDropdown, DropdownOption } from 'vscrui';
 
 export interface IJsonFieldSelectorProps {
   field: Field;
@@ -23,6 +23,12 @@ export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps>
 }: React.PropsWithChildren<IJsonFieldSelectorProps>) => {
   const [options, setOptions] = useState<string[]>([]);
 
+  const onChange = (selection: DropdownOption) => {
+    onSetDataType(
+      selection.value === EMPTY_OPTION ? null : selection.value
+    );
+  };
+
   const onSchemaSet = useCallback((dataType: string) => {
     if (dataTypes && dataType !== EMPTY_OPTION) {
       const schema = dataTypes.find((dt) => dt.id === dataType);
@@ -63,23 +69,12 @@ export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps>
       <h3>Block type</h3>
       <VSCodeDropdown
         value={selectedDataType ?? EMPTY_OPTION}
-        onChange={(event: any) =>
-          onSetDataType(
-            event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value
-          )
-        }
-        style={{
-          width: '100%',
-          marginBottom: '1rem'
-        }}
-      >
-        <VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
-        {options.map((o) => (
-          <VSCodeOption key={o} value={o}>
-            {o}
-          </VSCodeOption>
-        ))}
-      </VSCodeDropdown>
+        onChange={(selection) => onChange(selection as DropdownOption)}
+        className='!block mb-4'
+        options={[
+          { value: EMPTY_OPTION, label: '\u00A0' },
+          ...options.map((o) => ({ value: o, label: o }))
+        ]} />
     </div>
   );
 };