Code Reload

On-device live code editor and AI agent for React Native. Edit TSX on your phone, save, and see the preview update — no Metro connection required after install.

npm install code-reload

Repo layout

code-reload/           ← this package (ios/, android/, src/)
example/               ← demo app (start here)
  src/App.tsx          ← edit this
  appSources.ts        ← auto-generated snapshot (gitignored)

Prerequisites

• React Native dev environment (Xcode for iOS, Android Studio for Android)
• Node.js ≥ 22.11
• CocoaPods (for iOS)

First-time setup

From the repo root:

cd example
npm install
cd ios && pod install && cd ..

Run the example app

Use two terminals from example/, or run Metro in the background first.

Terminal 1 — Metro

cd example
npm start

prestart runs code-reload-snapshot automatically, which copies src/**/*.tsx into a bundled snapshot for the on-device editor.

Terminal 2 — iOS (physical device or simulator)

cd example
npm run ios -- --scheme CodeReloadFreshRN

The example Xcode scheme is CodeReloadFreshRN (not the default CodeReloadExample).

Android

cd example
npm run android

Edit the app

1. Change example/src/App.tsx in your editor.
2. Reload the preview:
   • With Metro: save and use Fast Refresh, or press R in the dev menu.
   • On device (Code Reload Files tab): open App.tsx, edit, tap Save — works offline after the app is installed.

Do not edit example/appSources.ts; it is generated by npm run snapshot and gitignored.

Code Reload on device

In __DEV__, the app mounts Code Reload: tap the floating button to open Files, Chat, and History.

If App.tsx is missing from Files after a rebuild, you may see “Bundled code changed” — choose Replace to seed from the latest snapshot, or delete and reinstall the app.

Integrate into your app

import { registerCodeReloadApp, AI_MODELS } from 'code-reload';
import App from './src/App';
import { appSources } from './appSources';

registerCodeReloadApp('MyApp', App, {
  sources: appSources,
  entry: 'App',
  apiKey: 'your-key-here',
  model: AI_MODELS.claude4Sonnet,
});

Generate the snapshot from your source tree:

node ../scripts/code-reload-snapshot.js --src src --out appSources.ts

Or use the code-reload-snapshot bin from this package.

Package scripts (repo root)

npm run typescript   # typecheck code-reload package
npm run snapshot     # snapshot with default paths (src → src/appSources.ts)

Releasing (maintainers)

Published as code-reload on npm. CI publishes on push to main when package.json version is not already on the registry.

1. Bump version in package.json in your release PR.
2. Merge to main (or run Publish to npm via Actions → workflow_dispatch).
3. On npm, configure trusted publishing for code-reload → GitHub → mikemilla/code-reload, workflow file npm-publish.yml. CI uses OIDC (--provenance); do not set an empty NPM_TOKEN secret (it breaks OIDC auth).

Merges without a version bump are no-ops: the workflow skips publish when the version already exists on npm.

Troubleshooting

| Issue | Fix | |-------|-----| | Could not load the shared scheme for CodeReloadExample | Use --scheme CodeReloadFreshRN | | Pods path errors after moving the repo | cd example/ios && rm -rf Pods build && pod install | | Metro port in use | Stop the other process on :8081 or run npx react-native start --port 8082 | | Stale on-device files | Reinstall the app or tap Replace when prompted |

More: React Native troubleshooting