diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index 4ef26784f9da..0269c62e7f5f 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -86,6 +86,21 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     onMarkersChange(parseMarkers(markers, codeActions, model));
   }, []);
 
+  useEffect(() => {
+    const newPath = jsx ? '/input.tsx' : '/input.ts';
+    if (tabs.code.uri.path !== newPath) {
+      const newModel = sandboxInstance.monaco.editor.createModel(
+        tabs.code.getValue(),
+        'typescript',
+        sandboxInstance.monaco.Uri.file(newPath),
+      );
+      newModel.updateOptions({ tabSize: 2, insertSpaces: true });
+      sandboxInstance.editor.setModel(newModel);
+      tabs.code.dispose();
+      tabs.code = newModel;
+    }
+  }, [jsx]);
+
   useEffect(() => {
     const config = createCompilerOptions(jsx, parseTSConfig(tsconfig));
     webLinter.updateCompilerOptions(config);