> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting to know the app editor

> Take a tour of the Base44 app editor: the AI chat, preview, Edit mode, canvas, Dashboard, version history, branches, and publishing, and where to find each.

export const ImageHotspots = ({src, alt, spots = []}) => {
  const [active, setActive] = useState(null);
  const closeTimer = useRef(null);
  const toggle = i => setActive(current => current === i ? null : i);
  const open = i => {
    clearTimeout(closeTimer.current);
    setActive(i);
  };
  const scheduleClose = i => {
    clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setActive(current => current === i ? null : current), 250);
  };
  const accent = '#FF6A00';
  return <div className="not-prose" style={{
    margin: '24px 0'
  }}>
      <div style={{
    position: 'relative',
    borderRadius: 12,
    overflow: 'visible',
    border: '1px solid rgba(0,0,0,0.08)'
  }}>
        <img src={src} alt={alt} style={{
    display: 'block',
    width: '100%',
    height: 'auto',
    borderRadius: 12,
    margin: 0
  }} />
        {spots.map((spot, i) => spot.from === undefined ? null : <div key={`line-${i}`} aria-hidden="true" style={{
    position: 'absolute',
    left: `${spot.x}%`,
    top: `${Math.min(spot.from, spot.y)}%`,
    height: `${Math.abs(spot.y - spot.from)}%`,
    width: 2,
    transform: 'translateX(-50%)',
    background: accent,
    zIndex: 10,
    pointerEvents: 'none'
  }} />)}
        {spots.map((spot, i) => {
    const isActive = active === i;
    const cardOnLeft = spot.x > 60;
    const cardAbove = spot.y > 65;
    return <div key={i} style={{
      position: 'absolute',
      left: `${spot.x}%`,
      top: `${spot.y}%`,
      transform: 'translate(-50%, -50%)',
      zIndex: isActive ? 30 : 20
    }} onMouseEnter={() => open(i)} onMouseLeave={() => scheduleClose(i)}>
              <button type="button" aria-label={`${i + 1}. ${spot.title}`} aria-expanded={isActive} onClick={() => toggle(i)} style={{
      width: 'clamp(16px, 1.9vw, 22px)',
      height: 'clamp(16px, 1.9vw, 22px)',
      borderRadius: '50%',
      border: '2px solid #fff',
      background: accent,
      color: '#fff',
      fontSize: 'clamp(9px, 1.1vw, 12px)',
      fontWeight: 700,
      lineHeight: 1,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      boxShadow: isActive ? `0 0 0 6px rgba(255,106,0,0.25)` : '0 1px 4px rgba(0,0,0,0.3)',
      padding: 0
    }}>
                {i + 1}
              </button>
              {isActive && <div style={{
      position: 'absolute',
      [cardOnLeft ? 'right' : 'left']: '100%',
      [cardAbove ? 'bottom' : 'top']: -6,
      [cardOnLeft ? 'paddingRight' : 'paddingLeft']: 10
    }}>
                <div role="tooltip" style={{
      width: 240,
      background: '#fff',
      color: '#1a1a1a',
      border: '1px solid rgba(0,0,0,0.1)',
      borderRadius: 10,
      boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
      padding: '12px 14px',
      fontSize: 14,
      lineHeight: 1.45,
      textAlign: 'left'
    }}>
                  <div style={{
      fontWeight: 600,
      marginBottom: 4
    }}>{spot.title}</div>
                  <div style={{
      color: '#444'
    }}>{spot.text}</div>
                  {spot.href && <a href={spot.href} style={{
      display: 'inline-block',
      marginTop: 8,
      color: accent,
      fontWeight: 600,
      textDecoration: 'none'
    }}>
                      {spot.linkText || 'Learn more'} →
                    </a>}
                </div>
                </div>}
            </div>;
  })}
      </div>

      <ol style={{
    listStyle: 'none',
    padding: 0,
    margin: '16px 0 0',
    display: 'grid',
    gap: 8
  }}>
        {spots.map((spot, i) => <li key={i} style={{
    display: 'flex',
    gap: 10,
    alignItems: 'flex-start',
    margin: 0
  }}>
            <button type="button" onClick={() => toggle(i)} aria-label={`Show ${spot.title} on the screenshot`} style={{
    flex: '0 0 auto',
    width: 22,
    height: 22,
    marginTop: 2,
    borderRadius: '50%',
    border: 'none',
    background: active === i ? accent : 'rgba(255,106,0,0.15)',
    color: active === i ? '#fff' : accent,
    fontSize: 12,
    fontWeight: 700,
    cursor: 'pointer',
    padding: 0
  }}>
              {i + 1}
            </button>
            <span style={{
    fontSize: 15,
    lineHeight: 1.55
  }}>
              <strong>{spot.title}:</strong> {spot.text}
              {spot.href && <>
                  {' '}
                  <a href={spot.href} style={{
    color: accent
  }}>
                    {spot.linkText || 'Learn more'}
                  </a>
                </>}
            </span>
          </li>)}
      </ol>
    </div>;
};

The app editor is where you build your Base44 app. You describe what you want in the AI chat on the left, and your app updates in the preview on the right, so you see every change as it happens. Use this tour to learn what each part of the app editor does and where to find it, then follow the links when you want to go deeper.

***

## At a glance

The app editor has 2 main areas: the AI chat on the left, and your app on the right. The controls you use most sit in the bar above them. Hover over or tap a number to see what each part does.

<ImageHotspots
  src="/images/app-editor-map.png"
  alt="A screenshot of the app editor with the AI chat panel on the left, the app preview on the right, and the top bar above"
  spots={[
{ x: 12.5, y: 86, title: "AI chat", text: "Describe what you want to build or change, and watch the preview update.", href: "#chatting-with-ai" },
{ x: 13.2, y: 9, from: 4.5, title: "Branch", text: "Try changes on a separate copy of your app before you merge them.", href: "#trying-ideas-safely" },
{ x: 20.8, y: 9, from: 4.5, title: "Version history", text: "Go back to an earlier version of your app.", href: "#undoing-changes" },
{ x: 23.3, y: 15, from: 4.5, title: "Hide chat panel", text: "See your app full width, without the chat. Click it again to bring the chat back." },
{ x: 28.1, y: 9, from: 4.5, title: "Preview", text: "See your app as visitors will, and try it out.", href: "#previewing-your-app" },
{ x: 34.2, y: 9, from: 4.5, title: "Dashboard", text: "Manage your app's data, users, settings, and more.", href: "#using-the-dashboard" },
{ x: 40.3, y: 9, from: 4.5, title: "Edit", text: "Change text, colors, fonts, and spacing by hand.", href: "/Building-your-app/Design" },
{ x: 44.2, y: 9, from: 4.5, title: "Canvas", text: "See all your pages at once on one board.", href: "/Building-your-app/Canvas" },
{ x: 65.0, y: 9, from: 4.5, title: "Page field", text: "Open another page or refresh the preview.", href: "/Building-your-app/managing-your-pages", linkText: "Managing your pages" },
{ x: 71.7, y: 9, from: 4.5, title: "Device", text: "Check how your app looks on desktop, tablet, and mobile.", href: "#previewing-your-app" },
{ x: 85.7, y: 9, from: 4.5, title: "Comments", text: "Pin feedback for your collaborators on any page.", href: "/Building-your-app/Commenting-on-your-app" },
{ x: 89.1, y: 15, from: 4.5, title: "Collaborators", text: "See who's building with you, and invite more people.", href: "#working-with-others" },
{ x: 92.4, y: 9, from: 4.5, title: "More actions", text: "Find tools you use less often, like Act as a user and the activity monitor.", href: "#additional-actions" },
{ x: 96.5, y: 15, from: 4.5, title: "Publish", text: "Put your app live.", href: "#publishing-your-app" },
]}
/>

<Tip>
  New to Base44? Start in the AI chat. You can build a whole app just by chatting, and come back to the rest of the app editor when you need it. Nothing you build is live until you click **Publish**, and you can undo any change, so experiment freely.
</Tip>

***

## Chatting with AI

The AI chat on the left is where you build. Describe what you want in plain words, and the AI updates your app. The message box also lets you attach files, choose a model, and set custom instructions. Learn more about [using the AI chat](/Building-your-app/AI-chat-modes).

The AI chat has 2 modes. Switch between them with the mode button in the message box, or press **Cmd+.** (Mac) or **Ctrl+.** (Windows):

* **Build:** The AI changes your app as you chat.
* **Discuss:** Ask questions or plan your next change. The AI doesn't change your code until you approve.

<Frame caption="Choosing between Build and Discuss in the AI chat">
  <img src="https://mintcdn.com/base44/Msn4A99N2xbeBdVC/images/app-editor-chat-modes.png?fit=max&auto=format&n=Msn4A99N2xbeBdVC&q=85&s=c8daea23cd13a90750ff2feb2e1ce71e" alt="A screenshot of the AI chat message box with the mode drop-down open, showing Build and Discuss, outlined" style={{ maxWidth: "420px" }} width="806" height="500" data-path="images/app-editor-chat-modes.png" />
</Frame>

<Tip>
  Not sure how to ask for something? Use **Discuss** to talk it through first, then switch to **Build** when you're ready. Learn more about [writing good prompts](/Getting-Started/Prompt-guide).
</Tip>

***

## Previewing your app

The preview on the right shows your app as the people using it see it. Click through it to test your app as you build.

At the top of the preview, you can:

* **Open another page:** Type a page path in the page field, for example `/home`. Learn more about [managing your pages](/Building-your-app/managing-your-pages).
* **Refresh the preview:** Click the refresh icon at the start of the page field.
* **Check other screen sizes:** Click the device icon at the end of the page field to switch between desktop, tablet, and mobile.
* **Edit by hand:** Click **Edit**, then click any element in your app to change its text, colors, fonts, or spacing without using the AI chat. Learn more about [designing your app](/Building-your-app/Design).
* **See every page at once:** Click the **Canvas** icon to lay out all your pages on one board, add sticky notes and drawings, and send ideas to the AI chat. Learn more about [using the canvas](/Building-your-app/Canvas).

<Frame caption="Selecting an element in Edit mode to open its style options">
  <img src="https://mintcdn.com/base44/Msn4A99N2xbeBdVC/images/app-editor-edit-mode.png?fit=max&auto=format&n=Msn4A99N2xbeBdVC&q=85&s=aa93e083f39530ac1bb265db851af998" alt="A screenshot of Edit mode with a heading selected in the preview, its style toolbar open, and the Edit button outlined" width="1798" height="860" data-path="images/app-editor-edit-mode.png" />
</Frame>

***

## Undoing changes

Every change is saved as a version, so you can always go back. Pick the way that fits what you want to undo:

* **One AI change:** Hover over the message in the chat and click the **Revert** icon under it. Your app goes back to how it was before that message, and later changes are undone too.
* **A change you made by hand:** In **Edit** or **Canvas**, click the undo button in the bar, or press **Cmd+Z** (Mac) or **Ctrl+Z** (Windows).
* **A lot at once:** Click the **Version history** icon above the AI chat to preview any earlier version, restore it to the app editor, or publish it directly while you keep working on your draft.

Learn more about [reverting changes](/Building-your-app/AI-chat-modes#reverting-changes).

***

## Using the Dashboard

Click **Dashboard** at the top of the preview to manage everything behind your app, such as its data, users, domains, and settings. Each section opens from the sidebar on the left. Some sections only appear when your app uses them. For example, **Payments** appears after you connect a payment provider, and **Secrets** appears when your app has backend functions.

<Frame caption="The Dashboard, open on Overview">
  <img src="https://mintcdn.com/base44/Msn4A99N2xbeBdVC/images/app-editor-dashboard.png?fit=max&auto=format&n=Msn4A99N2xbeBdVC&q=85&s=ab3398eaf36f8aa00c365d7e2e212f2b" alt="A screenshot of the app Dashboard open on Overview, with the dashboard sidebar listing every section" width="1440" height="665" data-path="images/app-editor-dashboard.png" />
</Frame>

| Section | What you do there | Learn more |
| - | - | - |
| **Overview** | Check your app's status and who can open it | [App visibility](/Setting-up-your-app/Managing-access#setting-your-app-visibility) |
| **App Users** | Invite people to your app and choose their roles | [Managing access](/Setting-up-your-app/Managing-access) |
| **Data** | View and edit the data your app stores | [Managing your app data](/Building-your-app/Managing-your-app-data) |
| **Analytics** | See how many people visit your app and what they do | [App analytics](/documentation/performance-and-seo/app-analytics) |
| **Marketing** | Improve your SEO and promote your app | [Creating a marketing plan](/promoting-your-app/creating-a-marketing-plan) |
| **Domains** | Change your app's URL or connect a custom domain | [Setting up your domain](/Setting-up-your-app/Setting-up-your-custom-domain) |
| **Integrations** | Connect your app to other services | [Using integrations](/Integrations/Using-integrations) |
| **Security** | Scan your app for security issues and fix them | [Running a security scan](/Setting-up-your-app/running-a-security-scan) |
| **Code** | View and edit your app's code | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Agents** | Add AI agents that work inside your app | [In-app agents](/Building-your-app/AI-agents-for-apps) |
| **Workflows** | Automate tasks that run on a schedule or when something happens | [Creating workflows](/Building-your-app/Creating-workflows) |
| **Emails** | Design the emails your app sends | [Designing emails](/Building-your-app/Designing-emails) |
| **Logs** | Review everything that happens in your app | [Exploring app logs](/Building-your-app/exploring-app-logs) |
| **API** | Connect other tools to your app's data | [Your app's API](/Building-your-app/your-apps-api-page) |
| **Settings** | Change your app's name and general settings, or delete the app | |
| **MCP** | Let AI assistants work with your app | [App MCP](/Integrations/app-mcp) |

<Tip>
  Use the search box at the top of the Dashboard sidebar to jump to a section, a data table, or a connector by name.
</Tip>

***

## Publishing your app

When your app is ready, click **Publish** at the top right to put it live. In the **Publish Your App** panel, you can copy your app's link, choose who can open it with **App visibility**, and [connect a custom domain](/Setting-up-your-app/Setting-up-your-custom-domain).

<Note>
  Your live app only changes when you publish. Keep building in the app editor, then click **Publish** again whenever you want people to see your latest version.
</Note>

***

## Working with others

Click **Add collaborator** (+) next to the avatars at the top right to invite someone to build with you. Everyone sees the same draft, and the avatars show who's in the app editor right now. Use **Comments** at the top of the preview to leave feedback on a specific part of a page. Learn more about [working with collaborators](/Setting-up-your-app/Managing-access#working-with-collaborators) and [commenting on your app](/Building-your-app/Commenting-on-your-app).

<Frame caption="The collaborators menu in the app editor">
  <img src="https://mintcdn.com/base44/Msn4A99N2xbeBdVC/images/app-editor-collaborators.png?fit=max&auto=format&n=Msn4A99N2xbeBdVC&q=85&s=d47480d30a47354eb7aa2ac4bd47b825" alt="A screenshot of the collaborators menu open from the app editor top bar, with Invite collaborators outlined" width="1570" height="640" data-path="images/app-editor-collaborators.png" />
</Frame>

***

## Trying ideas safely

Want to try a redesign or a risky new feature without putting your working app at stake? Build it on a branch. A branch is a separate copy of your app, so you can experiment freely while your main version stays exactly as it is. If you like the result, merge it back in. If not, delete the branch and nothing has changed.

To create one, click **Main** next to your app's name above the AI chat. Learn more about [working with branches](/Building-your-app/working-with-branches).

***

## Additional actions

The **More actions** icon <Icon icon="ellipsis" color="currentColor" /> at the top right holds tools you use less often.

<Frame caption="The More actions menu in the app editor">
  <img src="https://mintcdn.com/base44/Msn4A99N2xbeBdVC/images/app-editor-more-actions.png?fit=max&auto=format&n=Msn4A99N2xbeBdVC&q=85&s=625a255ef90e864511a3e62bc818b76d" alt="A screenshot of the app editor top bar with the More actions menu open and outlined" width="1570" height="760" data-path="images/app-editor-more-actions.png" />
</Frame>

| Action | What it does | Learn more |
| - | - | - |
| **Act as a user** | Preview your app as one of your users to check what they see | [Testing your app as a user](/Setting-up-your-app/Managing-access#testing-your-app-as-a-user) |
| **Testing agent** | Let an AI agent test your app for you | [The testing agent](/documentation/managing-app-data/testing-agent) |
| **GitHub connection** | Sync your app's code with a GitHub repository | [Integrating with GitHub](/documentation/building-your-app/developer-tools#integrating-with-github) |
| **This page's files** | See the code files behind the page you're on, or click **See all files** | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Compare with live code** | See what changed since you last published | [Reverting changes](/Building-your-app/AI-chat-modes#reverting-changes) |
| **Activity monitor** | See what's running in your app right now | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Export project as ZIP** | Download your app's code | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Send to Coding Agent** | Continue building with your own coding agent, such as Claude, ChatGPT, or a local CLI agent. Available on the Builder plan or higher. | [Developer tools](/documentation/building-your-app/developer-tools) |
| **Help center** | Open the Base44 help center | |

***

## Moving around faster

Press **Cmd+K** (Mac) or **Ctrl+K** (Windows) to open the command palette. Search for pages, files, and data, jump straight to an action such as publishing your app or inviting a collaborator, or search the Base44 docs, all without leaving the app editor. The command palette also works on your workspace home page.

<Frame caption="The command palette in the app editor">
  <img src="https://mintcdn.com/base44/Ii_lXe0tG_nK5Sie/images/keyboardcommands.jpg?fit=max&auto=format&n=Ii_lXe0tG_nK5Sie&q=85&s=b62a1a978d21d5eb2c0cd5560bcdd181" alt="The command palette open in the app editor, with search results grouped by type" width="940" height="501" data-path="images/keyboardcommands.jpg" />
</Frame>

These shortcuts work across the app editor:

| Shortcut | What it does |
| - | - |
| **Cmd+K** / **Ctrl+K** | Open the command palette |
| **Cmd+.** / **Ctrl+.** | Switch between Build and Discuss |
| **Cmd+Z** / **Ctrl+Z** | Undo a change in Edit mode or on the canvas |
| **Cmd+Shift+Z** / **Ctrl+Shift+Z** | Redo a change in Edit mode or on the canvas |
| **Enter** | Send your message in the AI chat |
| **Shift+Enter** | Start a new line in your message |

You can swap the Enter and Shift+Enter shortcuts in your [account preferences](/documentation/account-and-billing/managing-your-account). The canvas has its own set of [drawing and layout shortcuts](/Building-your-app/Canvas).

***

## FAQs

Click a question below to learn more about finding your way around the app editor.

<AccordionGroup>
  <Accordion title="Can I use the app editor on my phone?">
    Yes. You can build from your phone's browser by opening [base44.com](https://base44.com) and signing in, or from the Base44 app for iOS and Android. On a phone, your app's preview fills the screen, and you tap **Chat to Edit** to open the AI chat.

    Some features are only available on desktop, including Edit mode, data permissions, editing code, working with APIs, and app templates. Learn more about [using Base44 on mobile](/Building-your-app/Mobile-experience).
  </Accordion>

  <Accordion title="Do I need to save my work?">
    No. Your work in the app editor is kept as you go, and every AI change becomes a version you can return to. Your live app only changes when you click **Publish**.
  </Accordion>

  <Accordion title="Can people see my app before I publish it?">
    No. The preview is only for you and your collaborators. Nobody else can open your app until you publish it, and after that, who can open it depends on your [app visibility](/Setting-up-your-app/Managing-access#setting-your-app-visibility).
  </Accordion>

  <Accordion title="Why can't I see some buttons?">
    What you see depends on your role and your app. For example, people with view-only access don't see **Edit** or the **More actions** menu. Some Dashboard sections only appear once your app uses them, and on smaller windows some controls collapse into menus.
  </Accordion>

  <Accordion title="What should I do if the app editor won't load?">
    Try refreshing the page, clearing your browser cache, turning off browser extensions, or opening Base44 in a private window or another browser. If it still won't load, see [troubleshooting](/Community-and-support/Troubleshooting).
  </Accordion>
</AccordionGroup>

***

## Related topics

Go deeper into the parts of the app editor you use most.

<CardGroup cols={2}>
  <Card title="Using the AI chat" icon="message" href="/Building-your-app/AI-chat-modes">
    Build and Discuss modes, models, Auto approve, and reverting changes.
  </Card>

  <Card title="Designing your app" icon="palette" href="/Building-your-app/Design">
    Change colors, fonts, and layout with Edit mode and themes.
  </Card>

  <Card title="Managing your app data" icon="database" href="/Building-your-app/Managing-your-app-data">
    View, edit, import, and export the data your app stores.
  </Card>

  <Card title="Choosing who can access your app" icon="users" href="/Setting-up-your-app/Managing-access">
    Set visibility, invite users, and add collaborators.
  </Card>
</CardGroup>

<script type="application/ld+json">
  {`{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Can I use the app editor on my phone?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Yes. You can build from your phone's browser by opening base44.com and signing in, or from the Base44 app for iOS and Android. On a phone, your app's preview fills the screen, and you tap Chat to Edit to open the AI chat. Some features are only available on desktop, including Edit mode, data permissions, editing code, working with APIs, and app templates. Learn more about using Base44 on mobile."
        }
      },
      {
        "@type": "Question",
        "name": "Do I need to save my work?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "No. Your work in the app editor is kept as you go, and every AI change becomes a version you can return to. Your live app only changes when you click Publish."
        }
      },
      {
        "@type": "Question",
        "name": "Can people see my app before I publish it?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "No. The preview is only for you and your collaborators. Nobody else can open your app until you publish it, and after that, who can open it depends on your app visibility."
        }
      },
      {
        "@type": "Question",
        "name": "Why can't I see some buttons?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "What you see depends on your role and your app. For example, people with view-only access don't see Edit or the More actions menu. Some Dashboard sections only appear once your app uses them, and on smaller windows some controls collapse into menus."
        }
      },
      {
        "@type": "Question",
        "name": "What should I do if the app editor won't load?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Try refreshing the page, clearing your browser cache, turning off browser extensions, or opening Base44 in a private window or another browser. If it still won't load, see troubleshooting."
        }
      }
    ]
    }`}
</script>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.