diff --git a/.eslintrc.js b/.eslintrc.js
index 237a302d48e5..4e670b5f0358 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -396,7 +396,7 @@ module.exports = {
         'import/no-default-export': 'off',
         'react/jsx-no-target-blank': 'off',
         'react/no-unescaped-entities': 'off',
-        'react-hooks/exhaustive-deps': 'off', // TODO: enable it later
+        'react-hooks/exhaustive-deps': 'warn', // TODO: enable it later
       },
       settings: {
         react: {
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 8046463c1dce..0ce6400ded7d 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -51,7 +51,12 @@
 }
 
 .tabCode {
-  height: calc(100% - 32px);
+  height: calc(100% - 41px);
+}
+
+.hidden {
+  display: none;
+  visibility: hidden;
 }
 
 @media only screen and (max-width: 996px) {
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 12e393682b72..591bc5c9bf00 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -19,13 +19,7 @@ import Loader from './layout/Loader';
 import OptionsSelector from './OptionsSelector';
 import styles from './Playground.module.css';
 import ConditionalSplitPane from './SplitPane/ConditionalSplitPane';
-import type {
-  ConfigModel,
-  ErrorGroup,
-  RuleDetails,
-  SelectedRange,
-  TabType,
-} from './types';
+import type { ErrorGroup, RuleDetails, SelectedRange, TabType } from './types';
 
 function Playground(): JSX.Element {
   const [state, setState] = useHashState({
@@ -47,19 +41,10 @@ function Playground(): JSX.Element {
   const [selectedRange, setSelectedRange] = useState<SelectedRange>();
   const [position, setPosition] = useState<number>();
   const [activeTab, setTab] = useState<TabType>('code');
-  const [showModal, setShowModal] = useState<TabType | false>(false);
   const [esQueryFilter, setEsQueryFilter] = useState<ESQuery.Selector>();
   const [esQueryError, setEsQueryError] = useState<Error>();
-
-  const updateModal = useCallback(
-    (config?: Partial<ConfigModel>) => {
-      if (config) {
-        setState(config);
-      }
-      setShowModal(false);
-    },
-    [setState],
-  );
+  const [visualEslintRc, setVisualEslintRc] = useState(false);
+  const [visualTSConfig, setVisualTSConfig] = useState(false);
 
   const onLoaded = useCallback(
     (ruleNames: RuleDetails[], tsVersions: readonly string[]): void => {
@@ -70,6 +55,22 @@ function Playground(): JSX.Element {
     [],
   );
 
+  const activeVisualEditor = !isLoading
+    ? visualEslintRc && activeTab === 'eslintrc'
+      ? 'eslintrc'
+      : visualTSConfig && activeTab === 'tsconfig'
+      ? 'tsconfig'
+      : undefined
+    : undefined;
+
+  const onVisualEditor = useCallback((tab: TabType): void => {
+    if (tab === 'tsconfig') {
+      setVisualTSConfig(val => !val);
+    } else if (tab === 'eslintrc') {
+      setVisualEslintRc(val => !val);
+    }
+  }, []);
+
   const astToShow =
     state.showAST === 'ts'
       ? tsAst
@@ -81,19 +82,6 @@ function Playground(): JSX.Element {
 
   return (
     <div className={styles.codeContainer}>
-      {ruleNames.length > 0 && (
-        <ConfigEslint
-          isOpen={showModal === 'eslintrc'}
-          ruleOptions={ruleNames}
-          config={state.eslintrc}
-          onClose={updateModal}
-        />
-      )}
-      <ConfigTypeScript
-        isOpen={showModal === 'tsconfig'}
-        config={state.tsconfig}
-        onClose={updateModal}
-      />
       <div className={styles.codeBlocks}>
         <ConditionalSplitPane
           split="vertical"
@@ -124,9 +112,30 @@ function Playground(): JSX.Element {
                 active={activeTab}
                 change={setTab}
                 showVisualEditor={activeTab !== 'code'}
-                showModal={(): void => setShowModal(activeTab)}
+                showModal={onVisualEditor}
               />
-              <div className={styles.tabCode}>
+              {(activeVisualEditor === 'eslintrc' && (
+                <ConfigEslint
+                  className={styles.tabCode}
+                  ruleOptions={ruleNames}
+                  config={state.eslintrc}
+                  onChange={setState}
+                />
+              )) ||
+                (activeVisualEditor === 'tsconfig' && (
+                  <ConfigTypeScript
+                    className={styles.tabCode}
+                    config={state.tsconfig}
+                    onChange={setState}
+                  />
+                ))}
+              <div
+                key="monacoEditor"
+                className={clsx(
+                  styles.tabCode,
+                  !!activeVisualEditor && styles.hidden,
+                )}
+              >
                 <EditorEmbed />
               </div>
               <LoadingEditor
diff --git a/packages/website/src/components/config/ConfigEditor.module.css b/packages/website/src/components/config/ConfigEditor.module.css
index 97cbee941c2a..940c7a825ee9 100644
--- a/packages/website/src/components/config/ConfigEditor.module.css
+++ b/packages/website/src/components/config/ConfigEditor.module.css
@@ -35,6 +35,7 @@
   background: var(--ifm-color-emphasis-100);
 }
 
+.searchResult:nth-child(even):hover,
 .searchResult:hover {
   background: var(--ifm-color-emphasis-200);
 }
@@ -57,6 +58,9 @@
   column-gap: 0.5rem;
   margin-bottom: 0.5rem;
   justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  left: 0;
 }
 
 .textarea {
diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
index 9e2f690533f8..1b2a78805a35 100644
--- a/packages/website/src/components/config/ConfigEditor.tsx
+++ b/packages/website/src/components/config/ConfigEditor.tsx
@@ -1,10 +1,8 @@
-import Dropdown from '@site/src/components/inputs/Dropdown';
-import Modal from '@site/src/components/layout/Modal';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
-import useFocus from '../hooks/useFocus';
 import Checkbox from '../inputs/Checkbox';
+import Dropdown from '../inputs/Dropdown';
 import Text from '../inputs/Text';
 import styles from './ConfigEditor.module.css';
 
@@ -26,50 +24,8 @@ export type ConfigEditorValues = Record<string, unknown>;
 export interface ConfigEditorProps {
   readonly options: ConfigOptionsType[];
   readonly values: ConfigEditorValues;
-  readonly isOpen: boolean;
-  readonly header: string;
-  readonly onClose: (config: ConfigEditorValues) => void;
-}
-
-function reducerObject(
-  state: ConfigEditorValues,
-  action:
-    | { type: 'init'; config?: ConfigEditorValues }
-    | {
-        type: 'set';
-        name: string;
-        value: unknown;
-      }
-    | {
-        type: 'toggle';
-        checked: boolean;
-        default: unknown[] | undefined;
-        name: string;
-      },
-): ConfigEditorValues {
-  switch (action.type) {
-    case 'init': {
-      return action.config ?? {};
-    }
-    case 'set': {
-      const newState = { ...state };
-      if (action.value === '') {
-        delete newState[action.name];
-      } else {
-        newState[action.name] = action.value;
-      }
-      return newState;
-    }
-    case 'toggle': {
-      const newState = { ...state };
-      if (action.checked) {
-        newState[action.name] = action.default ? action.default[0] : true;
-      } else if (action.name in newState) {
-        delete newState[action.name];
-      }
-      return newState;
-    }
-  }
+  readonly onChange: (config: ConfigEditorValues) => void;
+  readonly className?: string;
 }
 
 function filterConfig(
@@ -88,93 +44,104 @@ function isDefault(value: unknown, defaults?: unknown[]): boolean {
   return defaults ? defaults.includes(value) : value === true;
 }
 
-function ConfigEditor(props: ConfigEditorProps): JSX.Element {
-  const { onClose: onCloseProps, isOpen, values } = props;
-  const [filter, setFilter] = useState<string>('');
-  const [config, setConfig] = useReducer(reducerObject, {});
-  const [filterInput, setFilterFocus] = useFocus<HTMLInputElement>();
+interface ConfigEditorFieldProps {
+  readonly item: ConfigOptionsField;
+  readonly value: unknown;
+  readonly onChange: (name: string, value: unknown) => void;
+}
+
+function ConfigEditorField({
+  item,
+  value,
+  onChange,
+}: ConfigEditorFieldProps): JSX.Element {
+  return (
+    <label className={styles.searchResult}>
+      <span className={styles.searchResultDescription}>
+        <span className={styles.searchResultName}>{item.key}</span>
+        {item.label && <br />}
+        {item.label && <span> {item.label}</span>}
+      </span>
+      {(item.type === 'boolean' && (
+        <Checkbox
+          name={`config_${item.key}`}
+          value={item.key}
+          indeterminate={Boolean(value) && !isDefault(value, item.defaults)}
+          checked={Boolean(value)}
+          onChange={(checked): void =>
+            onChange(item.key, checked ? item.defaults?.[0] ?? true : undefined)
+          }
+        />
+      )) ||
+        (item.type === 'string' && item.enum && (
+          <Dropdown
+            name={`config_${item.key}`}
+            value={String(value)}
+            options={item.enum}
+            onChange={(value): void => onChange(item.key, value)}
+          />
+        ))}
+    </label>
+  );
+}
 
-  const onClose = useCallback(() => {
-    onCloseProps(config);
-  }, [onCloseProps, config]);
+function ConfigEditor({
+  onChange: onChangeProp,
+  values,
+  options,
+  className,
+}: ConfigEditorProps): JSX.Element {
+  const [filter, setFilter] = useState<string>('');
 
-  useEffect(() => {
-    setConfig({ type: 'init', config: values });
-  }, [values]);
+  const filteredOptions = useMemo(() => {
+    return filterConfig(options, filter);
+  }, [options, filter]);
 
-  useEffect(() => {
-    if (isOpen) {
-      setFilterFocus();
-    }
-  }, [isOpen, setFilterFocus]);
+  const onChange = useCallback(
+    (name: string, value: unknown): void => {
+      const newConfig = { ...values };
+      if (value === '' || value == null) {
+        delete newConfig[name];
+      } else {
+        newConfig[name] = value;
+      }
+      onChangeProp(newConfig);
+    },
+    [values, onChangeProp],
+  );
 
   return (
-    <Modal header={props.header} isOpen={isOpen} onClose={onClose}>
+    <div
+      className={clsx(
+        'thin-scrollbar',
+        styles.searchResultContainer,
+        className,
+      )}
+    >
       <div className={styles.searchBar}>
         <Text
-          ref={filterInput}
           type="search"
           name="config-filter"
           value={filter}
           onChange={setFilter}
         />
       </div>
-      <div className={clsx('thin-scrollbar', styles.searchResultContainer)}>
-        {filterConfig(props.options, filter).map(group => (
-          <div key={group.heading}>
-            <h3 className={styles.searchResultGroup}>{group.heading}</h3>
-            <div>
-              {group.fields.map(item => (
-                <label className={styles.searchResult} key={item.key}>
-                  <span className={styles.searchResultDescription}>
-                    <span className={styles.searchResultName}>{item.key}</span>
-                    {item.label && (
-                      <>
-                        <br />
-                        <span> {item.label}</span>
-                      </>
-                    )}
-                  </span>
-                  {item.type === 'boolean' && (
-                    <Checkbox
-                      name={`config_${item.key}`}
-                      value={item.key}
-                      indeterminate={
-                        Boolean(config[item.key]) &&
-                        !isDefault(config[item.key], item.defaults)
-                      }
-                      checked={Boolean(config[item.key])}
-                      onChange={(checked, name): void =>
-                        setConfig({
-                          type: 'toggle',
-                          checked,
-                          default: item.defaults,
-                          name,
-                        })
-                      }
-                    />
-                  )}
-                  {item.type === 'string' && item.enum && (
-                    <Dropdown
-                      name={`config_${item.key}`}
-                      value={String(config[item.key])}
-                      options={item.enum}
-                      onChange={(value): void => {
-                        setConfig({
-                          type: 'set',
-                          value,
-                          name: item.key,
-                        });
-                      }}
-                    />
-                  )}
-                </label>
-              ))}
-            </div>
+      {filteredOptions.map(group => (
+        <div key={group.heading}>
+          <h3 className={styles.searchResultGroup}>{group.heading}</h3>
+          <div>
+            {group.fields.map(item => (
+              <ConfigEditorField
+                key={item.key}
+                item={item}
+                value={values[item.key]}
+                onChange={onChange}
+              />
+            ))}
           </div>
-        ))}
-      </div>
-    </Modal>
+        </div>
+      ))}
+    </div>
   );
 }
 
diff --git a/packages/website/src/components/config/ConfigEslint.tsx b/packages/website/src/components/config/ConfigEslint.tsx
index fe6222df2e3c..7756dbae10b0 100644
--- a/packages/website/src/components/config/ConfigEslint.tsx
+++ b/packages/website/src/components/config/ConfigEslint.tsx
@@ -1,99 +1,71 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { ensureObject, parseJSONObject, toJson } from '../lib/json';
 import { shallowEqual } from '../lib/shallowEqual';
-import type { ConfigModel, EslintRC, RuleDetails, RuleEntry } from '../types';
-import type { ConfigOptionsType } from './ConfigEditor';
+import type { ConfigModel, RuleDetails } from '../types';
+import type { ConfigOptionsField, ConfigOptionsType } from './ConfigEditor';
 import ConfigEditor from './ConfigEditor';
-import { parseESLintRC, toJson } from './utils';
 
 export interface ConfigEslintProps {
-  readonly isOpen: boolean;
-  readonly onClose: (value?: Partial<ConfigModel>) => void;
+  readonly onChange: (value: Partial<ConfigModel>) => void;
   readonly ruleOptions: RuleDetails[];
   readonly config?: string;
-}
-
-function checkSeverity(value: unknown): boolean {
-  if (typeof value === 'string' || typeof value === 'number') {
-    return [0, 1, 2, 'off', 'warn', 'error'].includes(value);
-  }
-  return false;
-}
-
-function checkOptions(rule: [string, unknown]): rule is [string, RuleEntry] {
-  if (Array.isArray(rule[1])) {
-    return rule[1].length > 0 && checkSeverity(rule[1][0]);
-  }
-  return checkSeverity(rule[1]);
+  readonly className?: string;
 }
 
 function ConfigEslint(props: ConfigEslintProps): JSX.Element {
-  const { isOpen, config, onClose: onCloseProps, ruleOptions } = props;
-  const [options, updateOptions] = useState<ConfigOptionsType[]>([]);
-  const [configObject, updateConfigObject] = useState<EslintRC>();
+  const { config, onChange: onChangeProp, ruleOptions, className } = props;
 
-  useEffect(() => {
-    if (isOpen) {
-      updateConfigObject(parseESLintRC(config));
-    }
-  }, [isOpen, config]);
+  const [configObject, updateConfigObject] = useState<Record<string, unknown>>(
+    () => ({}),
+  );
 
   useEffect(() => {
-    updateOptions([
+    updateConfigObject(oldConfig => {
+      const newConfig = ensureObject(parseJSONObject(config).rules);
+      if (shallowEqual(oldConfig, newConfig)) {
+        return oldConfig;
+      }
+      return newConfig;
+    });
+  }, [config]);
+
+  const options = useMemo((): ConfigOptionsType[] => {
+    const mappedRules: ConfigOptionsField[] = ruleOptions.map(item => ({
+      key: item.name,
+      label: item.description,
+      type: 'boolean',
+      defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
+    }));
+
+    return [
       {
         heading: 'Rules',
-        fields: ruleOptions
-          .filter(item => item.name.startsWith('@typescript'))
-          .map(item => ({
-            key: item.name,
-            label: item.description,
-            type: 'boolean',
-            defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
-          })),
+        fields: mappedRules.filter(item => item.key.startsWith('@typescript')),
       },
       {
         heading: 'Core rules',
-        fields: ruleOptions
-          .filter(item => !item.name.startsWith('@typescript'))
-          .map(item => ({
-            key: item.name,
-            label: item.description,
-            type: 'boolean',
-            defaults: ['error', 2, 'warn', 1, ['error'], ['warn'], [2], [1]],
-          })),
+        fields: mappedRules.filter(item => !item.key.startsWith('@typescript')),
       },
-    ]);
+    ];
   }, [ruleOptions]);
 
-  const onClose = useCallback(
+  const onChange = useCallback(
     (newConfig: Record<string, unknown>) => {
-      const cfg = Object.fromEntries(
-        Object.entries(newConfig)
-          .map<[string, unknown]>(([name, value]) =>
-            Array.isArray(value) && value.length === 1
-              ? [name, value[0]]
-              : [name, value],
-          )
-          .filter(checkOptions),
-      );
-      if (!shallowEqual(cfg, configObject?.rules)) {
-        onCloseProps({
-          eslintrc: toJson({ ...(configObject ?? {}), rules: cfg }),
-        });
-      } else {
-        onCloseProps();
-      }
+      const parsed = parseJSONObject(config);
+      parsed.rules = newConfig;
+      updateConfigObject(newConfig);
+      onChangeProp({ eslintrc: toJson(parsed) });
     },
-    [onCloseProps, configObject],
+    [config, onChangeProp],
   );
 
   return (
     <ConfigEditor
-      header="Eslint Config"
+      className={className}
       options={options}
-      values={configObject?.rules ?? {}}
-      isOpen={isOpen}
-      onClose={onClose}
+      values={configObject}
+      onChange={onChange}
     />
   );
 }
diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx
index 40cd634ffb17..eb5c974d2cb9 100644
--- a/packages/website/src/components/config/ConfigTypeScript.tsx
+++ b/packages/website/src/components/config/ConfigTypeScript.tsx
@@ -1,83 +1,81 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { ensureObject, parseJSONObject, toJson } from '../lib/json';
 import { shallowEqual } from '../lib/shallowEqual';
-import type { ConfigModel, TSConfig } from '../types';
+import type { ConfigModel } from '../types';
 import type { ConfigOptionsType } from './ConfigEditor';
 import ConfigEditor from './ConfigEditor';
-import { getTypescriptOptions, parseTSConfig, toJson } from './utils';
+import { getTypescriptOptions } from './utils';
 
 interface ConfigTypeScriptProps {
-  readonly isOpen: boolean;
-  readonly onClose: (config?: Partial<ConfigModel>) => void;
+  readonly onChange: (config: Partial<ConfigModel>) => void;
   readonly config?: string;
+  readonly className?: string;
 }
 
 function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
-  const { onClose: onCloseProps, isOpen, config } = props;
-  const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);
-  const [configObject, updateConfigObject] = useState<TSConfig>();
+  const { config, onChange: onChangeProp, className } = props;
 
-  useEffect(() => {
-    if (isOpen) {
-      updateConfigObject(parseTSConfig(config));
-    }
-  }, [isOpen, config]);
+  const [configObject, updateConfigObject] = useState<Record<string, unknown>>(
+    () => ({}),
+  );
 
   useEffect(() => {
-    if (window.ts) {
-      updateOptions(
-        Object.values(
-          getTypescriptOptions().reduce<Record<string, ConfigOptionsType>>(
-            (group, item) => {
-              const category = item.category!.message;
-              group[category] = group[category] ?? {
-                heading: category,
-                fields: [],
-              };
-              if (item.type === 'boolean') {
-                group[category].fields.push({
-                  key: item.name,
-                  type: 'boolean',
-                  label: item.description!.message,
-                });
-              } else if (item.type instanceof Map) {
-                group[category].fields.push({
-                  key: item.name,
-                  type: 'string',
-                  label: item.description!.message,
-                  enum: ['', ...Array.from<string>(item.type.keys())],
-                });
-              }
-              return group;
-            },
-            {},
-          ),
-        ),
-      );
-    }
-  }, [isOpen]);
+    updateConfigObject(oldConfig => {
+      const newConfig = ensureObject(parseJSONObject(config).compilerOptions);
+      if (shallowEqual(oldConfig, newConfig)) {
+        return oldConfig;
+      }
+      return newConfig;
+    });
+  }, [config]);
 
-  const onClose = useCallback(
+  const options = useMemo((): ConfigOptionsType[] => {
+    return Object.values(
+      getTypescriptOptions().reduce<Record<string, ConfigOptionsType>>(
+        (group, item) => {
+          const category = item.category!.message;
+          group[category] = group[category] ?? {
+            heading: category,
+            fields: [],
+          };
+          if (item.type === 'boolean') {
+            group[category].fields.push({
+              key: item.name,
+              type: 'boolean',
+              label: item.description!.message,
+            });
+          } else if (item.type instanceof Map) {
+            group[category].fields.push({
+              key: item.name,
+              type: 'string',
+              label: item.description!.message,
+              enum: ['', ...Array.from<string>(item.type.keys())],
+            });
+          }
+          return group;
+        },
+        {},
+      ),
+    );
+  }, []);
+
+  const onChange = useCallback(
     (newConfig: Record<string, unknown>) => {
-      const cfg = { ...newConfig };
-      if (!shallowEqual(cfg, configObject?.compilerOptions)) {
-        onCloseProps({
-          tsconfig: toJson({ ...(configObject ?? {}), compilerOptions: cfg }),
-        });
-      } else {
-        onCloseProps();
-      }
+      const parsed = parseJSONObject(config);
+      parsed.compilerOptions = newConfig;
+      updateConfigObject(newConfig);
+      onChangeProp({ tsconfig: toJson(parsed) });
     },
-    [onCloseProps, configObject],
+    [config, onChangeProp],
   );
 
   return (
     <ConfigEditor
-      header="TypeScript Config"
-      options={tsConfigOptions}
-      values={configObject?.compilerOptions ?? {}}
-      isOpen={isOpen}
-      onClose={onClose}
+      className={className}
+      options={options}
+      values={configObject}
+      onChange={onChange}
     />
   );
 }
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
index a3ecff1afe7a..8061c25f1e9e 100644
--- a/packages/website/src/components/config/utils.ts
+++ b/packages/website/src/components/config/utils.ts
@@ -1,27 +1,17 @@
-import { isRecord } from '@site/src/components/ast/utils';
-import type { EslintRC, TSConfig } from '@site/src/components/types';
-import json5 from 'json5';
+import type * as ts from 'typescript';
 
-export interface OptionDeclarations {
-  name: string;
-  type?: unknown;
-  category?: { message: string };
-  description?: { message: string };
-  element?: {
-    type: unknown;
-  };
-}
+import { isRecord } from '../ast/utils';
+import { parseJSONObject, toJson } from '../lib/json';
+import type { EslintRC, TSConfig } from '../types';
 
 export function parseESLintRC(code?: string): EslintRC {
   if (code) {
     try {
-      const parsed: unknown = json5.parse(code);
-      if (isRecord(parsed)) {
-        if ('rules' in parsed && isRecord(parsed.rules)) {
-          return parsed as EslintRC;
-        }
-        return { ...parsed, rules: {} };
+      const parsed = parseJSONObject(code);
+      if ('rules' in parsed && isRecord(parsed.rules)) {
+        return parsed as EslintRC;
       }
+      return { ...parsed, rules: {} };
     } catch (e) {
       console.error(e);
     }
@@ -75,11 +65,7 @@ export function tryParseEslintModule(value: string): string {
   return value;
 }
 
-export function toJson(cfg: unknown): string {
-  return JSON.stringify(cfg, null, 2);
-}
-
-export function getTypescriptOptions(): OptionDeclarations[] {
+export function getTypescriptOptions(): ts.OptionDeclarations[] {
   const allowedCategories = [
     'Command-line Options',
     'Projects',
@@ -98,8 +84,7 @@ export function getTypescriptOptions(): OptionDeclarations[] {
     'jsx',
   ];
 
-  // @ts-expect-error: definition is not fully correct
-  return (window.ts.optionDeclarations as OptionDeclarations[]).filter(
+  return window.ts.optionDeclarations.filter(
     item =>
       (item.type === 'boolean' ||
         item.type === 'list' ||
diff --git a/packages/website/src/components/hooks/useFocus.ts b/packages/website/src/components/hooks/useFocus.ts
index 9c0cd6747da7..3e94d308e956 100644
--- a/packages/website/src/components/hooks/useFocus.ts
+++ b/packages/website/src/components/hooks/useFocus.ts
@@ -1,14 +1,14 @@
 import type React from 'react';
-import { useRef } from 'react';
+import { useCallback, useRef } from 'react';
 
 function useFocus<T extends HTMLOrSVGElement>(): [
   React.RefObject<T>,
   () => void,
 ] {
   const htmlElRef = useRef<T>(null);
-  const setFocus = (): void => {
+  const setFocus = useCallback((): void => {
     htmlElRef.current?.focus();
-  };
+  }, []);
   return [htmlElRef, setFocus];
 }
 
diff --git a/packages/website/src/components/hooks/useHashState.ts b/packages/website/src/components/hooks/useHashState.ts
index 2c80d7a3ab23..de2f475154b3 100644
--- a/packages/website/src/components/hooks/useHashState.ts
+++ b/packages/website/src/components/hooks/useHashState.ts
@@ -3,8 +3,9 @@ import * as lz from 'lz-string';
 import { useCallback, useState } from 'react';
 
 import { fileTypes } from '../config';
-import { toJson } from '../config/utils';
 import { hasOwnProperty } from '../lib/has-own-property';
+import { toJson } from '../lib/json';
+import { shallowEqual } from '../lib/shallowEqual';
 import type { ConfigFileType, ConfigModel, ConfigShowAst } from '../types';
 
 function writeQueryParam(value: string | null): string {
@@ -183,9 +184,14 @@ function useHashState(
   const updateState = useCallback(
     (cfg: Partial<ConfigModel>) => {
       console.info('[State] updating config diff', cfg);
+
       setState(oldState => {
         const newState = { ...oldState, ...cfg };
 
+        if (shallowEqual(oldState, newState)) {
+          return oldState;
+        }
+
         writeStateToLocalStorage(newState);
 
         history.replace({
diff --git a/packages/website/src/components/layout/Modal.module.css b/packages/website/src/components/layout/Modal.module.css
deleted file mode 100644
index c33aaa17f434..000000000000
--- a/packages/website/src/components/layout/Modal.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 2;
-  padding-top: 100px;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgb(0 0 0 / 40%);
-}
-
-.modal.open {
-  display: block;
-}
-
-.modalContent {
-  position: relative;
-  background-color: var(--ifm-background-surface-color);
-  border-radius: var(--ifm-global-radius);
-  margin: auto;
-  padding: 0;
-  width: calc(var(--ifm-container-width) * 0.7);
-  animation-name: animatetop;
-  animation-duration: 0.4s;
-  max-width: 95%;
-}
-
-@keyframes animatetop {
-  from {
-    top: -30rem;
-    opacity: 0;
-  }
-
-  to {
-    top: 0;
-    opacity: 1;
-  }
-}
-
-.modalClose {
-  transition: color var(--ifm-transition-fast)
-    var(--ifm-transition-timing-default);
-}
-
-.modalClose:hover,
-.modalClose:focus {
-  color: var(--ifm-color-primary);
-}
-
-.modalHeader {
-  display: flex;
-  padding: 1rem 1.5rem;
-  justify-content: space-between;
-  align-items: baseline;
-}
-
-.modalHeader h2 {
-  margin: 0;
-}
-
-.modalBody {
-  padding: 1rem 1.5rem;
-}
diff --git a/packages/website/src/components/layout/Modal.tsx b/packages/website/src/components/layout/Modal.tsx
deleted file mode 100644
index ffc8ca55fef2..000000000000
--- a/packages/website/src/components/layout/Modal.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
-import CloseIcon from '@site/src/icons/close.svg';
-import clsx from 'clsx';
-import type { MouseEvent } from 'react';
-import React, { useCallback, useEffect } from 'react';
-
-import styles from './Modal.module.css';
-
-interface ModalProps {
-  readonly header: string;
-  readonly children: JSX.Element | (JSX.Element | false)[];
-  readonly isOpen: boolean;
-  readonly onClose: () => void;
-}
-
-function Modal(props: ModalProps): JSX.Element {
-  const { onClose } = props;
-
-  useEffect(() => {
-    const closeOnEscapeKeyDown = (e: KeyboardEvent): void => {
-      if (
-        e.key === 'Escape' ||
-        // eslint-disable-next-line deprecation/deprecation -- intentional fallback for old browsers
-        e.keyCode === 27
-      ) {
-        onClose();
-      }
-    };
-
-    document.body.addEventListener('keydown', closeOnEscapeKeyDown);
-    return (): void => {
-      document.body.removeEventListener('keydown', closeOnEscapeKeyDown);
-    };
-  }, [onClose]);
-
-  const onClick = useCallback(
-    (e: MouseEvent<HTMLDivElement>) => {
-      if (e.currentTarget === e.target) {
-        onClose();
-      }
-    },
-    [onClose],
-  );
-
-  return (
-    <div
-      className={clsx(styles.modal, props.isOpen ? styles.open : '')}
-      onClick={onClick}
-    >
-      <div
-        role="dialog"
-        aria-modal="true"
-        className={clsx(styles.modalContent, 'item shadow--md')}
-      >
-        <div className={styles.modalHeader}>
-          <h2>{props.header}</h2>
-          <button
-            aria-label="Close"
-            onClick={props.onClose}
-            className={clsx(styles.modalClose, 'clean-btn')}
-            type="button"
-          >
-            <CloseIcon />
-          </button>
-        </div>
-        <div className={styles.modalBody}>
-          {React.Children.map(props.children, child => child)}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Modal;
diff --git a/packages/website/src/components/lib/json.ts b/packages/website/src/components/lib/json.ts
new file mode 100644
index 000000000000..232584954477
--- /dev/null
+++ b/packages/website/src/components/lib/json.ts
@@ -0,0 +1,26 @@
+import json5 from 'json5';
+
+import { isRecord } from '../ast/utils';
+
+export function ensureObject(obj: unknown): Record<string, unknown> {
+  return isRecord(obj) ? obj : {};
+}
+
+export function parseJSONObject(code?: string): Record<string, unknown> {
+  if (code) {
+    try {
+      return ensureObject(json5.parse(code));
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return {};
+}
+
+export function toJson(cfg: unknown): string {
+  return JSON.stringify(cfg, null, 2);
+}
+
+export function toJsonConfig(cfg: unknown, prop: string): string {
+  return toJson({ [prop]: cfg });
+}
diff --git a/packages/website/typings/typescript.d.ts b/packages/website/typings/typescript.d.ts
index 7239e4ddcb5f..30af30c4ae78 100644
--- a/packages/website/typings/typescript.d.ts
+++ b/packages/website/typings/typescript.d.ts
@@ -1,7 +1,5 @@
 import 'typescript';
 
-type StringMap = Map<string, string>;
-
 declare module 'typescript' {
   /**
    * Map of available libraries
@@ -9,5 +7,17 @@ declare module 'typescript' {
    * The key is the key used in compilerOptions.lib
    * The value is the file name
    */
-  const libMap: StringMap;
+  const libMap: Map<string, string>;
+
+  interface OptionDeclarations {
+    name: string;
+    type?: unknown;
+    category?: { message: string };
+    description?: { message: string };
+    element?: {
+      type: unknown;
+    };
+  }
+
+  const optionDeclarations: OptionDeclarations[];
 }