The Code tab — read and edit your app's code
In shortThe Code tab shows every file of your app in a folder tree, with an editor beside it. Click a file to read it, type to change it and press Save (or ⌘S / Ctrl+S); each save becomes a version you can go back to. Apps are built with TanStack Start, React and TypeScript. The code is yours — download it from Project settings → Export, or keep it in GitHub.
You never have to open the code — MonstarX writes and changes it for you. But it is all there, in plain sight, whenever you (or a developer you work with) want to look. The Code tab shows every file of your app and lets you make your own changes.
What does the Code tab show?
Section titled “What does the Code tab show?”On the left, a folder tree with every file of your app. On the right, the file you picked, with colours for the code and line numbers.
On a phone, tap the file name at the top to open the tree as a sheet.
Where do things live?
Section titled “Where do things live?”You don’t need to know this, but it helps when you read along:
| Folder or file | What is in it |
|---|---|
src/routes/ | One file per page — index.tsx is the home page, pricing.tsx is /pricing. |
src/components/ | Pieces used on several pages, like the header and footer. |
src/server/ | The code that runs on the server: saving a booking, reading the schedule. |
src/db/ | The shape of your app’s data. |
migrations/ | The steps that create and change the database tables. |
public/ | Files served as they are, such as icons. |
src/styles.css | Colours, fonts and other styling. |
What is my app built with?
Section titled “What is my app built with?”Apps MonstarX builds are modern web apps made with:
- TypeScript — JavaScript with checks that catch mistakes before your app runs.
- React — the most widely used way to build web interfaces.
- TanStack Start — a framework that turns those React pages into a full app with a server, so pages load fast and your data stays safe on the server.
- Tailwind CSS — a styling toolkit for colours, spacing and layout.
This is also what the card on the Projects page shows, for example TanStack Start · React · TypeScript. An app you imported keeps whatever it was built with.
How do I edit a file myself?
Section titled “How do I edit a file myself?”-
Open the Code tab and click the file in the tree.
-
Click in the editor and make your change. Unsaved appears at the top, with Discard and Save.
-
Click Save, or press ⌘S (Mac) or Ctrl+S (Windows). The preview updates straight away.
Each save is kept as a version named Edit and the file’s path, such as Edit src/routes/schedule.tsx, so you can go back if it goes wrong. If your project is linked to GitHub with automatic pushing on (the default), the change is pushed there too. MonstarX sees your edit the next time you ask it for something.
Discard throws your unsaved changes away.
When can’t I edit?
Section titled “When can’t I edit?”- While MonstarX is changing your app. Files are read-only until it finishes: MonstarX is changing your app, so files are read-only until it finishes.
- When the file changed after you started. If MonstarX or someone else saved the file in the meantime, you see This file changed after you started editing. and Save is greyed out. Your draft is kept until you discard it, so you can compare, discard and make the change again.
- Files MonstarX manages. In apps MonstarX builds, the settings files (such as
package.jsonand the Vite and TypeScript config) and the built-in services for accounts, the database, email, storage and AI are looked after by MonstarX. They are not in the tree, but they are in the zip when you export. - View-only access. People the project is shared with as Can view & comment see View only: you can read the code, but not change it. People who Can edit can edit and save files like you.
Can I download my code?
Section titled “Can I download my code?”Yes. The code is yours: you own what you build with MonstarX, including the code it writes. Two ways to take it with you:
- Download a zip — SettingsExport in the workspace, then Download .zip. You get a standalone project that runs on your own computer. See Export your app.
- Keep it in GitHub — link a repository and every change becomes a commit. See GitHub.
Frequently asked questions
Section titled “Frequently asked questions”Do I need to know how to code to use MonstarX?
No. The Code tab is there for when you want to look. Everything can be done by describing what you want in the chat.
Will MonstarX undo my own edits?
No. It reads the files as they are when you send your next request, including your edits. If you want it to know why you changed something, mention it in the chat.
Can I add a new file in the Code tab?
The Code tab edits existing files. Ask MonstarX in the chat to create new pages or files.
How do I add a package or library?
Ask for it in the chat — for example "Use a date picker library for the booking form". MonstarX adds packages for you.
Who owns the code MonstarX writes?
You do. MonstarX's terms say you own your prompts, files, code and apps, and you can export them at any time.