Skip to main content

Code Editor

AppX generates real, inspectable Expo + React Native code — not a locked visual‑builder export. The built‑in editor lets you read, edit, and create any file directly in the browser, with the same editing experience that powers VS Code.

Reading code and browsing files is always free — you only spend credits when the AI changes code for you.

Opening the Editor​

Click the Code tab in the right panel. You'll see:

  • A file tree with every file in your project.
  • The editor, showing whatever file you select.
  • File actions (rename, delete, new file) via right‑click in the tree.

How a Project Is Laid Out​

AppX apps are built as Expo Router projects, so navigation comes from your file structure. A typical layout:

app/
  (tabs)/
    _layout.tsx       ← Tab navigation
    index.tsx         ← First tab (usually Home)
    explore.tsx       ← Second tab
  _layout.tsx         ← Root layout (fonts, theme, navigation)
  modal.tsx           ← A modal screen, if any
components/
  ui/                 ← Reusable building blocks (Button, Card, Input)
constants/
  colors.ts           ← Color palette
  typography.ts       ← Font sizes and weights
hooks/                ← Shared logic
assets/               ← Fonts and images

The exact shape depends on what AppX built for your app.

Editing Files​

Open any file, make your change, and save with Cmd+S (Mac) or Ctrl+S (Windows/Linux). The preview picks up your change right away.

Safe to edit freely​

  • Component logic and JSX
  • Style values — colors, sizes, spacing
  • Text and copy
  • Business logic in hooks and utilities

Edit with a little care​

  • Import paths — changing them can break bundling.
  • Component names — rename in one place, update every import site.
  • Screen filenames — Expo Router builds routes from filenames, so renaming a file changes its navigation route.

Editor Features​

  • Syntax highlighting for TypeScript, JSX, JSON, and more
  • Auto‑completion for React Native APIs, props, and your own project symbols
  • Inline error underlining for syntax mistakes
  • Find & Replace — Cmd+F / Ctrl+F
  • Multi‑cursor (Alt+click), code folding, and a minimap

Styling​

AppX styles every component with StyleSheet.create and uses lucide-react-native for icons. A typical style block:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: '700',
    color: '#111827',
  },
});

To change a color or size, find the StyleSheet and edit the value. Save, and the preview updates.

Adding Files​

  1. Right‑click a folder in the tree.
  2. Choose New File.
  3. Name it (for example components/Avatar.tsx).

New files inside app/ are automatically registered as routes by Expo Router.

Editor and Chat Together​

You don't have to pick one. A common rhythm:

  1. Chat for the big moves — "Add a settings screen with notification toggles."
  2. Editor for precise tweaks — bump a border radius, fix a color.
  3. Chat again when you want AI help — "This layout breaks on small screens, fix it."

Because the AI always reads your latest files, anything you change by hand is seen in the next chat.

Undo​

The editor supports standard undo/redo within a session (Cmd+Z / Cmd+Shift+Z). To roll back an AI edit, use the confirmation flow instead: reject an edit before applying it, or describe the reversal in chat. See Chat‑Driven Editing.

Export Your Code​

Your code is yours. On paid plans you can export the whole project as a ZIP from Project Settings → Export, then run it locally with npx expo start. You can also keep a GitHub repo in two‑way sync — see GitHub Integration.

Chat‑Driven Editing

Let the AI make changes for you, with a preview before you commit.

GitHub Integration

Sync your project to a real Git repo.