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 and edit any file directly in the browser.

Opening the Editor​

Open Code in the project's side rail. You'll see:

  • A file tree with every file in your project.
  • The editor, showing whatever file you select.

Ask in chat to add, rename or delete files.

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)
  _layout.tsx         ← Root layout
  +not-found.tsx      ← Shown for an unknown route
components/           ← Reusable components
constants/
  colors.ts           ← Color palette
  theme.ts            ← Fonts, spacing, border radius, shadows
hooks/                ← Shared logic

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).

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 as you type
  • Inline error underlining for syntax mistakes
  • Find & Replace — Cmd+F / Ctrl+F
  • Multi‑cursor (Alt+click) and code folding

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.

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 a dark-mode toggle."
  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."

Undo​

The editor supports standard undo/redo within a session (Cmd+Z / Cmd+Shift+Z). To go back on an AI edit, use Undo on the turn card, or open the project menu → Version history → Restore. See Chat‑Driven Editing.

Export Your Code​

Your code is yours. On every plan you can download the whole project as a ZIP — click Download code in the top bar, then Download code (ZIP) — and run it locally with npx expo start. To keep it in version control, see Put Your AppX Code on GitHub.

Chat‑Driven Editing

Let the AI make the change for you.

Put Your Code on GitHub

Download the ZIP and push it to your own repo.