Editing your app's code

You can edit the code for any part of your Base44 app to fine‑tune layout, content, and behavior. This gives you full flexibility to move beyond templates and AI‑generated code so your app matches exactly what you have in mind. Turn on split screen to see your live app preview next to the code editor as you are making your changes, and apply them without switching to a separate preview.

---

​

Accessing your app’s code

Open the code editor from your app’s dashboard. From there, you can see your project files on the left and you can jump straight into them and start editing. To access your app’s code:

1. Go to your app’s dashboard.
2. Click Code.

---

​

Making changes to code files

The code editor organizes your app into folders and files so you can quickly find what you want to change. You can work in any file in your app and make changes including:

• Editing page files in the Pages folder.
• Updating components such as hero sections, feature grids, cards, or footers.
• Changing how your app connects to entities and APIs.
• Adjusting layout and styling classes so sections, typography, and spacing look the way you want.
• Refactoring your app structure by renaming, moving, or reusing components.

If you are comfortable with React, you can import and reuse components across multiple pages, update props and hooks to control data flow and interactivity and add or remove sections in the JSX to change the structure of a page.

---

​

Previewing changes with split screen

Split screen lets you work in the code editor while your app preview stays visible beside it. You see how your edits affect the page without leaving the code view. Because the preview is always on screen, you do not need to move back and forth to a separate Preview mode. You can keep writing code, save when you are ready, and immediately see how the page looks. When you enter split screen, the left side shows the code for the file you are editing and the right side shows the same page or route in a live preview. When you are ready to leave the split screen, click Exit split.

---

​

Saving your code changes

When you change your app’s code, use the bar at the bottom to control what happens to those edits. Every time you make changes to the code either:

• Click Save to keep your changes and refresh the preview with the latest version of the code.
• Click Discard to remove all unsaved edits and go back to the last saved version of the file.

---

​

Finding the code of an element

When you see something in the preview that you want to change, you can select it and go straight to the code that controls it. This helps you move from the visual view to the exact component without searching through files. To select an element and open its code:

1. Make sure split screen is turned on so you can see the preview next to the code editor.
2. At the top of the preview, click the Select Element icon.
3. Move your cursor over the preview and hover the element you want to edit.
4. Click the element.

The code editor focuses on the matching file and scrolls to the relevant section of code, such as a component or JSX block. You can then update the text, layout, or logic for that element and click Save to apply the changes to the preview.

---

​

FAQs

Click a question below to learn more about editing code in your app.