diff --git a/client/src/components/views/ConfigView/CustomVariable.tsx b/client/src/components/views/ConfigView/CustomVariable.tsx
index 7f91c0b5b..d69a98564 100644
--- a/client/src/components/views/ConfigView/CustomVariable.tsx
+++ b/client/src/components/views/ConfigView/CustomVariable.tsx
@@ -1,16 +1,19 @@
-import { Component, ReactNode } from 'react';
+import { Component, ReactNode, isValidElement } from 'react';
 import clsx from 'clsx';
 
 import BasicVariable from './BasicVariable';
 
 import { ReactComponent as ExpandedMoreIcon } from '@/assets/icons/expand_more.svg';
 import {
+  BasicVarState,
   ConfigVar,
   ConfigVarState,
   CustomVar,
   CustomVarState,
 } from '@/store/types/config';
 
+import { ReactComponent as DownloadSVG } from '@/assets/icons/file_download.svg';
+
 interface Props {
   name: string;
   path: string;
@@ -41,6 +44,63 @@ class CustomVariable extends Component<Props, State> {
   }
 
   renderHelper(name: string, children: ReactNode) {
+      const downloadConfig = () => {
+    
+        function downloadBlob(data: string, fileName: string, mime: string) {
+          const a = document.createElement('a');
+          a.style.display = 'none';
+          document.body.appendChild(a);
+    
+          const blob = new Blob([data], { type: mime });
+          const url = window.URL.createObjectURL(blob);
+    
+          a.href = url;
+          a.download = fileName;
+          a.click();
+          window.URL.revokeObjectURL(url);
+          a.remove();
+        }
+
+        if(children == null) return
+        
+        const reactNodeToString = (node: ReactNode): string => {
+          if (Array.isArray(node)) {
+            return node.map(child => reactNodeToString(child)).join('\n');
+          }
+
+          if (node == null) return 'null';
+          if (!isValidElement(node)) return 'null';
+
+          var varType;
+          var varName;
+          var varVal;
+          Object.entries(node.props).map(([key, value]) => {
+              if(key == 'state'){
+                const val = value as BasicVarState;
+                const type = val['__type'];
+                if(type == 'enum'){
+                  varType = val['__enumClass'];
+                }
+                else{
+                  varType = type;
+                }
+                varVal = val['__newValue']!.toString();
+              }
+              if(key == 'name'){
+                varName = value as string;
+              }
+            });
+          
+          return 'public static ' + varType + ' ' + varName + ' = ' + varVal + ';';
+        };
+    
+        downloadBlob(
+          reactNodeToString(children),
+          `${name}.txt`,
+          'text/txt',
+        );
+      };
+
     return (
       <tr className="block">
         <td className="block">
@@ -61,7 +121,15 @@ class CustomVariable extends Component<Props, State> {
             <div className="flex items-center justify-between">
               <h3 className="select-none text-lg">{name}</h3>
             </div>
-          </div>
+            <div className="mr-3 flex items-center space-x-1">
+            <button
+              className={`icon-btn h-8 w-8`}
+              onClick={downloadConfig}
+            >
+              <DownloadSVG className="h-6 w-6" />
+            </button>
+            </div>
+            </div>
           {this.state.expanded && (
             <table>
               <tbody>{children}</tbody>