Opening & Managing Files
Opening a file
- Click File → Open File..., or click the dashed "Drop or select React/JSX files to open" box in the Files panel, and choose a
.jsxor.jsfile. - Or simply drag and drop a
.jsx/.jsfile from your computer straight onto that box.
Your original file is never modified when you open it — the app works on a private copy. Your file on disk stays untouched unless you explicitly export.
Switching between files
Click any file name in the Files in Sandbox list to open it in the Code Editor and Live Visualizer panels.
Removing a file
Hover over a file in the list and click the ✕ button that appears. This removes it from the app’s workspace (not from your original location on disk) and also clears that file’s revision history.
Saving your work
There are two distinct save actions, under the File menu:
| Action | Shortcut | What it does |
|---|---|---|
| Save in Sandbox... | Ctrl+S | Saves your edits inside the app’s private workspace only. Your original file on disk is untouched. |
| Save As (Export)... | Writes your edited version back out to a real file on your computer — this is how you get your changes back into your actual project. |
In short: edit and preview freely with Ctrl+S — nothing leaves the app until you choose Save As (Export)...
The app also autosaves your typing into its private workspace every second or so, purely to keep the live preview up to date. This does not count as an official save and does not overwrite your original file.