diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 236351005e7d287940516f06443a79e34750e50d..afbb45058b5cd794fa2cf0a12f05fa2e8a530723 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';
@@ -15,6 +15,7 @@ import CodeIntelligence from '~/code_navigation/components/app.vue';
 import LineHighlighter from '~/blob/line_highlighter';
 import blobInfoQuery from 'shared_queries/repository/blob_info.query.graphql';
 import { addBlameLink } from '~/blob/blob_blame_link';
+import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
 import projectInfoQuery from '../queries/project_info.query.graphql';
 import getRefMixin from '../mixins/get_ref';
 import userInfoQuery from '../queries/user_info.query.graphql';
@@ -31,9 +32,11 @@ export default {
     BlobContent,
     GlLoadingIcon,
     GlButton,
+    GlButtonGroup,
     ForkSuggestion,
     WebIdeLink,
     CodeIntelligence,
+    SourceEditor: () => import('~/vue_shared/components/source_editor.vue'),
   },
   mixins: [getRefMixin, glFeatureFlagMixin()],
   inject: {
@@ -139,6 +142,8 @@ export default {
       useFallback: false,
       pathLocks: DEFAULT_BLOB_INFO.pathLocks,
       userPermissions: DEFAULT_BLOB_INFO.userPermissions,
+      isEditing: false,
+      hasEdits: false,
     };
   },
   computed: {
@@ -305,13 +310,35 @@ 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;
+      }
+    },
+    toggleEditingForLine(number) {
+      historyReplaceState(`${this.blobInfo.editBlobPath}#L${number}`);
+      this.isEditing = true;
+      this.$refs.editor.getEditor().highlightLines([number, number]);
+    },
+    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);
     },
   },
+  sourceEditorExtensions: [{ definition: SourceEditorExtension }],
 };
 </script>
 
@@ -332,10 +359,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 +373,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 +408,43 @@ 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"
+        ref="editor"
+        :value="blobInfo.rawTextBlob"
+        :file-name="path"
+        :extensions="$options.sourceEditorExtensions"
+        @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"
+          @editLine="toggleEditingForLine($event)"
+        />
+        <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/source_viewer/components/chunk_deprecated.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
index 28a16cd846a2daab2344ca8e0ae04f72e1d03b21..3939f2eb59285694180abc48f21815bca35a7e6d 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_deprecated.vue
@@ -63,6 +63,10 @@ export default {
       type: String,
       required: true,
     },
+    editPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -114,6 +118,8 @@ export default {
         :content="line"
         :language="language"
         :blame-path="blamePath"
+        :edit-path="editPath"
+        @editLine="$emit('editLine', $event)"
       />
     </div>
     <div v-else-if="!isLoading" class="gl-display-flex gl-text-transparent">
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 1690e666d3c4c8febf6ff70c68095c870385c596..90c1233df1a7c6b98bd881d6d44815d27174b93c 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -23,6 +23,10 @@ export default {
       type: String,
       required: true,
     },
+    editPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     pageSearchString() {
@@ -30,6 +34,11 @@ export default {
       return getPageSearchString(this.blamePath, page);
     },
   },
+  methods: {
+    edit(number) {
+      this.$emit('editLine', number);
+    },
+  },
 };
 </script>
 <template>
@@ -41,6 +50,11 @@ export default {
         class="gl-user-select-none gl-shadow-none! file-line-blame"
         :href="`${blamePath}${pageSearchString}#L${number}`"
       ></a>
+      <a
+        class="gl-user-select-none gl-shadow-none! file-line-edit"
+        :href="`${editPath}#L${number}`"
+        @click.prevent="edit(number)"
+      ></a>
       <a
         :id="`L${number}`"
         class="gl-user-select-none gl-shadow-none! file-line-num"
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
index 26cf45c7570ea2ac7b2c33c72a6bb253f699f80c..335713408f53b63401d3437cc7a2a406f04d6144 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_deprecated.vue
@@ -205,6 +205,8 @@ export default {
       is-first-chunk
       :language="firstChunk.language"
       :blame-path="blob.blamePath"
+      :edit-path="blob.editBlobPath"
+      @editLine="$emit('editLine', $event)"
     />
 
     <gl-loading-icon v-if="isLoading" size="sm" class="gl-my-5" />
@@ -220,8 +222,10 @@ export default {
       :chunk-index="index"
       :language="chunk.language"
       :blame-path="blob.blamePath"
+      :edit-path="blob.editBlobPath"
       :total-chunks="totalChunks"
       @appear="highlightChunk"
+      @editLine="$emit('editLine', $event)"
     />
   </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"
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 02469cf5165d377c1351cd957d9106bf55a3c875..74c33d968fb7428e4820789bbcb408342de051e9 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -142,6 +142,10 @@ $dark-il: #de935f;
     @include line-link($white, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($white, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($dark-main-bg);
   }
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 30d04b4002eff59bf74ce7032142da85e14c0dd6..a8d229ffca1edf9d4115a36c07a16aeb9ce066a5 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -133,6 +133,10 @@ $monokai-gh: #75715e;
     @include line-link($white, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($white, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($monokai-bg);
   }
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 8339d7eff80a822c95ad3b91c8d083047d18cbbf..4221ee5546eded4d614eea0ee5b4f3d9189aab6c 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -32,6 +32,10 @@
     @include line-link($black, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($black, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg;
   }
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 075510e6e5f0f21c5b2832adab65d89417da71af..b291957ef4c4a371c5d86450d1e1d923d126b6e4 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -127,6 +127,9 @@ $solarized-dark-il: #2aa198;
     @include hljs-override('title\\.function', $solarized-dark-nf);
     @include hljs-override('params', $solarized-dark-nb);
 
+  .file-line-action {
+
+  }
   // Line numbers
   .file-line-num {
     @include line-link($white, 'link');
@@ -136,6 +139,10 @@ $solarized-dark-il: #2aa198;
     @include line-link($white, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($white, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($solarized-dark-pre-bg);
   }
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 4e244ed7420b3e8c5a87dda82d09c9e86dc2c149..a94601cb78fa51b006d2f1b410c6a65ca73ef918 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -126,6 +126,10 @@ $solarized-light-il: #2aa198;
     @include line-link($black, 'git');
   }
 
+  .file-line-edit {
+    @include line-link($black, 'pencil');
+  }
+
   .line-links {
     @include line-hover-bg($solarized-light-pre-bg);
   }