Skip to main content

Code editor

Edit your generated code directly in the browser with instant deployment.

Overview​

The built-in code editor lets you:

  • View all generated files
  • Make manual edits
  • See changes deploy automatically
  • Fine-tune AI-generated code

Editor features​

Syntax highlighting​

Support for 20+ languages:

  • JavaScript / TypeScript
  • Python
  • JSON
  • CSS / SCSS
  • Markdown
  • And more

File tree navigation​

  • Platform-organized folders (web/, mobile/, backend/)
  • Click to open files
  • Visual indicators for modified files
  • Expand/collapse folders

Real-time editing​

  • Line numbers
  • Auto-indentation
  • Search and replace
  • Undo/redo

Deploy on save​

When you save changes:

  1. Click "Save & Deploy" - Button appears when you have changes
  2. Changes are committed - Pushed to your GitHub repository
  3. Automatic redeploy - All affected platforms rebuild
  4. Live URL updates - See your changes immediately

Common editing tasks​

Changing styles​

/* src/styles/globals.css */
:root {
  --primary-color: #3b82f6;  /* Change to your brand color */
  --font-family: 'Inter', sans-serif;
}

Modifying components​

// src/components/Button.tsx
export function Button({ children, variant = 'primary' }) {
  return (
    <button className={`btn btn-${variant}`}>
      {children}
    </button>
  );
}

Adding environment variables​

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...

Best practices​

Make small changes​

Edit one file at a time, then save and deploy. This makes it easier to:

  • Identify what broke if something goes wrong
  • Roll back specific changes
  • Track your modifications

Use AI for big changes​

For significant feature additions, use the chat:

"Add a settings page with user profile editing"

Let AI handle multi-file changes, then use the editor for polish.

Review generated code​

Understanding the code helps you:

  • Make better manual edits
  • Write more effective prompts
  • Debug issues faster

File organization​

Appifex organizes files by platform:

web/
├── src/
│   ├── components/    # Reusable UI components
│   ├── pages/         # Route pages
│   ├── hooks/         # Custom React hooks
│   ├── services/      # API calls
│   └── styles/        # CSS files
├── public/            # Static assets
└── package.json

mobile/
├── app/               # Expo Router pages
├── components/        # React Native components
├── hooks/             # Custom hooks
└── package.json

backend/
├── app/
│   ├── routers/       # API endpoints
│   ├── models/        # Database models
│   └── services/      # Business logic
└── requirements.txt

Tips​

  1. Ctrl/Cmd + S doesn't auto-save - click the save button
  2. Orange dot indicates unsaved changes
  3. Use the file tree to navigate - faster than scrolling
  4. Check the activity log after deploy for any errors