diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index b36a3d1cb6c..c6de45a4c19 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -1151,6 +1151,7 @@ An error message is now displayed if the _Shape_ is not set.
 - https://github.com/eclipse-sirius/sirius-web/issues/2429[#2429] [sirius-web] Ensure that view models can be successfully uploaded by loading the default color palettes
 - https://github.com/eclipse-sirius/sirius-web/issues/2433[#2433] [form] Fix an issue where the readonly property of FlexboxContainerPropertySection was not correctly dispatched to children.
 - https://github.com/eclipse-sirius/sirius-web/issues/3943[#3943] [vs-code] Fix an issue with widget reference
+- https://github.com/eclipse-sirius/sirius-web/issues/3936[#3936] [vs-code] Add FormDescriptionEditor support in vs-code extension
 
 === New Features
 
diff --git a/packages/sirius-web/frontend/sirius-web-application/src/index.ts b/packages/sirius-web/frontend/sirius-web-application/src/index.ts
index 6ea4e667a79..e55e186bc18 100644
--- a/packages/sirius-web/frontend/sirius-web-application/src/index.ts
+++ b/packages/sirius-web/frontend/sirius-web-application/src/index.ts
@@ -16,6 +16,7 @@ export type { SiriusWebApplicationProps } from './application/SiriusWebApplicati
 export { DiagramRepresentationConfiguration } from './diagrams/DiagramRepresentationConfiguration';
 export type { NodeTypeRegistry } from './diagrams/DiagramRepresentationConfiguration.types';
 export { DefaultExtensionRegistryMergeStrategy } from './extension/DefaultExtensionRegistryMergeStrategy';
+export { referenceWidgetDocumentTransform } from './extension/ReferenceWidgetDocumentTransform';
 export type { FooterProps } from './footer/Footer.types';
 export { footerExtensionPoint } from './footer/FooterExtensionPoints';
 export {
diff --git a/vscode-extension/src/view/app/App.tsx b/vscode-extension/src/view/app/App.tsx
index ef9b076e228..7a8d90fdf01 100644
--- a/vscode-extension/src/view/app/App.tsx
+++ b/vscode-extension/src/view/app/App.tsx
@@ -17,6 +17,7 @@ import {
   SelectionContextProvider,
 } from '@eclipse-sirius/sirius-components-core';
 import { DiagramRepresentation } from '@eclipse-sirius/sirius-components-diagrams';
+import { FormDescriptionEditorRepresentation } from '@eclipse-sirius/sirius-components-formdescriptioneditors';
 import { FormRepresentation } from '@eclipse-sirius/sirius-components-forms';
 import { DetailsView } from '@eclipse-sirius/sirius-web-application';
 import { Theme, ThemeProvider } from '@mui/material';
@@ -123,6 +124,14 @@ export const App = ({
         readOnly={false}
       />
     );
+  } else if (representationKind.startsWith('siriusComponents://representation?type=FormDescriptionEditor')) {
+    component = (
+      <FormDescriptionEditorRepresentation
+        editingContextId={state.editingContextId}
+        representationId={state.representationId}
+        readOnly={false}
+      />
+    );
   } else if (representationKind.startsWith('siriusComponents://representation?type=Form')) {
     component = (
       <FormRepresentation
diff --git a/vscode-extension/src/view/app/index.tsx b/vscode-extension/src/view/app/index.tsx
index dfc191cc020..04e4497b802 100644
--- a/vscode-extension/src/view/app/index.tsx
+++ b/vscode-extension/src/view/app/index.tsx
@@ -15,12 +15,12 @@ import { ApolloClient, ApolloProvider, DefaultOptions, HttpLink, InMemoryCache,
 import { WebSocketLink } from '@apollo/client/link/ws';
 import { getMainDefinition } from '@apollo/client/utilities';
 import { ExtensionProvider, ServerContext } from '@eclipse-sirius/sirius-components-core';
+import { referenceWidgetDocumentTransform } from '@eclipse-sirius/sirius-web-application';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { App } from './App';
 import './index.css';
 import { defaultExtensionRegistry } from './registry/DefaultExtensionRegistry';
-import { referenceWidgetDocumentTransform } from './registry/ReferenceWidgetDocumentTransform';
 import { ToastProvider } from './toast/ToastProvider';
 
 declare global {
diff --git a/vscode-extension/src/view/app/registry/ReferenceWidgetDocumentTransform.ts b/vscode-extension/src/view/app/registry/ReferenceWidgetDocumentTransform.ts
deleted file mode 100644
index d0cab0a13a5..00000000000
--- a/vscode-extension/src/view/app/registry/ReferenceWidgetDocumentTransform.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-/*******************************************************************************
- * Copyright (c) 2024 Obeo.
- * This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v2.0
- * which accompanies this distribution, and is available at
- * https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- *
- * Contributors:
- *     Obeo - initial API and implementation
- *******************************************************************************/
-
-import { DocumentTransform } from '@apollo/client';
-import { DocumentNode, FieldNode, FragmentSpreadNode, InlineFragmentNode, Kind, SelectionNode, visit } from 'graphql';
-
-const shouldTransform = (document: DocumentNode) => {
-  return (
-    document.definitions[0] &&
-    document.definitions[0].kind === Kind.OPERATION_DEFINITION &&
-    (document.definitions[0].name?.value === 'detailsEvent' || document.definitions[0].name?.value === 'formEvent')
-  );
-};
-
-const isWidgetFragment = (field: FieldNode) => {
-  if (field.selectionSet && (field.name.value === 'widgets' || field.name.value === 'children')) {
-    const fragmentSpreads = field.selectionSet.selections
-      .filter((selection: SelectionNode): selection is FragmentSpreadNode => selection.kind === Kind.FRAGMENT_SPREAD)
-      .map((fragmentSpread: FragmentSpreadNode) => fragmentSpread.name.value);
-    if (fragmentSpreads.includes('widgetFields')) {
-      return true;
-    }
-  }
-  return false;
-};
-
-const labelField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'label',
-  },
-};
-
-const iconURLField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'iconURL',
-  },
-};
-
-const ownerIdField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'ownerId',
-  },
-};
-
-const descriptionIdField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'descriptionId',
-  },
-};
-
-const ownerKindField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'ownerKind',
-  },
-};
-
-const referenceKindField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'referenceKind',
-  },
-};
-
-const containmentField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'containment',
-  },
-};
-
-const manyValuedField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'manyValued',
-  },
-};
-
-const referenceField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'reference',
-  },
-  selectionSet: {
-    kind: Kind.SELECTION_SET,
-    selections: [ownerKindField, referenceKindField, containmentField, manyValuedField],
-  },
-};
-
-const idField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'id',
-  },
-};
-
-const kindField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'kind',
-  },
-};
-
-const colorField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'color',
-  },
-};
-
-const fontSizeField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'fontSize',
-  },
-};
-
-const italicField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'italic',
-  },
-};
-
-const boldField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'bold',
-  },
-};
-
-const underlineField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'underline',
-  },
-};
-
-const strikeThroughField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'strikeThrough',
-  },
-};
-
-const referenceValuesField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'referenceValues',
-  },
-  selectionSet: {
-    kind: Kind.SELECTION_SET,
-    selections: [idField, labelField, kindField, iconURLField],
-  },
-};
-
-const styleField: SelectionNode = {
-  kind: Kind.FIELD,
-  name: {
-    kind: Kind.NAME,
-    value: 'style',
-  },
-  selectionSet: {
-    kind: Kind.SELECTION_SET,
-    selections: [colorField, fontSizeField, italicField, boldField, underlineField, strikeThroughField],
-  },
-};
-
-export const referenceWidgetDocumentTransform = new DocumentTransform((document) => {
-  if (shouldTransform(document)) {
-    return visit(document, {
-      Field(field) {
-        if (!isWidgetFragment(field)) {
-          return undefined;
-        }
-        const selections = field.selectionSet?.selections ?? [];
-
-        const referenceWidgetInlineFragment: InlineFragmentNode = {
-          kind: Kind.INLINE_FRAGMENT,
-          selectionSet: {
-            kind: Kind.SELECTION_SET,
-            selections: [
-              labelField,
-              iconURLField,
-              ownerIdField,
-              descriptionIdField,
-              referenceField,
-              referenceValuesField,
-              styleField,
-            ],
-          },
-          typeCondition: {
-            kind: Kind.NAMED_TYPE,
-            name: {
-              kind: Kind.NAME,
-              value: 'ReferenceWidget',
-            },
-          },
-        };
-
-        return {
-          ...field,
-          selectionSet: {
-            ...field.selectionSet,
-            selections: [...selections, referenceWidgetInlineFragment],
-          },
-        };
-      },
-    });
-  }
-  return document;
-});