diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
index 67a748f1..84b2c506 100644
--- a/packages/ui/package-lock.json
+++ b/packages/ui/package-lock.json
@@ -21,7 +21,7 @@
                 "dayjs": "^1.10.7",
                 "dexie": "^3.2.0",
                 "dexie-export-import": "^1.0.3",
-                "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#e40dbea",
+                "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#ed12aba",
                 "insomnia-importers-browser": "github:flawiddsouza/insomnia-importers-browser",
                 "jszip": "^3.7.1",
                 "lodash.get": "^4.4.2",
@@ -32,9 +32,9 @@
                 "quickjs-emscripten-sync": "^1.5.2",
                 "sass": "^1.43.4",
                 "shell-quote": "^1.8.1",
-                "socket.io-client-v2": "npm:socket.io-client@^2",
-                "socket.io-client-v3": "npm:socket.io-client@^3",
-                "socket.io-client-v4": "npm:socket.io-client@^4",
+                "socket.io-client-v2": "npm:socket.io-client@^2.5.0",
+                "socket.io-client-v3": "npm:socket.io-client@^3.1.3",
+                "socket.io-client-v4": "npm:socket.io-client@^4.7.4",
                 "vue": "^3.2.41",
                 "vue-toast-notification": "^3.0.0",
                 "vuex": "^4.0.2"
@@ -5642,8 +5642,8 @@
             }
         },
         "node_modules/httpsnippet-browser": {
-            "version": "1.0.0",
-            "resolved": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#e40dbeaf67b2bd940c214dfb70f66f5fad5d0a60",
+            "version": "1.1.0",
+            "resolved": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#ed12aba08a0621ba007d36dbd568dde3299a85a4",
             "license": "MIT"
         },
         "node_modules/idb": {
@@ -12962,8 +12962,8 @@
             }
         },
         "httpsnippet-browser": {
-            "version": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#e40dbeaf67b2bd940c214dfb70f66f5fad5d0a60",
-            "from": "httpsnippet-browser@github:flawiddsouza/httpsnippet-browser#e40dbea"
+            "version": "git+ssh://git@github.com/flawiddsouza/httpsnippet-browser.git#ed12aba08a0621ba007d36dbd568dde3299a85a4",
+            "from": "httpsnippet-browser@github:flawiddsouza/httpsnippet-browser#ed12aba"
         },
         "idb": {
             "version": "7.1.1",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 641ed37e..e40eac8f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,7 +27,7 @@
         "dayjs": "^1.10.7",
         "dexie": "^3.2.0",
         "dexie-export-import": "^1.0.3",
-        "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#e40dbea",
+        "httpsnippet-browser": "github:flawiddsouza/httpsnippet-browser#ed12aba",
         "insomnia-importers-browser": "github:flawiddsouza/insomnia-importers-browser",
         "jszip": "^3.7.1",
         "lodash.get": "^4.4.2",
diff --git a/packages/ui/src/components/CodeMirrorEditor.vue b/packages/ui/src/components/CodeMirrorEditor.vue
index 5e81580b..9e3c8a54 100644
--- a/packages/ui/src/components/CodeMirrorEditor.vue
+++ b/packages/ui/src/components/CodeMirrorEditor.vue
@@ -56,6 +56,7 @@ function createState(language, documentText, vueInstance) {
         languageFunc = graphqlLanguage
         highlightStyle = codeMirrorSyntaxHighlighting()
     }
+
     return EditorState.create({
         doc: documentText,
         extensions: [
@@ -86,7 +87,8 @@ function createState(language, documentText, vueInstance) {
                 indentWithTab,
                 ...searchKeymap,
                 selectLineKeyMap
-            ])
+            ]),
+            vueInstance.readonly ? EditorState.readOnly.of(true) : EditorState.readOnly.of(false),
         ]
     })
 }
@@ -100,7 +102,11 @@ export default {
         lang: {
             type: String,
             required: true
-        }
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
diff --git a/packages/ui/src/components/Sidebar.vue b/packages/ui/src/components/Sidebar.vue
index 26eae527..c996b6b3 100644
--- a/packages/ui/src/components/Sidebar.vue
+++ b/packages/ui/src/components/Sidebar.vue
@@ -28,6 +28,7 @@
     <PluginManagerModal v-model:showModal="pluginManagerShow" :collection-item="pluginManagerCollectionItem" />
     <SettingsModal v-model:showModal="settingsModalShow" :collection-item="settingsModalCollectionItem" />
     <DuplicateCollectionItemModal v-model:showModal="showDuplicateCollectionItemModal" :collection-item-to-duplicate="collectionItemToDuplicate" />
+    <GenerateCodeModal v-model:showModal="generateCodeModalShow" :collection-item="generateCodeModalCollectionItem" />
 </template>
 
 <script>
@@ -40,6 +41,7 @@ import EnvironmentModal from './modals/EnvironmentModal.vue'
 import PluginManagerModal from './modals/PluginManagerModal.vue'
 import SettingsModal from './modals/SidebarSettingsModal.vue'
 import DuplicateCollectionItemModal from './modals/DuplicateCollectionItemModal.vue'
+import GenerateCodeModal from './modals/GenerateCodeModal.vue'
 import { mapState } from 'vuex'
 import { flattenTree, exportRestfoxCollection } from '@/helpers'
 import { generateCode } from '@/utils/generate-code'
@@ -54,7 +56,8 @@ export default {
         EnvironmentModal,
         PluginManagerModal,
         SettingsModal,
-        DuplicateCollectionItemModal
+        DuplicateCollectionItemModal,
+        GenerateCodeModal,
     },
     data() {
         return {
@@ -78,6 +81,8 @@ export default {
             collectionItemToDuplicate: null,
             pluginManagerCollectionItem: null,
             pluginManagerShow: false,
+            generateCodeModalCollectionItem: null,
+            generateCodeModalShow: false,
         }
     },
     computed: {
@@ -147,6 +152,12 @@ export default {
                         'value': 'Copy as Curl',
                         'icon': 'fa fa-copy'
                     },
+                    {
+                        'type': 'option',
+                        'label': 'Generate Code',
+                        'value': 'Generate Code',
+                        'icon': 'fa fa-code'
+                    },
                     {
                         'type': 'option',
                         'label': 'Plugins',
@@ -171,8 +182,12 @@ export default {
                 ]
 
                 if(this.activeSidebarItemForContextMenu._type === 'socket') {
-                    // Remove Copy as Curl & Plugins
-                    contextMenuOptions = contextMenuOptions.filter(option => option.value !== 'Copy as Curl' && option.value !== 'Plugins')
+                    const optionsToRemove = [
+                        'Copy as Curl',
+                        'Generate Code',
+                        'Plugins'
+                    ]
+                    contextMenuOptions = contextMenuOptions.filter(option => !optionsToRemove.includes(option.value))
                 }
 
                 return contextMenuOptions
@@ -308,6 +323,11 @@ export default {
                 }
             }
 
+            if(clickedSidebarItem === 'Generate Code') {
+                this.generateCodeModalCollectionItem = JSON.parse(JSON.stringify(this.activeSidebarItemForContextMenu))
+                this.generateCodeModalShow = true
+            }
+
             if(clickedSidebarItem === 'New Request') {
                 this.addRequestModalParentId = this.activeSidebarItemForContextMenu ? this.activeSidebarItemForContextMenu._id : null
                 this.addRequestModalShow = true
diff --git a/packages/ui/src/components/modals/GenerateCodeModal.vue b/packages/ui/src/components/modals/GenerateCodeModal.vue
new file mode 100644
index 00000000..95b4393c
--- /dev/null
+++ b/packages/ui/src/components/modals/GenerateCodeModal.vue
@@ -0,0 +1,167 @@
+<template>
+    <div v-if="showModalComp">
+        <modal :title="title" v-model="showModalComp" height="70vh" width="55rem">
+            <div class="generate-code-modal-container">
+                <label>
+                    <div style="font-weight: 500; margin-bottom: 0.25rem;">Select Language</div>
+                    <select v-model="selectedLanguage" @change="selectedLanguageChanged" class="full-width-input">
+                        <option value="" disabled>Select language</option>
+                        <option v-for="target in availableTargets" :value="target.key">{{ target.title }}</option>
+                    </select>
+                </label>
+                <label v-if="selectedLanguage" style="margin-top: 1rem;">
+                    <div style="font-weight: 500; margin-bottom: 0.25rem;">Select Client</div>
+                    <select v-model="selectedClient" @change="selectedClientChanged" class="full-width-input">
+                        <option value="" disabled >Select client</option>
+                        <option v-for="client in selectedLanguageClients" :value="client.key">{{ client.title }}</option>
+                    </select>
+                </label>
+                <div v-if="generatedCode" style="margin-top: 1rem; overflow: auto;">
+                    <div style="font-weight: 500; margin-bottom: 0.25rem;">Code</div>
+                    <CodeMirrorEditor :model-value="generatedCode" lang="javascript" :readonly="true" class="code-editor" />
+                </div>
+            </div>
+            <template #footer>
+                <button class="button" @click="copyCode" :disabled="!generatedCode">Copy Code</button>
+            </template>
+        </modal>
+    </div>
+</template>
+
+<script>
+import Modal from '@/components/Modal.vue'
+import { generateCode, getAvailableTargets } from '@/utils/generate-code'
+import CodeMirrorEditor from '../CodeMirrorEditor.vue'
+import constants from '@/constants'
+
+export default {
+    props: {
+        showModal: Boolean,
+        collectionItem: {
+            type: Object,
+            required: false
+        }
+    },
+    components: {
+        Modal,
+        CodeMirrorEditor,
+    },
+    data() {
+        return {
+            selectedLanguage: '',
+            selectedClient: '',
+            generatedCode: '',
+        }
+    },
+    computed: {
+        title() {
+            let title = 'Generate Code'
+
+            if(this.collectionItem) {
+                title = `${title} — ${this.collectionItem.name}`
+            }
+
+            return title
+        },
+        showModalComp: {
+            get() {
+                return this.showModal
+            },
+            set(value) {
+                this.$emit('update:showModal', value)
+            }
+        },
+        activeWorkspace() {
+            return this.$store.state.activeWorkspace
+        },
+        availableTargets() {
+            return getAvailableTargets()
+        },
+        selectedLanguageClients() {
+            if(this.selectedLanguage) {
+                return this.availableTargets.find(target => target.key === this.selectedLanguage).clients
+            } else {
+                return []
+            }
+        }
+    },
+    watch: {
+        collectionItem() {
+            this.generateCode()
+        }
+    },
+    methods: {
+        selectedLanguageChanged() {
+            this.selectedClient = ''
+            this.generatedCode = ''
+
+            if(this.selectedLanguage) {
+                localStorage.setItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_LANGUAGE, this.selectedLanguage)
+            } else {
+                localStorage.removeItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_LANGUAGE)
+            }
+
+            localStorage.removeItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_CLIENT)
+        },
+        selectedClientChanged() {
+            this.generateCode()
+
+            if(this.selectedClient) {
+                localStorage.setItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_CLIENT, this.selectedClient)
+            } else {
+                localStorage.removeItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_CLIENT)
+            }
+        },
+        async generateCode() {
+            if(this.selectedClient) {
+                try {
+                    const request = JSON.parse(JSON.stringify(this.collectionItem))
+                    const { environment } = await this.$store.dispatch('getEnvironmentForRequest', request)
+                    const code = await generateCode(request, environment, this.selectedLanguage, this.selectedClient)
+                    this.generatedCode = code
+                } catch(e) {
+                    this.generatedCode = e.message
+                }
+            } else {
+                this.generatedCode = ''
+            }
+        },
+        async copyCode() {
+            await navigator.clipboard.writeText(this.generatedCode)
+            this.$toast.success('Copied to clipboard')
+        },
+    },
+    async mounted() {
+        const selectedLanguage = localStorage.getItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_LANGUAGE)
+        const selectedClient = localStorage.getItem(constants.LOCAL_STORAGE_KEY.GENERATE_CODE_CLIENT)
+
+        if(selectedLanguage) {
+            const selectedLanguageFound = this.availableTargets.find(target => target.key === selectedLanguage)
+            if(selectedLanguageFound) {
+                this.selectedLanguage = selectedLanguageFound.key
+            }
+        }
+
+        if(selectedClient) {
+            const selectedClientFound = this.selectedLanguageClients.find(client => client.key === selectedClient)
+            if(selectedClientFound) {
+                this.selectedClient = selectedClientFound.key
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.generate-code-modal-container {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    height: 100%;
+}
+
+.code-editor {
+    height: calc(100% - 1.2rem);
+    overflow-y: auto;
+    border: 1px solid var(--modal-border-color);
+}
+</style>
diff --git a/packages/ui/src/constants.js b/packages/ui/src/constants.js
index 148108e6..b7df31a8 100644
--- a/packages/ui/src/constants.js
+++ b/packages/ui/src/constants.js
@@ -10,6 +10,8 @@ export default {
         DISABLE_PAGE_VIEW_ANALYTICS_TRACKING: 'Restfox-DisablePageViewAnalyticsTracking',
         DISABLE_SSL_VERIFICATION: 'Restfox-DisableSSLVerification',
         ELECTRON_SWITCH_TO_CHROMIUM_FETCH: 'Restfox-ElectronSwitchToChromiumFetch',
+        GENERATE_CODE_LANGUAGE: 'Restfox-GenerateCodeLanguage',
+        GENERATE_CODE_CLIENT: 'Restfox-GenerateCodeClient',
     },
     HOTKEYS: {
         SEND_REQUEST: 'Ctrl + Enter',
diff --git a/packages/ui/src/utils/generate-code.ts b/packages/ui/src/utils/generate-code.ts
index 239bb8e8..3c2af496 100644
--- a/packages/ui/src/utils/generate-code.ts
+++ b/packages/ui/src/utils/generate-code.ts
@@ -1,5 +1,9 @@
 import { createRequestData, substituteEnvironmentVariables } from '@/helpers'
-import { HTTPSnippet } from 'httpsnippet-browser'
+import { HTTPSnippet, availableTargets } from 'httpsnippet-browser'
+
+export function getAvailableTargets() {
+    return availableTargets()
+}
 
 export async function generateCode(request, environment, target: 'shell', clientId: 'curl') {
     const state = {