Select any element in the iOS, Android, or web preview and tell Rork how to change it. Rork reads the element you picked and edits that part of the app. No screenshots needed.
Element Selection works on the iOS simulator, the Android emulator, and the web preview.
The screenshots below show the controls in the Rork editor. The orange outlines mark where to click.
1
Open the preview
Open a project on desktop and wait for the preview to load. For an Android app, press Turn on emulator if it is stopped. The pointer stays disabled while the app builds or the preview reloads.
The Android preview in Rork. The pointer is in the toolbar above the app, just to the left of Share.
2
Press the pointer
In an iOS or Android preview, hover over the pointer to see Select an element. In a web preview, the tooltip reads Select an element for your prompt. Click that button to turn on selection mode.
iOS and Android
Web
Android toolbar shown. Click the pointer immediately to the left of Share.
Click the pointer to the right of the preview address, before the screen-size button.
3
Click the element
Click the button, card, image, or text you want to change inside the preview. Each element lights up as you hover over it. In this example, select Shop the roast list.
The selected button is outlined in blue in the web preview.
4
Describe the change and press Add
Check the name in the Selected element card. Type a change such as Make this button green. in Describe the change…, then press Add or Enter. You can also leave the field empty and describe the change in the chat.
Type the change in the card, then click Add in its bottom-right corner.
5
Send the message
The selected element appears as a chip in the chat composer on the left. Click the upward arrow in the bottom-right corner of the composer, Send message, to ask Rork to apply the change. Add attaches the element; Send message starts the edit.
The element is attached to the chat. Click the upward arrow to send the request.
You can select more than one element before you send. Each one shows as a chip in the composer, and the X on the chip removes it.
Short prompts work best here. The element carries the “where”, so your message only needs the “what”.
Watch the demo
Press the pointer, click the element, write the change. Rork edits that part of the app.
Rork attaches the element’s name and where it lives in your code. It does not attach a screenshot. This is why the edit lands on the exact component instead of a look-alike somewhere else in the app.If you want Rork to see the whole screen as well, use Screenshot in the iOS or Android simulator toolbar. It attaches the screen directly to your chat draft. You can also upload an image with + → Upload image. The screenshot and selected element can go in the same message.
