diff --git a/packages/project-editor/features/page/page.tsx b/packages/project-editor/features/page/page.tsx
index 03c995b4..b641bc9f 100644
--- a/packages/project-editor/features/page/page.tsx
+++ b/packages/project-editor/features/page/page.tsx
@@ -31,7 +31,12 @@ import {
     isDashboardProject,
     isLVGLProject
 } from "project-editor/project/project-type-traits";
-import { Project, findStyle } from "project-editor/project/project";
+import {
+    NamingConvention,
+    Project,
+    findStyle,
+    getName
+} from "project-editor/project/project";
 
 import type {
     IResizeHandler,
@@ -212,6 +217,20 @@ export class Page extends Flow {
     _lvglObj: number | undefined;
     _lvglUserWidgetOfPageCopy: LVGLUserWidgetWidget;
 
+    get codeIdentifier() {
+        const codeIdentifier = getName(
+            "",
+            this.name,
+            NamingConvention.UnderscoreLowerCase
+        );
+
+        if (codeIdentifier == this.name) {
+            return undefined;
+        }
+
+        return codeIdentifier;
+    }
+
     constructor() {
         super();
 
@@ -296,6 +315,14 @@ export class Page extends Flow {
                 },
                 propertyGridGroup: generalGroup
             },
+            {
+                name: "codeIdentifier",
+                type: PropertyType.String,
+                propertyGridGroup: generalGroup,
+                computed: true,
+                formText: `This identifier will be used in the generated source code in the "Objects" struct. It is different from the "Name" above because in the source code we are following "lowercase with underscore" naming convention.`,
+                disabled: (object: Page) => object.codeIdentifier == undefined
+            },
             {
                 name: "description",
                 type: PropertyType.MultilineText,
diff --git a/packages/project-editor/lvgl/widgets/Base.tsx b/packages/project-editor/lvgl/widgets/Base.tsx
index ba5ab264..8d845391 100644
--- a/packages/project-editor/lvgl/widgets/Base.tsx
+++ b/packages/project-editor/lvgl/widgets/Base.tsx
@@ -36,7 +36,9 @@ import {
     ProjectType,
     findAction,
     findLvglStyle,
-    Project
+    Project,
+    NamingConvention,
+    getName
 } from "project-editor/project/project";
 
 import type {
@@ -527,6 +529,24 @@ export class LVGLWidget extends Widget {
     _xScroll2: number = 0;
     _yScroll2: number = 0;
 
+    get codeIdentifier() {
+        if (!this.identifier) {
+            return undefined;
+        }
+
+        const codeIdentifier = getName(
+            "",
+            this.identifier,
+            NamingConvention.UnderscoreLowerCase
+        );
+
+        if (codeIdentifier == this.identifier) {
+            return undefined;
+        }
+
+        return codeIdentifier;
+    }
+
     static classInfo = makeDerivedClassInfo(Widget.classInfo, {
         enabledInComponentPalette: (projectType: ProjectType) =>
             projectType === ProjectType.LVGL,
@@ -550,6 +570,15 @@ export class LVGLWidget extends Widget {
                 propertyGridGroup: generalGroup,
                 disabled: object => object instanceof LVGLScreenWidget // LVGLScreenWidget is using Page name as identifier
             },
+            {
+                name: "codeIdentifier",
+                type: PropertyType.String,
+                propertyGridGroup: generalGroup,
+                computed: true,
+                formText: `This identifier will be used in the generated source code in the "Objects" struct. It is different from the "Name" above because in the source code we are following "lowercase with underscore" naming convention.`,
+                disabled: (object: LVGLWidget) =>
+                    object.codeIdentifier == undefined
+            },
             {
                 name: "left",
                 type: PropertyType.Number,