Change your app

Code

Your app's real code: the files and pictures it is made of, searching it, pointing the chat at a line or a file, finding an element's line from the preview, and editing by hand on a paid plan.

Every app is real React code, and Code, beside Preview at the top of the editor, shows all of it. You never have to open it. It is there for when you want to see how something is made, point at it, or change it yourself.

The Explorer

On the left:

  • Search code finds a word in every file.
  • Open editors are the files you have open, as tabs.
  • Files is the whole app: App.js, the screens and parts in components, and the data in lib.
  • Images are the pictures the app uses, with how many there are. Click one to see it large: Draw marks on it in red to point at something, and Add to chat sends it with your next message.

The button at the top left of the editor hides the Explorer, for more room.

Point the chat at the code

You do not have to describe where something is.

  • Reference file, above the code, attaches the whole file to your next message in the chat.
  • The + at the left of a line attaches that line. Select several lines to attach them all.

Then a short request is enough: "this does the wrong thing when the list is empty".

Find an element's line

Split view, the two panes at the top right, shows the preview beside the code. It is there while Code is open, on a computer; a phone has room for one pane at a time. Opening it narrows the chat to make room, and the chat comes back to its old width when you close it, so you can still ask about what you are reading.

Once Split view is on, a pointer button appears beside it (Click an element to find it in the code). Switch it on and clicking in the preview no longer does what the app would do: it opens the file that makes the element, at its line. Switch it off to use the preview normally again. It is the quickest way from "that headline" to the code behind it, and the line can be attached to your next message with the + at its left.

Edit by hand

On a paid plan the code is yours to change: type in it, and Auto-save on, in the bar at the foot, means it is kept as you go. The preview follows. Copy code copies the file you are looking at.

On the free plan the code can be read, searched and pointed at, but not changed or copied. Upgrade to edit, in the same bar, says so.

To take the whole app with you, export it to GitHub or GitLab from Publish, on a paid plan. See Quickstart.

Was this page helpful?

Join the community

Questions, ideas and what others are building.