diff --git a/assets/images/help/repository/edit-file-edit-button.png b/assets/images/help/repository/edit-file-edit-button.png
index b721bb9e17..96736953be 100644
Binary files a/assets/images/help/repository/edit-file-edit-button.png and b/assets/images/help/repository/edit-file-edit-button.png differ
diff --git a/assets/images/help/repository/edit-file-edit-dropdown.png b/assets/images/help/repository/edit-file-edit-dropdown.png
new file mode 100644
index 0000000000..35ca7d6115
Binary files /dev/null and b/assets/images/help/repository/edit-file-edit-dropdown.png differ
diff --git a/content/codespaces/the-githubdev-web-based-editor.md b/content/codespaces/the-githubdev-web-based-editor.md
index 2671daa017..934dba38b5 100644
--- a/content/codespaces/the-githubdev-web-based-editor.md
+++ b/content/codespaces/the-githubdev-web-based-editor.md
@@ -2,8 +2,7 @@
 title: The github.dev web-based editor
 intro: 'Use the github.dev {% data variables.product.prodname_serverless %} from your repository or pull request to create and commit changes.'
 versions:
-  fpt: '*'
-  ghec: '*'
+  feature: 'githubdev-editor'
 type: how_to
 miniTocMaxHeadingLevel: 3
 topics:
@@ -37,7 +36,10 @@ You can open any {% data variables.product.prodname_dotcom %} repository in the
 
 - Press `.` while browsing any repository or pull request on {% data variables.product.prodname_dotcom %}.
 - Change the URL from "github.com" to "github.dev".
-  
+- When viewing a file, use the dropdown menu next to {% octicon "pencil" aria-label="The edit icon" %} and select **Open in github.dev**.
+
+  ![Edit file button dropdown menu](/assets/images/help/repository/edit-file-edit-dropdown.png)
+
 ## {% data variables.product.prodname_codespaces %} and the {% data variables.product.prodname_serverless %}
 
 Both the {% data variables.product.prodname_serverless %} and {% data variables.product.prodname_codespaces %} allow you to edit your code straight from your repository. However, both have slightly different benefits, depending on your use case.
diff --git a/data/features/githubdev-editor.yml b/data/features/githubdev-editor.yml
new file mode 100644
index 0000000000..78af2427c1
--- /dev/null
+++ b/data/features/githubdev-editor.yml
@@ -0,0 +1,5 @@
+# Reference: #4918, #7438.
+# Documentation for the github.dev web-based editor
+versions:
+  fpt: '*'
+  ghec: '*'
diff --git a/data/reusables/repositories/edit-file.md b/data/reusables/repositories/edit-file.md
index 92969a242b..4680770689 100644
--- a/data/reusables/repositories/edit-file.md
+++ b/data/reusables/repositories/edit-file.md
@@ -1,2 +1,13 @@
 1. In the upper right corner of the file view, click {% octicon "pencil" aria-label="The edit icon" %} to open the file editor.
-![Edit file button](/assets/images/help/repository/edit-file-edit-button.png)
+
+   ![Edit file button](/assets/images/help/repository/edit-file-edit-button.png)
+
+   {% ifversion githubdev-editor -%}
+   {% note %}
+
+   **Note:** Instead of editing and committing the file using the default file editor, you can optionally choose to use the [github.dev code editor](/codespaces/the-githubdev-web-based-editor) by clicking the dropdown menu next to {% octicon "pencil" aria-label="The edit icon" %} and selecting **Open in github.dev**.
+
+   ![Edit file button dropdown](/assets/images/help/repository/edit-file-edit-dropdown.png)
+
+   {% endnote %}
+   {%- endif %}