diff --git a/packages/website/src/components/ASTViewerESTree.tsx b/packages/website/src/components/ASTViewerESTree.tsx
index 7dfcef130cf2..855235eba0b4 100644
--- a/packages/website/src/components/ASTViewerESTree.tsx
+++ b/packages/website/src/components/ASTViewerESTree.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
-import type { ASTViewerBaseProps, ASTViewerModelMap } from './ast/types';
+import type { ASTViewerBaseProps } from './ast/types';
 import type { TSESTree } from '@typescript-eslint/utils';
+
 import { serialize } from './ast/serializer/serializer';
 import { createESTreeSerializer } from './ast/serializer/serializerESTree';
 
 export interface ASTESTreeViewerProps extends ASTViewerBaseProps {
-  readonly value: TSESTree.BaseNode | string;
+  readonly value: TSESTree.BaseNode;
 }
 
 export default function ASTViewerESTree({
@@ -15,16 +16,10 @@ export default function ASTViewerESTree({
   position,
   onSelectNode,
 }: ASTESTreeViewerProps): JSX.Element {
-  const [model, setModel] = useState<string | ASTViewerModelMap>('');
-
-  useEffect(() => {
-    if (typeof value === 'string') {
-      setModel(value);
-    } else {
-      const astSerializer = createESTreeSerializer();
-      setModel(serialize(value, astSerializer));
-    }
-  }, [value]);
+  const model = useMemo(
+    () => serialize(value, createESTreeSerializer()),
+    [value],
+  );
 
   return (
     <ASTViewer value={model} position={position} onSelectNode={onSelectNode} />
diff --git a/packages/website/src/components/ASTViewerScope.tsx b/packages/website/src/components/ASTViewerScope.tsx
index b14514855381..9d5dff8fc5af 100644
--- a/packages/website/src/components/ASTViewerScope.tsx
+++ b/packages/website/src/components/ASTViewerScope.tsx
@@ -1,29 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
-import type { ASTViewerBaseProps, ASTViewerModelMap } from './ast/types';
+import type { ASTViewerBaseProps } from './ast/types';
 
 import { serialize } from './ast/serializer/serializer';
 import { createScopeSerializer } from './ast/serializer/serializerScope';
 
 export interface ASTScopeViewerProps extends ASTViewerBaseProps {
-  readonly value: Record<string, unknown> | string;
+  readonly value: Record<string, unknown>;
 }
 
 export default function ASTViewerScope({
   value,
   onSelectNode,
 }: ASTScopeViewerProps): JSX.Element {
-  const [model, setModel] = useState<string | ASTViewerModelMap>('');
-
-  useEffect(() => {
-    if (typeof value === 'string') {
-      setModel(value);
-    } else {
-      const scopeSerializer = createScopeSerializer();
-      setModel(serialize(value, scopeSerializer));
-    }
-  }, [value]);
+  const model = useMemo(
+    () => serialize(value, createScopeSerializer()),
+    [value],
+  );
 
   return <ASTViewer value={model} onSelectNode={onSelectNode} />;
 }
diff --git a/packages/website/src/components/ASTViewerTS.tsx b/packages/website/src/components/ASTViewerTS.tsx
index d33e524366aa..8cd3f15ce5a8 100644
--- a/packages/website/src/components/ASTViewerTS.tsx
+++ b/packages/website/src/components/ASTViewerTS.tsx
@@ -7,7 +7,7 @@ import { serialize } from './ast/serializer/serializer';
 import { createTsSerializer } from './ast/serializer/serializerTS';
 
 export interface ASTTsViewerProps extends ASTViewerBaseProps {
-  readonly value: SourceFile | string;
+  readonly value: SourceFile;
 }
 
 function extractEnum(
@@ -41,22 +41,18 @@ export default function ASTViewerTS({
   const [typeFlags] = useState(() => extractEnum(window.ts.TypeFlags));
 
   useEffect(() => {
-    if (typeof value === 'string') {
-      setModel(value);
-    } else {
-      const scopeSerializer = createTsSerializer(
-        value,
-        syntaxKind,
-        ['NodeFlags', nodeFlags],
-        ['TokenFlags', tokenFlags],
-        ['ModifierFlags', modifierFlags],
-        ['ObjectFlags', objectFlags],
-        ['SymbolFlags', symbolFlags],
-        ['FlowFlags', flowFlags],
-        ['TypeFlags', typeFlags],
-      );
-      setModel(serialize(value, scopeSerializer));
-    }
+    const scopeSerializer = createTsSerializer(
+      value,
+      syntaxKind,
+      ['NodeFlags', nodeFlags],
+      ['TokenFlags', tokenFlags],
+      ['ModifierFlags', modifierFlags],
+      ['ObjectFlags', objectFlags],
+      ['SymbolFlags', symbolFlags],
+      ['FlowFlags', flowFlags],
+      ['TypeFlags', typeFlags],
+    );
+    setModel(serialize(value, scopeSerializer));
   }, [value, syntaxKind]);
 
   return (
diff --git a/packages/website/src/components/EditorTabs.tsx b/packages/website/src/components/EditorTabs.tsx
new file mode 100644
index 000000000000..a0b81e9dc058
--- /dev/null
+++ b/packages/website/src/components/EditorTabs.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type { TabType } from './types';
+import styles from './Playground.module.css';
+import EditIcon from '@site/src/icons/edit.svg';
+
+export interface FileTabsProps {
+  readonly tabs: TabType[];
+  readonly activeTab: TabType;
+  readonly change: (tab: TabType) => void;
+  readonly showModal: () => void;
+}
+
+export default function EditorTabs({
+  tabs,
+  activeTab,
+  change,
+  showModal,
+}: FileTabsProps): JSX.Element {
+  return (
+    <div className={styles.tabContainer}>
+      <div role="tablist">
+        {tabs.map(item => {
+          return (
+            <button
+              role="tab"
+              className={styles.tabStyle}
+              key={item}
+              aria-selected={activeTab === item}
+              disabled={activeTab === item}
+              onClick={(): void => change(item)}
+            >
+              {item}
+            </button>
+          );
+        })}
+      </div>
+      {activeTab !== 'code' && (
+        <button className={styles.tabStyle} onClick={showModal}>
+          Visual Editor
+          <EditIcon width={12} height={12} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
index fa1b56c937fb..566f1b83fdc4 100644
--- a/packages/website/src/components/ErrorsViewer.tsx
+++ b/packages/website/src/components/ErrorsViewer.tsx
@@ -19,7 +19,7 @@ function severityClass(severity: Monaco.MarkerSeverity): string {
     case 8:
       return 'danger';
     case 4:
-      return 'caution';
+      return 'warning';
     case 2:
       return 'note';
   }
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index 9b9d9f7ec90e..f3a579df30b4 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -1,27 +1,21 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 
-import ConfigEslint from './config/ConfigEslint';
-import ConfigTypeScript from './config/ConfigTypeScript';
 import Expander from './layout/Expander';
 import Dropdown from './inputs/Dropdown';
 import Checkbox from './inputs/Checkbox';
 import Tooltip from './inputs/Tooltip';
-import EditIcon from '@site/src/icons/edit.svg';
 import CopyIcon from '@site/src/icons/copy.svg';
 
 import useDebouncedToggle from './hooks/useDebouncedToggle';
 
 import { createMarkdown, createMarkdownParams } from './lib/markdown';
 
-import type { RuleDetails } from './types';
-
 import styles from './OptionsSelector.module.css';
 
-import type { CompilerFlags, ConfigModel, RulesRecord } from './types';
+import type { ConfigModel } from './types';
 
 export interface OptionsSelectorParams {
-  readonly ruleOptions: RuleDetails[];
   readonly state: ConfigModel;
   readonly setState: (cfg: Partial<ConfigModel>) => void;
   readonly tsVersions: readonly string[];
@@ -36,14 +30,11 @@ const ASTOptions = [
 ] as const;
 
 function OptionsSelector({
-  ruleOptions,
   state,
   setState,
   tsVersions,
   isLoading,
 }: OptionsSelectorParams): JSX.Element {
-  const [eslintModal, setEslintModal] = useState<boolean>(false);
-  const [typeScriptModal, setTypeScriptModal] = useState<boolean>(false);
   const [copyLink, setCopyLink] = useDebouncedToggle<boolean>(false);
   const [copyMarkdown, setCopyMarkdown] = useDebouncedToggle<boolean>(false);
 
@@ -54,26 +45,6 @@ function OptionsSelector({
     [setState],
   );
 
-  const updateRules = useCallback(
-    (rules?: RulesRecord) => {
-      if (rules) {
-        setState({ rules: rules });
-      }
-      setEslintModal(false);
-    },
-    [setState],
-  );
-
-  const updateTsConfig = useCallback(
-    (config?: CompilerFlags) => {
-      if (config) {
-        setState({ tsConfig: config });
-      }
-      setTypeScriptModal(false);
-    },
-    [setState],
-  );
-
   const copyLinkToClipboard = useCallback(() => {
     void navigator.clipboard
       .writeText(document.location.toString())
@@ -107,19 +78,6 @@ function OptionsSelector({
 
   return (
     <>
-      {state.rules && ruleOptions.length > 0 && (
-        <ConfigEslint
-          isOpen={eslintModal}
-          ruleOptions={ruleOptions}
-          rules={state.rules}
-          onClose={updateRules}
-        />
-      )}
-      <ConfigTypeScript
-        isOpen={typeScriptModal}
-        config={state.tsConfig}
-        onClose={updateTsConfig}
-      />
       <Expander label="Info">
         <label className={styles.optionLabel}>
           TypeScript
@@ -170,20 +128,6 @@ function OptionsSelector({
             options={['script', 'module']}
           />
         </label>
-        <button
-          className={styles.optionLabel}
-          onClick={(): void => setEslintModal(true)}
-        >
-          Eslint Config
-          <EditIcon />
-        </button>
-        <button
-          className={styles.optionLabel}
-          onClick={(): void => setTypeScriptModal(true)}
-        >
-          TypeScript Config
-          <EditIcon />
-        </button>
       </Expander>
       <Expander label="Actions">
         <button className={styles.optionLabel} onClick={copyLinkToClipboard}>
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index cd1d8fafe78a..b6c4e1904c03 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -1,13 +1,18 @@
+:root {
+  --playground-main-color: var(--ifm-background-surface-color);
+  --playground-secondary-color: var(--ifm-color-emphasis-100);
+}
+
 .options {
   width: 20rem;
-  background: var(--ifm-background-surface-color);
+  background: var(--playground-main-color);
   overflow: auto;
 }
 
 .sourceCode {
   height: 100%;
   width: 50%;
-  border: 1px solid var(--ifm-color-emphasis-100);
+  border: 1px solid var(--playground-secondary-color);
 }
 
 .codeBlocks {
@@ -20,7 +25,7 @@
 .astViewer {
   height: 100%;
   width: 50%;
-  border: 1px solid var(--ifm-color-emphasis-100);
+  border: 1px solid var(--playground-secondary-color);
   padding: 0;
   overflow: auto;
   word-wrap: initial;
@@ -37,3 +42,67 @@
   top: var(--ifm-navbar-height);
   z-index: calc(var(--ifm-z-index-fixed) - 1);
 }
+
+.tabContainer {
+  display: flex;
+  justify-content: space-between;
+  background: var(--playground-main-color);
+  border-bottom: 1px solid var(--playground-secondary-color);
+}
+
+.tabCode {
+  height: calc(100%);
+}
+
+.tabStyle {
+  border: none;
+  border-right: 1px solid var(--playground-secondary-color);
+  background: var(--playground-main-color);
+  color: var(--ifm-color-emphasis-700);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.tabStyle svg {
+  margin-left: 0.3rem;
+}
+
+.tabStyle:hover {
+  background: var(--playground-secondary-color);
+}
+
+.tabStyle:disabled {
+  background: var(--playground-secondary-color);
+  color: var(--ifm-color-emphasis-900);
+}
+
+@media only screen and (max-width: 996px) {
+  .codeContainer {
+    display: block;
+    width: 100%;
+    position: static;
+  }
+  .codeBlocks {
+    display: block;
+    width: 100%;
+  }
+
+  .options {
+    width: 100%;
+  }
+
+  .tabCode {
+    height: calc(30rem - 3.2rem);
+  }
+
+  .astViewer,
+  .sourceCode {
+    height: 30rem;
+    width: 100%;
+  }
+
+  .astViewer {
+    height: auto;
+    max-height: 30rem;
+  }
+}
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index f6f93378fb85..e08c3e3c274a 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -1,4 +1,4 @@
-import React, { useReducer, useState } from 'react';
+import React, { useCallback, useReducer, useState } from 'react';
 import type Monaco from 'monaco-editor';
 import clsx from 'clsx';
 import { useColorMode } from '@docusaurus/theme-common';
@@ -15,12 +15,25 @@ import { shallowEqual } from './lib/shallowEqual';
 import ASTViewerESTree from './ASTViewerESTree';
 import ASTViewerTS from './ASTViewerTS';
 
-import type { RuleDetails, SelectedRange } from './types';
+import type {
+  RuleDetails,
+  SelectedRange,
+  ErrorItem,
+  TabType,
+  ConfigModel,
+} from './types';
 
 import type { TSESTree } from '@typescript-eslint/utils';
 import type { SourceFile } from 'typescript';
 import ASTViewerScope from '@site/src/components/ASTViewerScope';
 import ErrorsViewer from '@site/src/components/ErrorsViewer';
+import EditorTabs from '@site/src/components/EditorTabs';
+import ConfigEslint from '@site/src/components/config/ConfigEslint';
+import ConfigTypeScript from '@site/src/components/config/ConfigTypeScript';
+import {
+  defaultEslintConfig,
+  defaultTsConfig,
+} from '@site/src/components/config/utils';
 
 function rangeReducer<T extends SelectedRange | null>(
   prevState: T,
@@ -46,50 +59,83 @@ function Playground(): JSX.Element {
     sourceType: 'module',
     code: '',
     ts: process.env.TS_VERSION!,
-    rules: {},
-    tsConfig: {},
+    tsconfig: defaultTsConfig,
+    eslintrc: defaultEslintConfig,
   });
   const { colorMode } = useColorMode();
-  const [esAst, setEsAst] = useState<TSESTree.Program | string | null>();
-  const [tsAst, setTsAST] = useState<SourceFile | string | null>();
-  const [scope, setScope] = useState<Record<string, unknown> | string | null>();
-  const [markers, setMarkers] = useState<Monaco.editor.IMarker[]>();
+  const [esAst, setEsAst] = useState<TSESTree.Program | null>();
+  const [tsAst, setTsAST] = useState<SourceFile | null>();
+  const [scope, setScope] = useState<Record<string, unknown> | null>();
+  const [markers, setMarkers] = useState<ErrorItem[]>();
   const [ruleNames, setRuleNames] = useState<RuleDetails[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [tsVersions, setTSVersion] = useState<readonly string[]>([]);
   const [selectedRange, setSelectedRange] = useReducer(rangeReducer, null);
   const [position, setPosition] = useState<Monaco.Position | null>(null);
+  const [activeTab, setTab] = useState<TabType>('code');
+  const [showModal, setShowModal] = useState<TabType | false>(false);
+
+  const updateModal = useCallback(
+    (config?: Partial<ConfigModel>) => {
+      if (config) {
+        setState(config);
+      }
+      setShowModal(false);
+    },
+    [setState],
+  );
 
   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={clsx(styles.options, 'thin-scrollbar')}>
         <OptionsSelector
           isLoading={isLoading}
           state={state}
           tsVersions={tsVersions}
           setState={setState}
-          ruleOptions={ruleNames}
         />
       </div>
       <div className={styles.codeBlocks}>
         <div className={clsx(styles.sourceCode)}>
           {isLoading && <Loader />}
-          <EditorEmbed />
+          <EditorTabs
+            tabs={['code', 'tsconfig', 'eslintrc']}
+            activeTab={activeTab}
+            change={setTab}
+            showModal={(): void => setShowModal(activeTab)}
+          />
+          <div className={styles.tabCode}>
+            <EditorEmbed />
+          </div>
           <LoadingEditor
             ts={state.ts}
             jsx={state.jsx}
+            activeTab={activeTab}
             code={state.code}
-            tsConfig={state.tsConfig}
+            tsconfig={state.tsconfig}
+            eslintrc={state.eslintrc}
             darkTheme={colorMode === 'dark'}
             sourceType={state.sourceType}
-            rules={state.rules}
             showAST={state.showAST}
             onEsASTChange={setEsAst}
             onTsASTChange={setTsAST}
             onScopeChange={setScope}
             onMarkersChange={setMarkers}
             decoration={selectedRange}
-            onChange={(code): void => setState({ code: code })}
+            onChange={setState}
             onLoaded={(ruleNames, tsVersions): void => {
               setRuleNames(ruleNames);
               setTSVersion(tsVersions);
@@ -99,7 +145,7 @@ function Playground(): JSX.Element {
           />
         </div>
         <div className={styles.astViewer}>
-          {(tsAst && state.showAST === 'ts' && (
+          {(state.showAST === 'ts' && tsAst && (
             <ASTViewerTS
               value={tsAst}
               position={position}
diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
index 062e1ac21fde..43bfcadd9bcd 100644
--- a/packages/website/src/components/config/ConfigEditor.tsx
+++ b/packages/website/src/components/config/ConfigEditor.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import clsx from 'clsx';
-import { parse } from 'json5';
 
 import styles from './ConfigEditor.module.css';
 
@@ -27,32 +26,9 @@ export interface ConfigEditorProps {
   readonly values: ConfigEditorValues;
   readonly isOpen: boolean;
   readonly header: string;
-  readonly jsonField: string;
   readonly onClose: (config: ConfigEditorValues) => void;
 }
 
-function reducerJson(
-  _state: string,
-  action: string | { field: string; value: ConfigEditorValues },
-): string {
-  if (typeof action === 'string') {
-    return action;
-  } else if (action && typeof action === 'object') {
-    return JSON.stringify(
-      {
-        [action.field]: action.value,
-      },
-      null,
-      2,
-    );
-  }
-  throw new Error();
-}
-
-function isRecord(data: unknown): data is Record<string, unknown> {
-  return Boolean(data && typeof data === 'object');
-}
-
 function reducerObject(
   state: ConfigEditorValues,
   action:
@@ -62,8 +38,7 @@ function reducerObject(
         checked: boolean;
         default: unknown[] | undefined;
         name: string;
-      }
-    | { type: 'json'; field: string; code: string },
+      },
 ): ConfigEditorValues {
   switch (action.type) {
     case 'init': {
@@ -78,21 +53,6 @@ function reducerObject(
       }
       return newState;
     }
-    case 'json': {
-      try {
-        const parsed: unknown = parse(action.code);
-        if (isRecord(parsed)) {
-          const item = parsed[action.field];
-          if (item && isRecord(item)) {
-            return item;
-          }
-        }
-      } catch {
-        // eslint-disable-next-line no-console
-        console.error('ERROR parsing json');
-      }
-      return state;
-    }
   }
 }
 
@@ -114,25 +74,12 @@ function isDefault(value: unknown, defaults?: unknown[]): boolean {
 
 function ConfigEditor(props: ConfigEditorProps): JSX.Element {
   const [filter, setFilter] = useState<string>('');
-  const [editJson, setEditJson] = useState<boolean>(false);
   const [config, setConfig] = useReducer(reducerObject, {});
-  const [jsonCode, setJsonCode] = useReducer(reducerJson, '');
   const [filterInput, setFilterFocus] = useFocus();
-  const [jsonInput, setJsonFocus] = useFocus();
 
   const onClose = useCallback(() => {
-    if (editJson) {
-      props.onClose(
-        reducerObject(config, {
-          type: 'json',
-          field: props.jsonField,
-          code: jsonCode,
-        }),
-      );
-    } else {
-      props.onClose(config);
-    }
-  }, [props.onClose, props.jsonField, jsonCode, config]);
+    props.onClose(config);
+  }, [props.onClose, config]);
 
   useEffect(() => {
     setConfig({ type: 'init', config: props.values });
@@ -140,93 +87,57 @@ function ConfigEditor(props: ConfigEditorProps): JSX.Element {
 
   useEffect(() => {
     if (props.isOpen) {
-      if (!editJson) {
-        setFilterFocus();
-      } else {
-        setJsonFocus();
-      }
-    }
-  }, [editJson, props.isOpen]);
-
-  const changeEditType = useCallback(() => {
-    if (editJson) {
-      setConfig({ type: 'json', field: props.jsonField, code: jsonCode });
-    } else {
-      setJsonCode({ field: props.jsonField, value: config });
+      setFilterFocus();
     }
-    setEditJson(!editJson);
-  }, [editJson, config, jsonCode, props.jsonField]);
+  }, [props.isOpen]);
 
   return (
     <Modal header={props.header} isOpen={props.isOpen} onClose={onClose}>
       <div className={styles.searchBar}>
-        {!editJson && (
-          <Text
-            ref={filterInput}
-            type="text"
-            name="config-filter"
-            value={filter}
-            className={styles.search}
-            onChange={setFilter}
-          />
-        )}
-        <button
-          className={clsx('button button--info button--sm', styles.editJson)}
-          onClick={changeEditType}
-        >
-          {!editJson ? 'Edit JSON' : 'Edit Config'}
-        </button>
-      </div>
-      {editJson && (
-        <textarea
-          // @ts-expect-error: invalid react type
-          ref={jsonInput}
-          name="eslint-edit-json"
-          className={styles.textarea}
-          value={jsonCode}
-          onChange={(e): void => setJsonCode(e.target.value)}
-          rows={20}
+        <Text
+          ref={filterInput}
+          type="text"
+          name="config-filter"
+          value={filter}
+          className={styles.search}
+          onChange={setFilter}
         />
-      )}
-      {!editJson && (
-        <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>
-                      <span className={styles.searchResultName}>
-                        {item.key}
-                      </span>
-                      {item.label && <br />}
-                      {item.label && <span>{item.label}</span>}
-                    </span>
-                    <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,
-                        })
-                      }
-                    />
-                  </label>
-                ))}
-              </div>
+      </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>
+                    <span className={styles.searchResultName}>{item.key}</span>
+                    {item.label && <br />}
+                    {item.label && <span>{item.label}</span>}
+                  </span>
+                  <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,
+                      })
+                    }
+                  />
+                </label>
+              ))}
             </div>
-          ))}
-        </div>
-      )}
+          </div>
+        ))}
+      </div>
     </Modal>
   );
 }
diff --git a/packages/website/src/components/config/ConfigEslint.tsx b/packages/website/src/components/config/ConfigEslint.tsx
index f72e02f342c1..3ffc57cb35ff 100644
--- a/packages/website/src/components/config/ConfigEslint.tsx
+++ b/packages/website/src/components/config/ConfigEslint.tsx
@@ -1,14 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import ConfigEditor, { ConfigOptionsType } from './ConfigEditor';
-import type { RuleDetails, RulesRecord, RuleEntry } from '../types';
+import type {
+  RulesRecord,
+  RuleDetails,
+  RuleEntry,
+  ConfigModel,
+} from '../types';
 import { shallowEqual } from '../lib/shallowEqual';
+import { parseESLintRC, toJsonConfig } from '@site/src/components/config/utils';
 
-export interface ModalEslintProps {
+export interface ConfigEslintProps {
   readonly isOpen: boolean;
-  readonly onClose: (value?: RulesRecord) => void;
+  readonly onClose: (value?: Partial<ConfigModel>) => void;
   readonly ruleOptions: RuleDetails[];
-  readonly rules: RulesRecord;
+  readonly config?: string;
 }
 
 function checkSeverity(value: unknown): boolean {
@@ -25,8 +31,15 @@ function checkOptions(rule: [string, unknown]): rule is [string, RuleEntry] {
   return checkSeverity(rule[1]);
 }
 
-function ConfigEslint(props: ModalEslintProps): JSX.Element {
+function ConfigEslint(props: ConfigEslintProps): JSX.Element {
   const [options, updateOptions] = useState<ConfigOptionsType[]>([]);
+  const [configObject, updateConfigObject] = useState<RulesRecord>({});
+
+  useEffect(() => {
+    if (props.isOpen) {
+      updateConfigObject(props.config ? parseESLintRC(props.config) : {});
+    }
+  }, [props.isOpen, props.config]);
 
   useEffect(() => {
     updateOptions([
@@ -64,21 +77,20 @@ function ConfigEslint(props: ModalEslintProps): JSX.Element {
           )
           .filter(checkOptions),
       );
-      if (!shallowEqual(cfg, props.rules)) {
-        props.onClose(cfg);
+      if (!shallowEqual(cfg, configObject)) {
+        props.onClose({ eslintrc: toJsonConfig(cfg, 'rules') });
       } else {
         props.onClose();
       }
     },
-    [props.onClose, props.rules],
+    [props.onClose, configObject],
   );
 
   return (
     <ConfigEditor
       header="Eslint Config"
       options={options}
-      values={props.rules ?? {}}
-      jsonField="rules"
+      values={configObject ?? {}}
       isOpen={props.isOpen}
       onClose={onClose}
     />
diff --git a/packages/website/src/components/config/ConfigTypeScript.tsx b/packages/website/src/components/config/ConfigTypeScript.tsx
index b2c215c6b577..78f547088b66 100644
--- a/packages/website/src/components/config/ConfigTypeScript.tsx
+++ b/packages/website/src/components/config/ConfigTypeScript.tsx
@@ -1,52 +1,36 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import ConfigEditor, { ConfigOptionsType } from './ConfigEditor';
-import type { CompilerFlags } from '../types';
+import type { CompilerFlags, ConfigModel } from '../types';
 import { shallowEqual } from '../lib/shallowEqual';
+import { getTypescriptOptions, parseTSConfig, toJsonConfig } from './utils';
 
-interface ModalTypeScriptProps {
+interface ConfigTypeScriptProps {
   readonly isOpen: boolean;
-  readonly onClose: (config?: CompilerFlags) => void;
-  readonly config?: CompilerFlags;
-}
-
-interface OptionDeclarations {
-  name: string;
-  type?: unknown;
-  category?: { message: string };
-  description?: { message: string };
+  readonly onClose: (config?: Partial<ConfigModel>) => void;
+  readonly config?: string;
 }
 
 function checkOptions(item: [string, unknown]): item is [string, boolean] {
   return typeof item[1] === 'boolean';
 }
 
-function ConfigTypeScript(props: ModalTypeScriptProps): JSX.Element {
+function ConfigTypeScript(props: ConfigTypeScriptProps): JSX.Element {
   const [tsConfigOptions, updateOptions] = useState<ConfigOptionsType[]>([]);
+  const [configObject, updateConfigObject] = useState<CompilerFlags>({});
+
+  useEffect(() => {
+    if (props.isOpen) {
+      updateConfigObject(props.config ? parseTSConfig(props.config) : {});
+    }
+  }, [props.isOpen, props.config]);
 
   useEffect(() => {
     if (window.ts) {
       updateOptions(
         Object.values(
-          // @ts-expect-error: definition is not fully correct
-          (window.ts.optionDeclarations as OptionDeclarations[])
-            .filter(
-              item =>
-                item.type === 'boolean' &&
-                item.description &&
-                item.category &&
-                ![
-                  'Command-line Options',
-                  'Modules',
-                  'Projects',
-                  'Compiler Diagnostics',
-                  'Editor Support',
-                  'Output Formatting',
-                  'Watch and Build Modes',
-                  'Source Map Options',
-                ].includes(item.category.message),
-            )
-            .reduce<Record<string, ConfigOptionsType>>((group, item) => {
+          getTypescriptOptions().reduce<Record<string, ConfigOptionsType>>(
+            (group, item) => {
               const category = item.category!.message;
               group[category] = group[category] ?? {
                 heading: category,
@@ -57,7 +41,9 @@ function ConfigTypeScript(props: ModalTypeScriptProps): JSX.Element {
                 label: item.description!.message,
               });
               return group;
-            }, {}),
+            },
+            {},
+          ),
         ),
       );
     }
@@ -68,21 +54,20 @@ function ConfigTypeScript(props: ModalTypeScriptProps): JSX.Element {
       const cfg = Object.fromEntries(
         Object.entries(newConfig).filter(checkOptions),
       );
-      if (!shallowEqual(cfg, props.config)) {
-        props.onClose(cfg);
+      if (!shallowEqual(cfg, configObject)) {
+        props.onClose({ tsconfig: toJsonConfig(cfg, 'compilerOptions') });
       } else {
         props.onClose();
       }
     },
-    [props.onClose, props.config],
+    [props.onClose, configObject],
   );
 
   return (
     <ConfigEditor
       header="TypeScript Config"
       options={tsConfigOptions}
-      values={props.config ?? {}}
-      jsonField="compilerOptions"
+      values={configObject ?? {}}
       isOpen={props.isOpen}
       onClose={onClose}
     />
diff --git a/packages/website/src/components/config/utils.ts b/packages/website/src/components/config/utils.ts
new file mode 100644
index 000000000000..9ee188b6152e
--- /dev/null
+++ b/packages/website/src/components/config/utils.ts
@@ -0,0 +1,86 @@
+import type { CompilerFlags, RulesRecord } from '@site/src/components/types';
+
+import { parse } from 'json5';
+import { isRecord } from '@site/src/components/ast/utils';
+
+export interface OptionDeclarations {
+  name: string;
+  type?: unknown;
+  category?: { message: string };
+  description?: { message: string };
+}
+
+export function parseESLintRC(code?: string): RulesRecord {
+  if (code) {
+    try {
+      const parsed: unknown = parse(code);
+      if (isRecord(parsed) && 'rules' in parsed && isRecord(parsed.rules)) {
+        return parsed.rules as RulesRecord;
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }
+  return {};
+}
+
+export function parseTSConfig(code?: string): CompilerFlags {
+  if (code) {
+    try {
+      const parsed: unknown = parse(code);
+      if (
+        isRecord(parsed) &&
+        'compilerOptions' in parsed &&
+        isRecord(parsed.compilerOptions)
+      ) {
+        return parsed.compilerOptions as CompilerFlags;
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }
+  return {};
+}
+
+export function toJsonConfig(cfg: unknown, prop: string): string {
+  return JSON.stringify(
+    {
+      [prop]: cfg,
+    },
+    null,
+    2,
+  );
+}
+
+export function getTypescriptOptions(): OptionDeclarations[] {
+  const allowedCategories = [
+    'Command-line Options',
+    'Modules',
+    'Projects',
+    'Compiler Diagnostics',
+    'Editor Support',
+    'Output Formatting',
+    'Watch and Build Modes',
+    'Source Map Options',
+  ];
+
+  // @ts-expect-error: definition is not fully correct
+  return (window.ts.optionDeclarations as OptionDeclarations[]).filter(
+    item =>
+      item.type === 'boolean' &&
+      item.description &&
+      item.category &&
+      !allowedCategories.includes(item.category.message),
+  );
+}
+
+export const defaultTsConfig = toJsonConfig(
+  {
+    strictNullChecks: true,
+  },
+  'compilerOptions',
+);
+
+export const defaultEslintConfig = toJsonConfig({}, 'rules');
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index 0c8f75404098..4ef26784f9da 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -1,15 +1,34 @@
-import React, { useMemo } from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import type Monaco from 'monaco-editor';
-import { useEffect, useRef, useState } from 'react';
 import type { SandboxInstance } from './useSandboxServices';
 import type { CommonEditorProps } from './types';
+import type { TabType } from '../types';
 import type { WebLinter } from '../linter/WebLinter';
 
 import { debounce } from '../lib/debounce';
-import { lintCode, LintCodeAction } from '../linter/lintCode';
 import { createProvideCodeActions } from './createProvideCodeActions';
-import { createCompilerOptions } from '@site/src/components/editor/config';
-import { parseMarkers } from '../linter/utils';
+import {
+  createCompilerOptions,
+  getEslintSchema,
+  getTsConfigSchema,
+} from './config';
+import {
+  parseMarkers,
+  parseLintResults,
+  LintCodeAction,
+} from '../linter/utils';
+import {
+  defaultEslintConfig,
+  defaultTsConfig,
+  parseESLintRC,
+  parseTSConfig,
+} from '../config/utils';
 
 export interface LoadedEditorProps extends CommonEditorProps {
   readonly main: typeof Monaco;
@@ -19,6 +38,8 @@ export interface LoadedEditorProps extends CommonEditorProps {
 
 export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   code,
+  tsconfig,
+  eslintrc,
   darkTheme,
   decoration,
   jsx,
@@ -29,95 +50,148 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   onMarkersChange,
   onChange,
   onSelect,
-  rules,
   sandboxInstance,
   showAST,
   sourceType,
-  tsConfig,
   webLinter,
+  activeTab,
 }) => {
   const [decorations, setDecorations] = useState<string[]>([]);
-  const fixes = useRef(new Map<string, LintCodeAction[]>()).current;
+  const codeActions = useRef(new Map<string, LintCodeAction[]>()).current;
+  const [tabs] = useState<Record<TabType, Monaco.editor.ITextModel>>(() => {
+    const tabsDefault = {
+      code: sandboxInstance.editor.getModel()!,
+      tsconfig: sandboxInstance.monaco.editor.createModel(
+        defaultTsConfig,
+        'json',
+        sandboxInstance.monaco.Uri.file('./tsconfig.json'),
+      ),
+      eslintrc: sandboxInstance.monaco.editor.createModel(
+        defaultEslintConfig,
+        'json',
+        sandboxInstance.monaco.Uri.file('./.eslintrc'),
+      ),
+    };
+    tabsDefault.code.updateOptions({ tabSize: 2, insertSpaces: true });
+    tabsDefault.eslintrc.updateOptions({ tabSize: 2, insertSpaces: true });
+    tabsDefault.tsconfig.updateOptions({ tabSize: 2, insertSpaces: true });
+    return tabsDefault;
+  });
 
-  useEffect(() => {
-    const config = createCompilerOptions(jsx, tsConfig);
+  const updateMarkers = useCallback(() => {
+    const model = sandboxInstance.editor.getModel()!;
+    const markers = sandboxInstance.monaco.editor.getModelMarkers({
+      resource: model.uri,
+    });
+    onMarkersChange(parseMarkers(markers, codeActions, model));
+  }, []);
 
-    webLinter.updateOptions(config);
+  useEffect(() => {
+    const config = createCompilerOptions(jsx, parseTSConfig(tsconfig));
+    webLinter.updateCompilerOptions(config);
     sandboxInstance.setCompilerSettings(config);
-  }, [
-    jsx,
-    sandboxInstance,
-    webLinter,
-    JSON.stringify(tsConfig) /* todo: better way? */,
-  ]);
+  }, [jsx, tsconfig]);
+
+  useEffect(() => {
+    webLinter.updateRules(parseESLintRC(eslintrc));
+  }, [eslintrc]);
+
+  useEffect(() => {
+    sandboxInstance.editor.setModel(tabs[activeTab]);
+    updateMarkers();
+  }, [activeTab]);
 
   useEffect(
     debounce(() => {
       // eslint-disable-next-line no-console
       console.info('[Editor] linting triggered');
 
-      const [markers, fatalMessage, codeActions] = lintCode(
-        webLinter,
-        code,
-        rules,
-        jsx,
-        sourceType,
-      );
-      fixes.clear();
-      for (const codeAction of codeActions) {
-        fixes.set(codeAction[0], codeAction[1]);
-      }
+      webLinter.updateParserOptions(jsx, sourceType);
+
+      const messages = webLinter.lint(code);
+
+      const markers = parseLintResults(messages, codeActions);
 
       sandboxInstance.monaco.editor.setModelMarkers(
-        sandboxInstance.editor.getModel()!,
-        sandboxInstance.editor.getId(),
+        tabs.code,
+        'eslint',
         markers,
       );
 
-      if (fatalMessage) {
-        setDecorations(
-          sandboxInstance.editor.deltaDecorations(decorations, []),
-        );
+      // fallback when event is not preset, ts < 4.0.5
+      if (!sandboxInstance.monaco.editor.onDidChangeMarkers) {
+        updateMarkers();
       }
 
-      onEsASTChange(fatalMessage ?? webLinter.storedAST ?? '');
-      onTsASTChange(fatalMessage ?? webLinter.storedTsAST ?? '');
-      onScopeChange(fatalMessage ?? webLinter.storedScope ?? '');
+      onEsASTChange(webLinter.storedAST);
+      onTsASTChange(webLinter.storedTsAST);
+      onScopeChange(webLinter.storedScope);
       onSelect(sandboxInstance.editor.getPosition());
     }, 500),
-    [code, jsx, sandboxInstance, rules, sourceType, tsConfig, webLinter],
+    [code, jsx, tsconfig, eslintrc, sourceType, webLinter],
   );
 
   useEffect(() => {
+    // configure the JSON language support with schemas and schema associations
+    sandboxInstance.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [
+        {
+          uri: 'eslint-schema.json', // id of the first schema
+          fileMatch: [tabs.eslintrc.uri.toString()], // associate with our model
+          schema: getEslintSchema(webLinter.ruleNames),
+        },
+        {
+          uri: 'ts-schema.json', // id of the first schema
+          fileMatch: [tabs.tsconfig.uri.toString()], // associate with our model
+          schema: getTsConfigSchema(),
+        },
+      ],
+    });
+
     const subscriptions = [
       main.languages.registerCodeActionProvider(
         'typescript',
-        createProvideCodeActions(fixes),
+        createProvideCodeActions(codeActions),
       ),
       sandboxInstance.editor.onDidChangeCursorPosition(
         debounce(() => {
-          const position = sandboxInstance.editor.getPosition();
-          if (position) {
-            // eslint-disable-next-line no-console
-            console.info('[Editor] updating cursor', position);
-            onSelect(position);
+          if (sandboxInstance.editor.getModel() === tabs.code) {
+            const position = sandboxInstance.editor.getPosition();
+            if (position) {
+              // eslint-disable-next-line no-console
+              console.info('[Editor] updating cursor', position);
+              onSelect(position);
+            }
           }
         }, 150),
       ),
-      sandboxInstance.editor.onDidChangeModelContent(
+      tabs.eslintrc.onDidChangeContent(
         debounce(() => {
-          onChange(sandboxInstance.getModel().getValue());
+          onChange({ eslintrc: tabs.eslintrc.getValue() });
         }, 500),
       ),
-      sandboxInstance.monaco.editor.onDidChangeMarkers(() => {
-        const markers = sandboxInstance.monaco.editor.getModelMarkers({});
-        onMarkersChange(parseMarkers(markers, fixes, sandboxInstance.editor));
+      tabs.tsconfig.onDidChangeContent(
+        debounce(() => {
+          onChange({ tsconfig: tabs.tsconfig.getValue() });
+        }, 500),
+      ),
+      tabs.code.onDidChangeContent(
+        debounce(() => {
+          onChange({ code: tabs.code.getValue() });
+        }, 500),
+      ),
+      // may not be defined in ts < 4.0.5
+      sandboxInstance.monaco.editor.onDidChangeMarkers?.(() => {
+        updateMarkers();
       }),
     ];
 
     return (): void => {
       for (const subscription of subscriptions) {
-        subscription.dispose();
+        if (subscription) {
+          subscription.dispose();
+        }
       }
     };
   }, []);
@@ -138,47 +212,66 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   });
 
   useEffect(() => {
-    const model = sandboxInstance.editor.getModel()!;
-    const modelValue = model.getValue();
-    if (modelValue === code) {
-      return;
+    if (code !== tabs.code.getValue()) {
+      tabs.code.applyEdits([
+        {
+          range: tabs.code.getFullModelRange(),
+          text: code,
+        },
+      ]);
+    }
+  }, [code]);
+
+  useEffect(() => {
+    if (tsconfig !== tabs.tsconfig.getValue()) {
+      tabs.tsconfig.applyEdits([
+        {
+          range: tabs.tsconfig.getFullModelRange(),
+          text: tsconfig,
+        },
+      ]);
+    }
+  }, [tsconfig]);
+
+  useEffect(() => {
+    if (eslintrc !== tabs.eslintrc.getValue()) {
+      tabs.eslintrc.applyEdits([
+        {
+          range: tabs.eslintrc.getFullModelRange(),
+          text: eslintrc,
+        },
+      ]);
     }
-    // eslint-disable-next-line no-console
-    console.info('[Editor] updating editor model');
-    sandboxInstance.editor.executeEdits(modelValue, [
-      {
-        range: model.getFullModelRange(),
-        text: code,
-      },
-    ]);
-  }, [code, sandboxInstance]);
+  }, [eslintrc]);
 
   useEffect(() => {
     sandboxInstance.monaco.editor.setTheme(darkTheme ? 'vs-dark' : 'vs-light');
   }, [darkTheme, sandboxInstance]);
 
   useEffect(() => {
-    setDecorations(
-      sandboxInstance.editor.deltaDecorations(
-        decorations,
-        decoration && showAST
-          ? [
-              {
-                range: new sandboxInstance.monaco.Range(
-                  decoration.start.line,
-                  decoration.start.column + 1,
-                  decoration.end.line,
-                  decoration.end.column + 1,
-                ),
-                options: {
-                  inlineClassName: 'myLineDecoration',
-                  stickiness: 1,
+    if (sandboxInstance.editor.getModel() === tabs.code) {
+      setDecorations(
+        sandboxInstance.editor.deltaDecorations(
+          decorations,
+          decoration && showAST
+            ? [
+                {
+                  range: new sandboxInstance.monaco.Range(
+                    decoration.start.line,
+                    decoration.start.column + 1,
+                    decoration.end.line,
+                    decoration.end.column + 1,
+                  ),
+                  options: {
+                    inlineClassName: 'myLineDecoration',
+                    stickiness: 1,
+                  },
                 },
-              },
-            ]
-          : [],
-      ),
-    );
+              ]
+            : [],
+        ),
+      );
+    }
   }, [decoration, sandboxInstance, showAST]);
 
   return null;
diff --git a/packages/website/src/components/editor/config.ts b/packages/website/src/components/editor/config.ts
index 82486e625480..679baa8a0f22 100644
--- a/packages/website/src/components/editor/config.ts
+++ b/packages/website/src/components/editor/config.ts
@@ -1,4 +1,6 @@
 import type Monaco from 'monaco-editor';
+import type { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
+import { getTypescriptOptions } from '../config/utils';
 
 export function createCompilerOptions(
   jsx = false,
@@ -6,7 +8,6 @@ export function createCompilerOptions(
 ): Monaco.languages.typescript.CompilerOptions {
   return {
     noResolve: true,
-    lib: ['es2021', 'esnext'],
     // ts and monaco has different type as monaco types are not changing base on ts version
     target: window.ts.ScriptTarget.ESNext as number,
     module: window.ts.ModuleKind.ESNext as number,
@@ -14,3 +15,63 @@ export function createCompilerOptions(
     jsx: jsx ? window.ts.JsxEmit.Preserve : window.ts.JsxEmit.None,
   };
 }
+
+export function getEslintSchema(
+  rules: { name: string; description?: string }[],
+): JSONSchema4 {
+  const properties = rules.reduce<Record<string, JSONSchema4>>(
+    (rules, item) => {
+      rules[item.name] = {
+        description: item.description,
+        oneOf: [
+          {
+            type: ['string', 'number'],
+            enum: ['off', 'warn', 'error', 0, 1, 2],
+          },
+          {
+            type: 'array',
+            items: [
+              {
+                type: ['string', 'number'],
+                enum: ['off', 'warn', 'error', 0, 1, 2],
+              },
+            ],
+          },
+        ],
+      };
+      return rules;
+    },
+    {},
+  );
+
+  return {
+    type: 'object',
+    properties: {
+      rules: {
+        type: 'object',
+        properties: properties,
+        additionalProperties: false,
+      },
+    },
+  };
+}
+
+export function getTsConfigSchema(): JSONSchema4 {
+  const properties = getTypescriptOptions().reduce((options, item) => {
+    options[item.name] = {
+      type: item.type,
+      description: item.description!.message,
+    };
+    return options;
+  }, {});
+
+  return {
+    type: 'object',
+    properties: {
+      compilerOptions: {
+        type: 'object',
+        properties: properties,
+      },
+    },
+  };
+}
diff --git a/packages/website/src/components/editor/createProvideCodeActions.ts b/packages/website/src/components/editor/createProvideCodeActions.ts
index 55a3e67ae08b..2239a00459b6 100644
--- a/packages/website/src/components/editor/createProvideCodeActions.ts
+++ b/packages/website/src/components/editor/createProvideCodeActions.ts
@@ -1,6 +1,9 @@
 import type Monaco from 'monaco-editor';
-import type { LintCodeAction } from '../linter/lintCode';
-import { createURI } from '../linter/utils';
+import {
+  createEditOperation,
+  createURI,
+  LintCodeAction,
+} from '../linter/utils';
 
 export function createProvideCodeActions(
   fixes: Map<string, LintCodeAction[]>,
@@ -24,8 +27,6 @@ export function createProvideCodeActions(
       for (const marker of context.markers) {
         const messages = fixes.get(createURI(marker)) ?? [];
         for (const message of messages) {
-          const start = model.getPositionAt(message.fix.range[0]);
-          const end = model.getPositionAt(message.fix.range[1]);
           actions.push({
             title: message.message,
             diagnostics: [marker],
@@ -34,15 +35,7 @@ export function createProvideCodeActions(
               edits: [
                 {
                   resource: model.uri,
-                  edit: {
-                    range: {
-                      startLineNumber: start.lineNumber,
-                      startColumn: start.column,
-                      endLineNumber: end.lineNumber,
-                      endColumn: end.column,
-                    },
-                    text: message.fix.text,
-                  },
+                  edit: createEditOperation(model, message),
                 },
               ],
             },
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
index 86d4230ac4cc..578ef28d00b4 100644
--- a/packages/website/src/components/editor/types.ts
+++ b/packages/website/src/components/editor/types.ts
@@ -1,15 +1,16 @@
 import type Monaco from 'monaco-editor';
-import type { ConfigModel, SelectedRange, ErrorItem } from '../types';
+import type { ConfigModel, SelectedRange, ErrorItem, TabType } from '../types';
 import type { TSESTree } from '@typescript-eslint/utils';
 import type { SourceFile } from 'typescript';
 
 export interface CommonEditorProps extends ConfigModel {
   readonly darkTheme: boolean;
+  readonly activeTab: TabType;
   readonly decoration: SelectedRange | null;
-  readonly onChange: (value: string) => void;
-  readonly onTsASTChange: (value: string | SourceFile) => void;
-  readonly onEsASTChange: (value: string | TSESTree.Program) => void;
-  readonly onScopeChange: (value: string | Record<string, unknown>) => void;
+  readonly onChange: (cfg: Partial<ConfigModel>) => void;
+  readonly onTsASTChange: (value: undefined | SourceFile) => void;
+  readonly onEsASTChange: (value: undefined | TSESTree.Program) => void;
+  readonly onScopeChange: (value: undefined | Record<string, unknown>) => void;
   readonly onMarkersChange: (value: ErrorItem[]) => void;
   readonly onSelect: (position: Monaco.Position | null) => void;
 }
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
index b6014a8312a1..1276fc38f87d 100644
--- a/packages/website/src/components/editor/useSandboxServices.ts
+++ b/packages/website/src/components/editor/useSandboxServices.ts
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
 import type Monaco from 'monaco-editor';
-import type { TSESLint } from '@typescript-eslint/utils';
 import type { RuleDetails } from '../types';
 import type {
   createTypeScriptSandbox,
@@ -26,7 +25,6 @@ export interface SandboxServicesProps {
 export type SandboxInstance = ReturnType<typeof createTypeScriptSandbox>;
 
 export interface SandboxServices {
-  fixes: Map<string, TSESLint.Linter.LintMessage>;
   main: typeof Monaco;
   sandboxInstance: SandboxInstance;
   webLinter: WebLinter;
@@ -46,7 +44,6 @@ export const useSandboxServices = (
   }, [props.ts, loadedTs]);
 
   useEffect(() => {
-    const fixes = new Map<string, TSESLint.Linter.LintMessage>();
     let sandboxInstance: SandboxInstance | undefined;
     setLoadedTs(props.ts);
 
@@ -62,6 +59,10 @@ export const useSandboxServices = (
             wordWrap: 'off',
             scrollBeyondLastLine: false,
             smoothScrolling: true,
+            autoIndent: 'full',
+            formatOnPaste: true,
+            formatOnType: true,
+            wrappingIndent: 'same',
           },
           compilerOptions: compilerOptions,
           domID: editorEmbedId,
@@ -76,8 +77,14 @@ export const useSandboxServices = (
           colorMode === 'dark' ? 'vs-dark' : 'vs-light',
         );
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        const libs = ((window.ts as any).libs as string[]) ?? ['esnext'];
+
         const libMap = await sandboxInstance.tsvfs.createDefaultMapFromCDN(
-          sandboxInstance.getCompilerOptions(),
+          {
+            ...sandboxInstance.getCompilerOptions(),
+            lib: libs.filter(item => !item.includes('.')),
+          },
           props.ts,
           true,
           window.ts,
@@ -89,7 +96,6 @@ export const useSandboxServices = (
         props.onLoaded(webLinter.ruleNames, sandboxInstance.supportedVersions);
 
         setServices({
-          fixes,
           main,
           sandboxInstance,
           webLinter,
diff --git a/packages/website/src/components/hooks/useHashState.ts b/packages/website/src/components/hooks/useHashState.ts
index f8b7e1270171..dc2a8a439f71 100644
--- a/packages/website/src/components/hooks/useHashState.ts
+++ b/packages/website/src/components/hooks/useHashState.ts
@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import type { CompilerFlags, ConfigModel, RulesRecord } from '../types';
+import type { ConfigModel } from '../types';
 
 import * as lz from 'lzstring.ts';
 import { shallowEqual } from '../lib/shallowEqual';
+import { toJsonConfig } from '@site/src/components/config/utils';
 
 function writeQueryParam(value: string): string {
   return lz.LZString.compressToEncodedURIComponent(value);
@@ -27,6 +28,19 @@ function readShowAST(value: string | null): 'ts' | 'scope' | 'es' | boolean {
   return Boolean(value);
 }
 
+function readLegacyParam(
+  data: string | null,
+  prop: string,
+): string | undefined {
+  try {
+    return toJsonConfig(JSON.parse(readQueryParam(data, '{}')), prop);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e, data, prop);
+  }
+  return undefined;
+}
+
 const parseStateFromUrl = (hash: string): ConfigModel | undefined => {
   if (!hash) {
     return;
@@ -34,7 +48,26 @@ const parseStateFromUrl = (hash: string): ConfigModel | undefined => {
 
   try {
     const searchParams = new URLSearchParams(hash);
+
+    let eslintrc: string | undefined;
+    if (searchParams.has('eslintrc')) {
+      eslintrc = readQueryParam(searchParams.get('eslintrc'), '');
+    } else if (searchParams.has('rules')) {
+      eslintrc = readLegacyParam(searchParams.get('rules'), 'rules');
+    }
+
+    let tsconfig: string | undefined;
+    if (searchParams.has('tsconfig')) {
+      tsconfig = readQueryParam(searchParams.get('tsconfig'), '');
+    } else if (searchParams.has('tsConfig')) {
+      tsconfig = readLegacyParam(
+        searchParams.get('tsConfig'),
+        'compilerOptions',
+      );
+    }
+
     return {
+      // @ts-expect-error: process.env.TS_VERSION
       ts: (searchParams.get('ts') ?? process.env.TS_VERSION).trim(),
       jsx: searchParams.has('jsx'),
       showAST:
@@ -47,16 +80,8 @@ const parseStateFromUrl = (hash: string): ConfigModel | undefined => {
       code: searchParams.has('code')
         ? readQueryParam(searchParams.get('code'), '')
         : '',
-      rules: searchParams.has('rules')
-        ? (JSON.parse(
-            readQueryParam(searchParams.get('rules'), '{}'),
-          ) as RulesRecord)
-        : undefined,
-      tsConfig: searchParams.has('tsConfig')
-        ? (JSON.parse(
-            readQueryParam(searchParams.get('tsConfig'), '{}'),
-          ) as CompilerFlags)
-        : undefined,
+      eslintrc: eslintrc ?? '',
+      tsconfig: tsconfig ?? '',
     };
   } catch (e) {
     // eslint-disable-next-line no-console
@@ -73,11 +98,11 @@ const writeStateToUrl = (newState: ConfigModel): string => {
       sourceType: newState.sourceType,
       showAST: newState.showAST,
       code: newState.code ? writeQueryParam(newState.code) : undefined,
-      rules: newState.rules
-        ? writeQueryParam(JSON.stringify(newState.rules))
+      eslintrc: newState.eslintrc
+        ? writeQueryParam(newState.eslintrc)
         : undefined,
-      tsConfig: newState.tsConfig
-        ? writeQueryParam(JSON.stringify(newState.tsConfig))
+      tsconfig: newState.tsconfig
+        ? writeQueryParam(newState.tsconfig)
         : undefined,
     })
       .filter(item => item[1])
@@ -116,11 +141,7 @@ function useHashState(
 
   useEffect(() => {
     const newState = { ...state, ...tmpState };
-    if (
-      !shallowEqual(newState, state) ||
-      !shallowEqual(newState.rules, state.rules) ||
-      !shallowEqual(newState.tsConfig, state.tsConfig)
-    ) {
+    if (!shallowEqual(newState, state)) {
       const newHash = writeStateToUrl(newState);
       setState(newState);
       setHash(newHash);
diff --git a/packages/website/src/components/lib/markdown.ts b/packages/website/src/components/lib/markdown.ts
index adb14c8d44a8..2d9c206ab121 100644
--- a/packages/website/src/components/lib/markdown.ts
+++ b/packages/website/src/components/lib/markdown.ts
@@ -14,17 +14,12 @@ export function createSummary(
 }
 
 function createSummaryJson(
-  obj: ConfigModel['rules'] | ConfigModel['tsConfig'],
+  obj: ConfigModel['tsconfig'] | ConfigModel['eslintrc'],
   field: string,
   title: string,
 ): string {
   if (obj && Object.keys(obj).length > 0) {
-    return createSummary(
-      JSON.stringify({ [field]: obj }, null, 2),
-      title,
-      'json',
-      10,
-    );
+    return createSummary(obj, title, 'json', 10);
   }
   return '';
 }
@@ -45,8 +40,8 @@ export function createMarkdown(state: ConfigModel): string {
   return [
     `[Playground](${document.location.toString()})`,
     createSummary(state.code, 'Code', 'ts', 30),
-    createSummaryJson(state.rules, 'rules', 'Eslint config'),
-    createSummaryJson(state.tsConfig, 'compilerOptions', 'TypeScript config'),
+    createSummaryJson(state.eslintrc, 'rules', 'Eslint config'),
+    createSummaryJson(state.tsconfig, 'compilerOptions', 'TypeScript config'),
     genVersions(state),
   ]
     .filter(Boolean)
@@ -59,18 +54,8 @@ export function createMarkdownParams(state: ConfigModel): string {
     title: 'Bug: [rule name here] <short description of the issue>',
     'playground-link': document.location.toString(),
     'repro-code': state.code,
-    'eslint-config':
-      `module.exports = ` +
-      JSON.stringify(
-        { parser: '@typescript-eslint/parser', rules: state.rules },
-        null,
-        2,
-      ),
-    'typescript-config': JSON.stringify(
-      { compilerOptions: state.tsConfig },
-      null,
-      2,
-    ),
+    'eslint-config': `module.exports = ${state.eslintrc ?? '{}'}`,
+    'typescript-config': state.tsconfig ?? '{}',
     versions: genVersions(state),
   };
 
diff --git a/packages/website/src/components/linter/WebLinter.ts b/packages/website/src/components/linter/WebLinter.ts
index 9fbb58a456b3..de29ed72502c 100644
--- a/packages/website/src/components/linter/WebLinter.ts
+++ b/packages/website/src/components/linter/WebLinter.ts
@@ -5,7 +5,6 @@ import type {
   System,
 } from 'typescript';
 import type { TSESLint, TSESTree } from '@typescript-eslint/utils';
-import type { ParserServices } from '@typescript-eslint/utils/dist/ts-estree';
 import type { ParserOptions } from '@typescript-eslint/types';
 import type { LintUtils } from '@typescript-eslint/website-eslint';
 
@@ -22,8 +21,19 @@ export class WebLinter {
   public storedScope?: Record<string, unknown>;
 
   private compilerOptions: CompilerOptions;
+  private readonly parserOptions: ParserOptions = {
+    ecmaFeatures: {
+      jsx: false,
+      globalReturn: false,
+    },
+    ecmaVersion: 'latest',
+    project: ['./tsconfig.json'],
+    sourceType: 'module',
+  };
+
   private linter: TSESLint.Linter;
   private lintUtils: LintUtils;
+  private rules: TSESLint.Linter.RulesRecord = {};
 
   public ruleNames: { name: string; description?: string }[];
 
@@ -52,19 +62,24 @@ export class WebLinter {
     });
   }
 
-  lint(
-    code: string,
-    parserOptions: ParserOptions,
-    rules: TSESLint.Linter.RulesRecord,
-  ): TSESLint.Linter.LintMessage[] {
+  lint(code: string): TSESLint.Linter.LintMessage[] {
     return this.linter.verify(code, {
       parser: PARSER_NAME,
-      parserOptions,
-      rules,
+      parserOptions: this.parserOptions,
+      rules: this.rules,
     });
   }
 
-  updateOptions(options: CompilerOptions = {}): void {
+  updateRules(rules: TSESLint.Linter.RulesRecord): void {
+    this.rules = rules;
+  }
+
+  updateParserOptions(jsx?: boolean, sourceType?: TSESLint.SourceType): void {
+    this.parserOptions.ecmaFeatures!.jsx = jsx ?? false;
+    this.parserOptions.sourceType = sourceType ?? 'module';
+  }
+
+  updateCompilerOptions(options: CompilerOptions = {}): void {
     this.compilerOptions = options;
   }
 
@@ -75,13 +90,17 @@ export class WebLinter {
     const isJsx = eslintOptions?.ecmaFeatures?.jsx ?? false;
     const fileName = isJsx ? '/demo.tsx' : '/demo.ts';
 
+    this.storedAST = undefined;
+    this.storedTsAST = undefined;
+    this.storedScope = undefined;
+
     this.host.writeFile(fileName, code, false);
 
-    const program = window.ts.createProgram(
-      [fileName],
-      this.compilerOptions,
-      this.host,
-    );
+    const program = window.ts.createProgram({
+      rootNames: [fileName],
+      options: this.compilerOptions,
+      host: this.host,
+    });
     const tsAst = program.getSourceFile(fileName)!;
 
     const { estree: ast, astMaps } = this.lintUtils.astConverter(
@@ -103,16 +122,14 @@ export class WebLinter {
     this.storedTsAST = tsAst;
     this.storedScope = scopeManager as unknown as Record<string, unknown>;
 
-    const services: ParserServices = {
-      hasFullTypeInformation: true,
-      program,
-      esTreeNodeToTSNodeMap: astMaps.esTreeNodeToTSNodeMap,
-      tsNodeToESTreeNodeMap: astMaps.tsNodeToESTreeNodeMap,
-    };
-
     return {
       ast,
-      services,
+      services: {
+        hasFullTypeInformation: true,
+        program,
+        esTreeNodeToTSNodeMap: astMaps.esTreeNodeToTSNodeMap,
+        tsNodeToESTreeNodeMap: astMaps.tsNodeToESTreeNodeMap,
+      },
       scopeManager,
       visitorKeys: this.lintUtils.visitorKeys,
     };
diff --git a/packages/website/src/components/linter/lintCode.ts b/packages/website/src/components/linter/lintCode.ts
deleted file mode 100644
index e72fb4edc7da..000000000000
--- a/packages/website/src/components/linter/lintCode.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import type { TSESLint } from '@typescript-eslint/utils';
-import type Monaco from 'monaco-editor';
-import type { WebLinter } from './WebLinter';
-import { createURI, ensurePositiveInt } from './utils';
-
-export interface LintCodeAction {
-  message: string;
-  fix: {
-    range: Readonly<[number, number]>;
-    text: string;
-  };
-}
-
-export type LintCodeActionGroup = [string, LintCodeAction[]];
-
-export function lintCode(
-  linter: WebLinter,
-  code: string,
-  rules: TSESLint.Linter.RulesRecord | undefined,
-  jsx?: boolean,
-  sourceType?: 'module' | 'script',
-): [Monaco.editor.IMarkerData[], string | undefined, LintCodeActionGroup[]] {
-  const messages = linter.lint(
-    code,
-    {
-      ecmaFeatures: {
-        jsx: jsx ?? false,
-        globalReturn: false,
-      },
-      ecmaVersion: 'latest',
-      project: ['./tsconfig.json'],
-      sourceType: sourceType ?? 'module',
-    },
-    rules ?? {},
-  );
-  const markers: Monaco.editor.IMarkerData[] = [];
-  let fatalMessage: string | undefined = undefined;
-
-  const codeActions: LintCodeActionGroup[] = [];
-
-  for (const message of messages) {
-    if (!message.ruleId) {
-      fatalMessage = message.message;
-    }
-    const startLineNumber = ensurePositiveInt(message.line, 1);
-    const startColumn = ensurePositiveInt(message.column, 1);
-    const endLineNumber = ensurePositiveInt(message.endLine, startLineNumber);
-    const endColumn = ensurePositiveInt(message.endColumn, startColumn + 1);
-
-    const marker: Monaco.editor.IMarkerData = {
-      code: message.ruleId ?? 'FATAL',
-      severity: 8, // MarkerSeverity.Error,
-      source: 'ESLint',
-      message: message.message,
-      startLineNumber,
-      startColumn,
-      endLineNumber,
-      endColumn,
-    };
-    const markerUri = createURI(marker);
-
-    const fixes: LintCodeAction[] = [];
-    if (message.fix) {
-      fixes.push({
-        message: `Fix this ${message.ruleId ?? 'unknown'} problem`,
-        fix: message.fix,
-      });
-    }
-    if (message.suggestions) {
-      for (const suggestion of message.suggestions) {
-        fixes.push({
-          message: `${suggestion.desc} (${message.ruleId ?? 'unknown'})`,
-          fix: suggestion.fix,
-        });
-      }
-    }
-    if (fixes.length > 0) {
-      codeActions.push([markerUri, fixes]);
-    }
-    markers.push(marker);
-  }
-
-  return [markers, fatalMessage, codeActions];
-}
diff --git a/packages/website/src/components/linter/utils.ts b/packages/website/src/components/linter/utils.ts
index 924210886b93..7c7056a62821 100644
--- a/packages/website/src/components/linter/utils.ts
+++ b/packages/website/src/components/linter/utils.ts
@@ -1,6 +1,14 @@
 import type Monaco from 'monaco-editor';
 import type { ErrorItem } from '../types';
-import { LintCodeAction } from './lintCode';
+import type { TSESLint } from '@typescript-eslint/utils';
+
+export interface LintCodeAction {
+  message: string;
+  fix: {
+    range: Readonly<[number, number]>;
+    text: string;
+  };
+}
 
 export function ensurePositiveInt(
   value: number | undefined,
@@ -20,13 +28,29 @@ export function createURI(marker: Monaco.editor.IMarkerData): string {
   ].join('|')}]`;
 }
 
+export function createEditOperation(
+  model: Monaco.editor.ITextModel,
+  action: LintCodeAction,
+): { range: Monaco.IRange; text: string } {
+  const start = model.getPositionAt(action.fix.range[0]);
+  const end = model.getPositionAt(action.fix.range[1]);
+  return {
+    text: action.fix.text,
+    range: {
+      startLineNumber: start.lineNumber,
+      startColumn: start.column,
+      endLineNumber: end.lineNumber,
+      endColumn: end.column,
+    },
+  };
+}
+
 export function parseMarkers(
   markers: Monaco.editor.IMarker[],
   fixes: Map<string, LintCodeAction[]>,
-  editor: Monaco.editor.IStandaloneCodeEditor,
+  model: Monaco.editor.ITextModel,
 ): ErrorItem[] {
   return markers.map(marker => {
-    const isTypescript = marker.owner === 'typescript';
     const code =
       typeof marker.code === 'string' ? marker.code : marker.code?.value ?? '';
     const uri = createURI(marker);
@@ -36,27 +60,20 @@ export function parseMarkers(
         return {
           message: item.message,
           fix(): void {
-            const model = editor.getModel()!;
-            const start = model.getPositionAt(item.fix.range[0]);
-            const end = model.getPositionAt(item.fix.range[1]);
-            editor.executeEdits(model.getValue(), [
-              {
-                range: {
-                  startLineNumber: start.lineNumber,
-                  startColumn: start.column,
-                  endLineNumber: end.lineNumber,
-                  endColumn: end.column,
-                },
-                text: item.fix.text,
-              },
-            ]);
+            model.applyEdits([createEditOperation(model, item)]);
           },
         };
       }) ?? [];
 
     return {
-      group: isTypescript ? 'TypeScript' : code,
-      message: (isTypescript ? `TS${code}: ` : '') + marker.message,
+      group:
+        marker.owner === 'eslint'
+          ? code
+          : marker.owner === 'typescript'
+          ? 'TypeScript'
+          : marker.owner,
+      message:
+        (marker.owner !== 'eslint' && code ? `${code}: ` : '') + marker.message,
       location: `${marker.startLineNumber}:${marker.startColumn} - ${marker.endLineNumber}:${marker.endColumn}`,
       severity: marker.severity,
       hasFixers: fixers.length > 0,
@@ -64,3 +81,57 @@ export function parseMarkers(
     };
   });
 }
+
+export function parseLintResults(
+  messages: TSESLint.Linter.LintMessage[],
+  codeActions: Map<string, LintCodeAction[]>,
+): Monaco.editor.IMarkerData[] {
+  const markers: Monaco.editor.IMarkerData[] = [];
+
+  codeActions.clear();
+
+  for (const message of messages) {
+    const startLineNumber = ensurePositiveInt(message.line, 1);
+    const startColumn = ensurePositiveInt(message.column, 1);
+    const endLineNumber = ensurePositiveInt(message.endLine, startLineNumber);
+    const endColumn = ensurePositiveInt(message.endColumn, startColumn + 1);
+
+    const marker: Monaco.editor.IMarkerData = {
+      code: message.ruleId ?? 'FATAL',
+      severity:
+        message.severity === 2
+          ? 8 // MarkerSeverity.Error
+          : 4, // MarkerSeverity.Warning
+      source: 'ESLint',
+      message: message.message,
+      startLineNumber,
+      startColumn,
+      endLineNumber,
+      endColumn,
+    };
+    const markerUri = createURI(marker);
+
+    const fixes: LintCodeAction[] = [];
+    if (message.fix) {
+      fixes.push({
+        message: `Fix this ${message.ruleId ?? 'unknown'} problem`,
+        fix: message.fix,
+      });
+    }
+    if (message.suggestions) {
+      for (const suggestion of message.suggestions) {
+        fixes.push({
+          message: `${suggestion.desc} (${message.ruleId ?? 'unknown'})`,
+          fix: suggestion.fix,
+        });
+      }
+    }
+    if (fixes.length > 0) {
+      codeActions.set(markerUri, fixes);
+    }
+
+    markers.push(marker);
+  }
+
+  return markers;
+}
diff --git a/packages/website/src/components/modals/Modal.module.css b/packages/website/src/components/modals/Modal.module.css
index 694b1b113fc5..a6209dedd4f8 100644
--- a/packages/website/src/components/modals/Modal.module.css
+++ b/packages/website/src/components/modals/Modal.module.css
@@ -24,6 +24,7 @@
   width: calc(var(--ifm-container-width) * 0.7);
   animation-name: animatetop;
   animation-duration: 0.4s;
+  max-width: 95%;
 }
 
 @keyframes animatetop {
diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts
index 54ea437e8b6f..c517353a66bf 100644
--- a/packages/website/src/components/types.ts
+++ b/packages/website/src/components/types.ts
@@ -12,11 +12,13 @@ export interface RuleDetails {
   description?: string;
 }
 
+export type TabType = 'code' | 'tsconfig' | 'eslintrc';
+
 export interface ConfigModel {
   jsx?: boolean;
   sourceType?: SourceType;
-  rules?: RulesRecord;
-  tsConfig?: CompilerFlags;
+  eslintrc: string;
+  tsconfig: string;
   code: string;
   ts: string;
   showAST?: boolean | 'ts' | 'es' | 'scope';