diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 236351005e7d287940516f06443a79e34750e50d..f14dd0114bc3bac9988168483dc9defe96eb7ad6 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlButton, GlButtonGroup } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import BlobContent from '~/blob/components/blob_content.vue';
 import BlobHeader from '~/blob/components/blob_header.vue';
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
-import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
+import { isLoggedIn, handleLocationHash, historyReplaceState } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { redirectTo, getLocationHash } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -31,9 +31,11 @@ export default {
     BlobContent,
     GlLoadingIcon,
     GlButton,
+    GlButtonGroup,
     ForkSuggestion,
     WebIdeLink,
     CodeIntelligence,
+    SourceEditor: () => import('~/vue_shared/components/source_editor.vue'),
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
@@ -139,6 +141,8 @@ export default {
       useFallback: false,
       pathLocks: DEFAULT_BLOB_INFO.pathLocks,
       userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+      isEditing: false,
+      hasEdits: false,
     };
   },
   computed: {
@@ -305,9 +309,25 @@ export default {
       const { ideEditPath, editBlobPath } = this.blobInfo;
       redirectTo(target === 'ide' ? ideEditPath : editBlobPath);
     },
+    toggleEditing(action) {
+      if (action.key === 'edit') {
+        historyReplaceState(this.blobInfo.editBlobPath);
+        this.isEditing = true;
+      }
+    },
+    saveEdits() {
+      // TODO: Implement
+    },
+    cancelEdits() {
+      this.isEditing = false;
+      historyReplaceState(this.blobInfo.webPath);
+    },
     setForkTarget(target) {
       this.forkTarget = target;
     },
+    notifyAboutUpdates({ content }) {
+      this.hasEdits = content !== this.blobInfo.rawTextBlob;
+    },
     onCopy() {
       navigator.clipboard.writeText(this.blobInfo.rawTextBlob);
     },
@@ -332,10 +352,9 @@ export default {
       >
         <template #actions>
           <web-ide-link
-            v-if="!blobInfo.archived"
+            v-if="!blobInfo.archived && !isEditing"
             :show-edit-button="!isBinaryFileType"
             class="gl-mr-3"
-            :edit-url="blobInfo.editBlobPath"
             :web-ide-url="blobInfo.ideEditPath"
             :needs-to-fork="showForkSuggestion"
             :show-pipeline-editor-button="Boolean(blobInfo.pipelineEditorPath)"
@@ -347,9 +366,19 @@ export default {
             :user-profile-enable-gitpod-path="currentUser && currentUser.profileEnableGitpodPath"
             is-blob
             disable-fork-modal
+            @click="toggleEditing($event)"
             @edit="editBlob"
           />
 
+          <gl-button-group v-if="isEditing" class="gl-mr-3">
+            <gl-button v-if="hasEdits" category="primary" variant="success" @click="saveEdits">
+              {{ __('Save') }}
+            </gl-button>
+            <gl-button v-else category="primary" variant="info" @click="cancelEdits">
+              {{ __('Cancel') }}
+            </gl-button>
+          </gl-button-group>
+
           <blob-button-group
             v-if="isLoggedIn && !blobInfo.archived"
             :path="path"
@@ -372,26 +401,34 @@ export default {
         :fork-path="forkPath"
         @cancel="setForkTarget(null)"
       />
-      <blob-content
-        v-if="!blobViewer"
-        class="js-syntax-highlight"
-        :rich-viewer="legacyRichViewer"
-        :blob="blobInfo"
-        :content="legacySimpleViewer"
-        :is-raw-content="true"
-        :active-viewer="viewer"
-        :hide-line-numbers="true"
-        :loading="isLoadingLegacyViewer"
-        :data-loading="isRenderingLegacyTextViewer"
-      />
-      <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" @error="onError" />
-      <code-intelligence
-        v-if="blobViewer || legacyViewerLoaded"
-        :code-navigation-path="blobInfo.codeNavigationPath"
-        :blob-path="blobInfo.path"
-        :path-prefix="blobInfo.projectBlobPathRoot"
-        :wrap-text-nodes="glFeatures.highlightJs"
+      <source-editor
+        v-if="isEditing"
+        :value="blobInfo.rawTextBlob"
+        :file-name="path"
+        @input="notifyAboutUpdates({ content: $event })"
       />
+      <template v-else>
+        <blob-content
+          v-if="!blobViewer"
+          class="js-syntax-highlight"
+          :rich-viewer="legacyRichViewer"
+          :blob="blobInfo"
+          :content="legacySimpleViewer"
+          :is-raw-content="true"
+          :active-viewer="viewer"
+          :hide-line-numbers="true"
+          :loading="isLoadingLegacyViewer"
+          :data-loading="isRenderingLegacyTextViewer"
+        />
+        <component :is="blobViewer" v-else :blob="blobInfo" class="blob-viewer" @error="onError" />
+        <code-intelligence
+          v-if="blobViewer || legacyViewerLoaded"
+          :code-navigation-path="blobInfo.codeNavigationPath"
+          :blob-path="blobInfo.path"
+          :path-prefix="blobInfo.projectBlobPathRoot"
+          :wrap-text-nodes="glFeatures.highlightJs"
+        />
+      </template>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
index 28bec63b2448f0d571c41ff652b2851d9685635b..200961af3c44e298ac6783515387e1568eb70441 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -345,6 +345,10 @@ export default {
         dismiss();
       }
     },
+    actionClickHandler({ action }, dismiss) {
+      this.dismissCalloutOnActionClicked(dismiss);
+      this.$emit('click', action);
+    },
   },
   webIdeButtonId: 'web-ide-link',
   PREFERRED_EDITOR_KEY,
@@ -366,7 +370,7 @@ export default {
           :category="isBlob ? 'primary' : 'secondary'"
           :show-action-tooltip="!displayVscodeWebIdeCallout || !shouldShowCallout"
           @select="select"
-          @actionClicked="dismissCalloutOnActionClicked(dismiss)"
+          @actionClicked="actionClickHandler($event, dismiss)"
         />
         <local-storage-sync
           :storage-key="$options.PREFERRED_EDITOR_KEY"