diff --git a/packages/website-eslint/package.json b/packages/website-eslint/package.json
index 2883fd831f9d..70c07d7b35fc 100644
--- a/packages/website-eslint/package.json
+++ b/packages/website-eslint/package.json
@@ -20,10 +20,10 @@
     "@typescript-eslint/utils": "5.18.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-commonjs": "^21.0.3",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/pluginutils": "^4.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/pluginutils": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "5.18.0",
     "@typescript-eslint/parser": "5.18.0",
     "@typescript-eslint/scope-manager": "5.18.0",
diff --git a/packages/website-eslint/src/linter/linter.js b/packages/website-eslint/src/linter/linter.js
index 6d88c341f9c0..06a4db0d3fb2 100644
--- a/packages/website-eslint/src/linter/linter.js
+++ b/packages/website-eslint/src/linter/linter.js
@@ -5,12 +5,14 @@ import rules from '@typescript-eslint/eslint-plugin/dist/rules';
 
 const PARSER_NAME = '@typescript-eslint/parser';
 
-export function loadLinter(libs, compilerOptions) {
+export function loadLinter(libs, options) {
   const linter = new Linter();
   let storedAST;
   let storedTsAST;
   let storedScope;
 
+  let compilerOptions = options;
+
   linter.defineParser(PARSER_NAME, {
     parseForESLint(code, eslintOptions) {
       const toParse = parseForESLint(
@@ -45,6 +47,10 @@ export function loadLinter(libs, compilerOptions) {
   return {
     ruleNames: ruleNames,
 
+    updateOptions(options) {
+      compilerOptions = options || {};
+    },
+
     getScope() {
       return storedScope;
     },
diff --git a/packages/website-eslint/types/index.d.ts b/packages/website-eslint/types/index.d.ts
index 429de7388fa4..aa5a2a43ed7f 100644
--- a/packages/website-eslint/types/index.d.ts
+++ b/packages/website-eslint/types/index.d.ts
@@ -13,6 +13,7 @@ export interface WebLinter {
   getAst(): TSESTree.Program;
   getTsAst(): SourceFile;
   getScope(): Record<string, unknown>;
+  updateOptions(options?: Record<string, unknown>): void;
 
   lint(
     code: string,
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index 880cf79a8a7a..9e4baa04da5b 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -36,10 +36,29 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   const [decorations, setDecorations] = useState<string[]>([]);
   const fixes = useRef(new Map<string, LintCodeAction>()).current;
 
+  useEffect(() => {
+    const config = {
+      noResolve: true,
+      target: main.languages.typescript.ScriptTarget.ESNext,
+      module: main.languages.typescript.ModuleKind.ESNext,
+      ...tsConfig,
+      jsx: jsx ? main.languages.typescript.JsxEmit.React : undefined,
+    };
+
+    webLinter.updateOptions(config);
+    sandboxInstance.setCompilerSettings(config);
+  }, [
+    jsx,
+    sandboxInstance,
+    webLinter,
+    JSON.stringify(tsConfig) /* todo: better way? */,
+  ]);
+
   useEffect(
     debounce(() => {
       // eslint-disable-next-line no-console
       console.info('[Editor] linting triggered');
+
       const [markers, fatalMessage, codeActions] = lintCode(
         webLinter,
         code,
@@ -69,7 +88,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
       onScopeChange(fatalMessage ?? webLinter.getScope());
       onSelect(sandboxInstance.editor.getPosition());
     }, 500),
-    [code, jsx, sandboxInstance, rules, sourceType, webLinter],
+    [code, jsx, sandboxInstance, rules, sourceType, tsConfig, webLinter],
   );
 
   useEffect(() => {
@@ -137,17 +156,6 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     sandboxInstance.monaco.editor.setTheme(darkTheme ? 'vs-dark' : 'vs-light');
   }, [darkTheme, sandboxInstance]);
 
-  useEffect(() => {
-    sandboxInstance.setCompilerSettings({
-      noResolve: true,
-      strict: true,
-      target: main.languages.typescript.ScriptTarget.ESNext,
-      module: main.languages.typescript.ModuleKind.ESNext,
-      ...tsConfig,
-      jsx: jsx ? main.languages.typescript.JsxEmit.React : undefined,
-    });
-  }, [jsx, sandboxInstance, JSON.stringify(tsConfig) /* todo: better way? */]);
-
   useEffect(() => {
     setDecorations(
       sandboxInstance.editor.deltaDecorations(
diff --git a/packages/website/src/components/editor/lintCode.ts b/packages/website/src/components/editor/lintCode.ts
index dfbedbe13083..b601a6cdcb36 100644
--- a/packages/website/src/components/editor/lintCode.ts
+++ b/packages/website/src/components/editor/lintCode.ts
@@ -5,7 +5,7 @@ import { createURI, ensurePositiveInt } from './utils';
 export interface LintCodeAction {
   message: string;
   fix: {
-    range: [number, number];
+    range: Readonly<[number, number]>;
     text: string;
   };
 }
diff --git a/packages/website/src/components/editor/useSandboxServices.ts b/packages/website/src/components/editor/useSandboxServices.ts
index b64345124b87..9e07408cc3f8 100644
--- a/packages/website/src/components/editor/useSandboxServices.ts
+++ b/packages/website/src/components/editor/useSandboxServices.ts
@@ -48,12 +48,11 @@ export const useSandboxServices = (
 
     sandboxSingleton(props.ts)
       .then(async ({ main, sandboxFactory, ts, linter }) => {
-        const compilerOptions = {
+        const compilerOptions: Monaco.languages.typescript.CompilerOptions = {
           noResolve: true,
-          strict: true,
           target: main.languages.typescript.ScriptTarget.ESNext,
           jsx: props.jsx ? main.languages.typescript.JsxEmit.React : undefined,
-          lib: ['ESNext'],
+          lib: ['esnext'],
           module: main.languages.typescript.ModuleKind.ESNext,
         };
 
diff --git a/packages/website/src/components/types.ts b/packages/website/src/components/types.ts
index 5e1e3a721950..bb774a436f49 100644
--- a/packages/website/src/components/types.ts
+++ b/packages/website/src/components/types.ts
@@ -3,28 +3,7 @@ import type {
   RulesRecord,
 } from '@typescript-eslint/website-eslint';
 
-export interface CompilerFlags extends Record<string, unknown> {
-  isolatedModules?: boolean;
-  allowSyntheticDefaultImports?: boolean;
-  esModuleInterop?: boolean;
-  strict?: boolean;
-  noImplicitAny?: boolean;
-  strictNullChecks?: boolean;
-  strictFunctionTypes?: boolean;
-  strictBindCallApply?: boolean;
-  strictPropertyInitialization?: boolean;
-  noImplicitThis?: boolean;
-  alwaysStrict?: boolean;
-  noUnusedLocals?: boolean;
-  noUnusedParameters?: boolean;
-  noImplicitReturns?: boolean;
-  noFallthroughCasesInSwitch?: boolean;
-  allowUnusedLabels?: boolean;
-  allowUnreachableCode?: boolean;
-  experimentalDecorators?: boolean;
-  emitDecoratorMetadata?: boolean;
-  noLib?: boolean;
-}
+export type CompilerFlags = Record<string, unknown>;
 
 export type SourceType = ParserOptions['sourceType'];
 
diff --git a/packages/website/src/vendor/ds/createDesignSystem.d.ts b/packages/website/src/vendor/ds/createDesignSystem.d.ts
index 542fd4712e42..7a506961350d 100644
--- a/packages/website/src/vendor/ds/createDesignSystem.d.ts
+++ b/packages/website/src/vendor/ds/createDesignSystem.d.ts
@@ -1,6 +1,7 @@
 import type { Sandbox } from '../sandbox';
 import type { DiagnosticRelatedInformation, Node } from 'typescript';
-export declare type LocalStorageOption = {
+
+export declare interface LocalStorageOption {
   blurb: string;
   flag: string;
   display: string;
@@ -8,11 +9,11 @@ export declare type LocalStorageOption = {
   oneline?: true;
   requireRestart?: true;
   onchange?: (newValue: boolean) => void;
-};
-export declare type OptionsListConfig = {
+}
+export declare interface OptionsListConfig {
   style: 'separated' | 'rows';
   requireRestart?: true;
-};
+}
 export declare type DesignSystem = ReturnType<
   ReturnType<typeof createDesignSystem>
 >;
diff --git a/packages/website/src/vendor/playground.d.ts b/packages/website/src/vendor/playground.d.ts
index 763a068e74c5..8de9141b6613 100644
--- a/packages/website/src/vendor/playground.d.ts
+++ b/packages/website/src/vendor/playground.d.ts
@@ -1,15 +1,15 @@
-declare type Sandbox = import('./sandbox').Sandbox;
-declare type Monaco = typeof import('monaco-editor');
 import { PluginUtils } from './pluginUtils';
 import type React from 'react';
 
+declare type Sandbox = import('./sandbox').Sandbox;
+declare type Monaco = typeof import('monaco-editor');
 export { PluginUtils } from './pluginUtils';
-export declare type PluginFactory = {
+export declare interface PluginFactory {
   (
     i: (key: string, components?: any) => string,
     utils: PluginUtils,
   ): PlaygroundPlugin;
-};
+}
 
 /** The interface of all sidebar plugins */
 export interface PlaygroundPlugin {
@@ -42,7 +42,6 @@ export interface PlaygroundPlugin {
   /** An object you can use to keep data around in the scope of your plugin object */
   data?: any;
 }
-
 interface PlaygroundConfig {
   /** Language like "en" / "ja" etc */
   lang: string;
@@ -53,7 +52,6 @@ interface PlaygroundConfig {
   /** Should this playground load up custom plugins from localStorage? */
   supportCustomPlugins: boolean;
 }
-
 export declare const setupPlayground: (
   sandbox: Sandbox,
   monaco: Monaco,
@@ -73,6 +71,7 @@ export declare const setupPlayground: (
     ) => boolean;
     openInTSAST: () => void;
     openInBugWorkbench: () => void;
+    openInVSCodeDev: () => void;
     exportAsTweet: () => void;
   };
   // ui: import("./createUI").UI;
diff --git a/packages/website/src/vendor/sandbox.d.ts b/packages/website/src/vendor/sandbox.d.ts
index 234696b77308..4b3ba86d8aae 100644
--- a/packages/website/src/vendor/sandbox.d.ts
+++ b/packages/website/src/vendor/sandbox.d.ts
@@ -1,6 +1,5 @@
-import { TypeScriptWorker } from './tsWorker'; // import { TypeScriptWorker } from "./tsWorker";
+import { TypeScriptWorker } from './tsWorker';
 // import lzstring from "./vendor/lzstring.min";
-
 import * as tsvfs from './typescript-vfs';
 
 declare type CompilerOptions =
@@ -46,7 +45,6 @@ export declare type SandboxConfig = {
       elementToAppend: HTMLElement;
     }
 );
-
 /** The default settings which we apply a partial over */
 export declare function defaultPlaygroundSettings(): {
   /** The default source code for the playground */
@@ -79,7 +77,6 @@ export declare function defaultPlaygroundSettings(): {
 } & {
   domID: string;
 };
-
 /** Creates a sandbox editor, and returns a set of useful functions and the editor */
 export declare const createTypeScriptSandbox: (
   partialConfig: Partial<SandboxConfig>,
@@ -108,7 +105,8 @@ export declare const createTypeScriptSandbox: (
   };
   /** A list of TypeScript versions you can use with the TypeScript sandbox */
   supportedVersions: readonly [
-    '4.5.0-beta',
+    '4.6.2',
+    '4.5.5',
     '4.4.4',
     '4.3.5',
     '4.2.3',
diff --git a/packages/website/src/vendor/tsWorker.d.ts b/packages/website/src/vendor/tsWorker.d.ts
index ab7099c30c7a..eaa5dd5cabb1 100644
--- a/packages/website/src/vendor/tsWorker.d.ts
+++ b/packages/website/src/vendor/tsWorker.d.ts
@@ -1,100 +1,73 @@
-import ts from 'typescript';
+import * as ts from 'typescript';
 
 export declare class TypeScriptWorker implements ts.LanguageServiceHost {
   private _ctx;
   private _extraLibs;
   private _languageService;
   private _compilerOptions;
-
   constructor(ctx: any, createData: any);
-
   getCompilationSettings(): ts.CompilerOptions;
-
   getScriptFileNames(): string[];
-
   private _getModel;
-
   getScriptVersion(fileName: string): string;
-
   getScriptSnapshot(fileName: string): ts.IScriptSnapshot | undefined;
-
   getScriptKind?(fileName: string): ts.ScriptKind;
-
   getCurrentDirectory(): string;
-
   getDefaultLibFileName(options: ts.CompilerOptions): string;
-
   isDefaultLibFileName(fileName: string): boolean;
-
   private static clearFiles;
-
   getSyntacticDiagnostics(fileName: string): Promise<ts.Diagnostic[]>;
-
   getSemanticDiagnostics(fileName: string): Promise<ts.Diagnostic[]>;
-
   getSuggestionDiagnostics(
     fileName: string,
   ): Promise<ts.DiagnosticWithLocation[]>;
-
   getCompilerOptionsDiagnostics(fileName: string): Promise<ts.Diagnostic[]>;
-
   getCompletionsAtPosition(
     fileName: string,
     position: number,
   ): Promise<ts.CompletionInfo | undefined>;
-
   getCompletionEntryDetails(
     fileName: string,
     position: number,
     entry: string,
   ): Promise<ts.CompletionEntryDetails | undefined>;
-
   getSignatureHelpItems(
     fileName: string,
     position: number,
   ): Promise<ts.SignatureHelpItems | undefined>;
-
   getQuickInfoAtPosition(
     fileName: string,
     position: number,
   ): Promise<ts.QuickInfo | undefined>;
-
   getOccurrencesAtPosition(
     fileName: string,
     position: number,
   ): Promise<ReadonlyArray<ts.ReferenceEntry> | undefined>;
-
   getDefinitionAtPosition(
     fileName: string,
     position: number,
   ): Promise<ReadonlyArray<ts.DefinitionInfo> | undefined>;
-
   getReferencesAtPosition(
     fileName: string,
     position: number,
   ): Promise<ts.ReferenceEntry[] | undefined>;
-
   getNavigationBarItems(fileName: string): Promise<ts.NavigationBarItem[]>;
-
   getFormattingEditsForDocument(
     fileName: string,
     options: ts.FormatCodeOptions,
   ): Promise<ts.TextChange[]>;
-
   getFormattingEditsForRange(
     fileName: string,
     start: number,
     end: number,
     options: ts.FormatCodeOptions,
   ): Promise<ts.TextChange[]>;
-
   getFormattingEditsAfterKeystroke(
     fileName: string,
     postion: number,
     ch: string,
     options: ts.FormatCodeOptions,
   ): Promise<ts.TextChange[]>;
-
   findRenameLocations(
     fileName: string,
     positon: number,
@@ -102,15 +75,12 @@ export declare class TypeScriptWorker implements ts.LanguageServiceHost {
     findInComments: boolean,
     providePrefixAndSuffixTextForRename: boolean,
   ): Promise<readonly ts.RenameLocation[] | undefined>;
-
   getRenameInfo(
     fileName: string,
     positon: number,
     options: ts.RenameInfoOptions,
   ): Promise<ts.RenameInfo>;
-
   getEmitOutput(fileName: string): Promise<ts.EmitOutput>;
-
   getCodeFixesAtPosition(
     fileName: string,
     start: number,
@@ -118,15 +88,12 @@ export declare class TypeScriptWorker implements ts.LanguageServiceHost {
     errorCodes: number[],
     formatOptions: ts.FormatCodeOptions,
   ): Promise<ReadonlyArray<ts.CodeFixAction>>;
-
   updateExtraLibs(extraLibs: IExtraLibs): void;
 }
-
 export interface IExtraLib {
   content: string;
   version: number;
 }
-
 export interface IExtraLibs {
   [path: string]: IExtraLib;
 }
diff --git a/packages/website/src/vendor/typescript-vfs.d.ts b/packages/website/src/vendor/typescript-vfs.d.ts
index 01cd017433e8..5a5db30651af 100644
--- a/packages/website/src/vendor/typescript-vfs.d.ts
+++ b/packages/website/src/vendor/typescript-vfs.d.ts
@@ -5,7 +5,6 @@ declare type LanguageServiceHost = import('typescript').LanguageServiceHost;
 declare type CompilerHost = import('typescript').CompilerHost;
 declare type SourceFile = import('typescript').SourceFile;
 declare type TS = typeof import('typescript');
-
 export interface VirtualTypeScriptEnvironment {
   sys: System;
   languageService: import('typescript').LanguageService;
@@ -19,7 +18,6 @@ export interface VirtualTypeScriptEnvironment {
     replaceTextSpan?: import('typescript').TextSpan,
   ) => void;
 }
-
 /**
  * Makes a virtual copy of the TypeScript environment. This is the main API you want to be using with
  * @typescript/vfs. A lot of the other exposed functions are used by this function to get set up.
@@ -37,7 +35,6 @@ export declare function createVirtualTypeScriptEnvironment(
   compilerOptions?: CompilerOptions,
   customTransformers?: CustomTransformers,
 ): VirtualTypeScriptEnvironment;
-
 /**
  * Grab the list of lib files for a particular target, will return a bit more than necessary (by including
  * the dom) but that's OK
@@ -89,13 +86,11 @@ export declare const createDefaultMapFromCDN: (
   fetcher?: typeof fetch | undefined,
   storer?: Storage | undefined,
 ) => Promise<Map<string, string>>;
-
 /**
  * Creates an in-memory System object which can be used in a TypeScript program, this
  * is what provides read/write aspects of the virtual fs
  */
 export declare function createSystem(files: Map<string, string>): System;
-
 /**
  * Creates a file-system backed System object which can be used in a TypeScript program, you provide
  * a set of virtual files which are prioritised over the FS versions, then a path to the root of your
@@ -106,7 +101,6 @@ export declare function createFSBackedSystem(
   _projectRoot: string,
   ts: TS,
 ): System;
-
 /**
  * Creates an in-memory CompilerHost -which is essentially an extra wrapper to System
  * which works with TypeScript objects - returns both a compiler host, and a way to add new SourceFile
@@ -120,7 +114,6 @@ export declare function createVirtualCompilerHost(
   compilerHost: CompilerHost;
   updateFile: (sourceFile: SourceFile) => boolean;
 };
-
 /**
  * Creates an object which can host a language service against the virtual file-system
  */
@@ -134,5 +127,4 @@ export declare function createVirtualLanguageServiceHost(
   languageServiceHost: LanguageServiceHost;
   updateFile: (sourceFile: import('typescript').SourceFile) => void;
 };
-
 export {};
diff --git a/tools/generate-website-dts.ts b/tools/generate-website-dts.ts
index 4a09e1b65263..0d9356a56aa9 100644
--- a/tools/generate-website-dts.ts
+++ b/tools/generate-website-dts.ts
@@ -77,18 +77,10 @@ async function main(): Promise<void> {
     '/js/sandbox/index.d.ts',
     path.join(vendor, 'sandbox.d.ts'),
     text => {
-      const removeImports = text
-        .replace(/^import/g, '// import')
-        .replace(/\nimport/g, '\n// import');
-      const replaceTSVFS = removeImports.replace(
-        '// import * as tsvfs from "./vendor/typescript-vfs"',
-        "\nimport * as tsvfs from './typescript-vfs'",
-      );
-      const removedLZ = replaceTSVFS.replace(
-        'lzstring: typeof lzstring',
-        '// lzstring: typeof lzstring',
-      );
-      return 'import { TypeScriptWorker } from "./tsWorker";' + removedLZ;
+      return text
+        .replace(/import lzstring/g, '// import lzstring')
+        .replace('"./vendor/typescript-vfs"', "'./typescript-vfs'")
+        .replace('lzstring: typeof lzstring', '// lzstring: typeof lzstring');
     },
   );
 
diff --git a/yarn.lock b/yarn.lock
index 7e4f7e908e63..f2b2467fd7c0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3332,7 +3332,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@rollup/plugin-commonjs@^21.0.1":
+"@rollup/plugin-commonjs@^21.0.3":
   version "21.0.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-21.0.3.tgz#287896c64926ef3d7f0013708dcdcc1223576ef0"
   integrity sha512-ThGfwyvcLc6cfP/MWxA5ACF+LZCvsuhUq7V5134Az1oQWsiC7lNpLT4mJI86WQunK7BYmpUiHmMk2Op6OAHs0g==
@@ -3352,7 +3352,7 @@
   dependencies:
     "@rollup/pluginutils" "^3.0.8"
 
-"@rollup/plugin-node-resolve@^13.0.6":
+"@rollup/plugin-node-resolve@^13.1.3":
   version "13.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-13.1.3.tgz#2ed277fb3ad98745424c1d2ba152484508a92d79"
   integrity sha512-BdxNk+LtmElRo5d06MGY4zoepyrXX1tkzX2hrnPEZ53k78GuOMWLqmJDGIIOPwVRIFZrLQOo+Yr6KtCuLIA0AQ==
@@ -3373,7 +3373,7 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^4.1.1":
+"@rollup/pluginutils@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.0.tgz#a14bbd058fdbba0a5647143b16ed0d86fb60bd08"
   integrity sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==