diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
index bfc06491..c2d645e1 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -10657,6 +10657,12 @@
             "en": "Dependencies",
             "tr": "Bağımlılıklar"
         },
+        {
+            "resourceName": "Platform",
+            "key": "App.DeveloperKit.ComponentEditor.Code",
+            "en": "Code",
+            "tr": "Kod"
+        },
         {
             "resourceName": "Platform",
             "key": "App.DeveloperKit.ComponentEditor.Description",
diff --git a/ui/src/components/developerKit/ComponentEditor.tsx b/ui/src/components/developerKit/ComponentEditor.tsx
index 59714746..fd450256 100644
--- a/ui/src/components/developerKit/ComponentEditor.tsx
+++ b/ui/src/components/developerKit/ComponentEditor.tsx
@@ -113,6 +113,24 @@ const ComponentEditor: React.FC = () => {
     }
   }, [id, isEditing, getComponent, isLoaded, parseAndUpdateComponents])
 
+  // Generate component template based on name
+  const generateComponentTemplate = (componentName: string): string => {
+    if (!componentName.trim()) return ''
+
+    // Convert component name to PascalCase if not already
+    const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
+
+    return `const ${pascalCaseName}Component = ({
+  title = "${pascalCaseName}"
+}) => {
+  return (
+    <span>{title}</span>
+  );
+};
+
+export default ${pascalCaseName}Component;`
+  }
+
   const handleSubmit = async (values: typeof initialValues, { setSubmitting }: any) => {
     if (!values.name.trim()) {
       alert('Please enter a component name')
@@ -239,9 +257,9 @@ const ComponentEditor: React.FC = () => {
 
           <Form className="grid grid-cols-1 lg:grid-cols-3 gap-4 pt-2">
             {/* Left Side - Component Settings */}
-            <div className="space-y-4 col-span-1">
+            <div className="space-y-3 col-span-1">
               <div className="bg-white rounded-lg shadow-sm border border-slate-200 p-3">
-                <div className="flex items-center gap-2 mb-4">
+                <div className="flex items-center gap-2 mb-3">
                   <div className="bg-blue-100 p-1.5 rounded-lg">
                     <FaCog className="w-4 h-4 text-blue-600" />
                   </div>
@@ -259,6 +277,27 @@ const ComponentEditor: React.FC = () => {
                       type="text"
                       component={Input}
                       placeholder="e.g., Button, Card, Modal"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        const newName = e.target.value
+                        setFieldValue('name', newName)
+
+                        // Auto-generate code template if this is a new component (not editing)
+                        // and only if the code field is empty or contains the default template
+                        if (!isEditing && newName.trim()) {
+                          const currentCode = values.code.trim()
+                          const isCodeEmpty = !currentCode
+                          const isCodeDefaultTemplate =
+                            currentCode.includes('Component = ({') &&
+                            currentCode.includes('export default') &&
+                            currentCode.includes('<span>{title}</span>')
+
+                          if (isCodeEmpty || isCodeDefaultTemplate) {
+                            const template = generateComponentTemplate(newName)
+                            setFieldValue('code', template)
+                            parseAndUpdateComponents(template)
+                          }
+                        }
+                      }}
                     />
                   </FormItem>
 
@@ -275,6 +314,24 @@ const ComponentEditor: React.FC = () => {
                     />
                   </FormItem>
 
+                  <FormItem
+                    label={translate('::App.DeveloperKit.ComponentEditor.Code')}
+                    invalid={!!(errors.code && touched.code)}
+                    errorMessage={errors.code as string}
+                  >
+                    <Field
+                      name="code"
+                      type="text"
+                      component={Input}
+                      placeholder="React component code goes here"
+                      textArea={true}
+                      rows={5}
+                      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                        setFieldValue('code', e.target.value)
+                      }}
+                    />
+                  </FormItem>
+
                   <FormItem
                     label={translate('::App.DeveloperKit.ComponentEditor.Dependencies')}
                     invalid={!!(errors.dependencies && touched.dependencies)}