> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rork.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element Selection

> 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.

export const CtaBanner = () => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "24px",
  flexWrap: "wrap",
  margin: "40px 0 8px",
  padding: "22px 28px",
  borderRadius: "16px",
  background: "linear-gradient(135deg,rgba(249,115,22,0.10),rgba(255,255,255,0.03),rgba(249,115,22,0.06))",
  border: "1px solid rgba(255,255,255,0.08)"
}}>
    <div>
      <div style={{
  fontSize: "19px",
  fontWeight: 700,
  color: "#fff",
  letterSpacing: "-0.3px",
  lineHeight: 1.3
}}>
        Build your app with Rork today.
      </div>
      <div style={{
  fontSize: "14px",
  color: "rgba(255,255,255,0.6)",
  marginTop: "4px",
  lineHeight: 1.5
}}>
        Ship iOS, Android, and web apps by chatting with AI.
      </div>
    </div>
    <a href="https://rork.com?utm_source=docs&amp;utm_medium=referral&amp;utm_campaign=docs-cta&amp;utm_content=cta-banner" onClick={tagCtaLink} style={{
  flexShrink: 0,
  display: "inline-block",
  padding: "10px 24px",
  background: "linear-gradient(135deg,#fff,#f0f0f0)",
  color: "#000",
  fontSize: "14px",
  fontWeight: 600,
  borderRadius: "100px",
  textDecoration: "none",
  whiteSpace: "nowrap"
}}>
      Try Rork for Free
    </a>
  </div>;

export const frame = {
  margin: "8px 0 12px",
  borderRadius: "16px",
  overflow: "hidden",
  border: "1px solid color-mix(in srgb, currentColor 12%, transparent)",
  boxShadow: "0 18px 40px rgba(0,0,0,0.25)",
  lineHeight: 0
};

export const frameCaption = {
  margin: "0 0 32px",
  fontSize: "13px",
  lineHeight: 1.5,
  opacity: 0.55,
  textAlign: "center"
};

export const frameMedia = {
  width: "100%",
  height: "auto",
  display: "block",
  margin: 0,
  border: 0,
  borderRadius: 0,
  verticalAlign: "top"
};

<div style={frame}>
  <video src="https://mintcdn.com/rork/qkn0LeCmu5AFX-Hu/videos/element-selection/element-selection-demo.mp4?fit=max&auto=format&n=qkn0LeCmu5AFX-Hu&q=85&s=e02f68651bca7b6e3717b80563ea09d3" poster="/videos/element-selection/element-selection-demo.jpg" autoPlay muted loop playsInline controls aria-label="Pressing the pointer above a Rork preview, selecting the Call courier button, and typing a change for it" style={frameMedia} data-path="videos/element-selection/element-selection-demo.mp4" />
</div>

<p style={frameCaption}>Press the pointer, click the element, write the change. Rork edits that part of the app.</p>

You no longer need a screenshot to point at a part of your app. Select the element in the preview and describe the change. Rork reads the element you picked and edits that part of the app.

Element Selection works on the iOS simulator, the Android emulator, and the web preview.

## How to use it

<Steps>
  <Step title="Open the preview">
    Open a project and wait for the preview to load. The pointer stays disabled while the app builds or the preview reloads.
  </Step>

  <Step title="Press the pointer">
    Press the pointer icon in the toolbar above the preview. Its tooltip reads **Select an element**.
  </Step>

  <Step title="Click the element">
    Click the element in the preview: a button, a card, an image, a line of text. Each element lights up as you hover over it.
  </Step>

  <Step title="Write the change">
    A small card names the element you picked. Write the change you want, or leave the field empty, and press **Add** or Enter.
  </Step>

  <Step title="Send">
    Send the message. Rork applies the change to that element.
  </Step>
</Steps>

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.

<Tip>
  Short prompts work best here. The element carries the "where", so your message only needs the "what".
</Tip>

## Good prompts

```
Make this button orange and move it to the bottom of the screen.
```

```
Use a larger font here and add more space below it.
```

```
Replace this image with the app icon.
```

```
Turn this list into a two-column grid.
```

## What Rork receives

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, attach a screenshot with **+ → Upload image**. Both can go in the same message.

## Notes

* The pointer is available on desktop. On a phone, describe the element in words.
* The pointer is disabled while the app builds or the preview reloads. It becomes active when the preview is ready.
* Press the pointer again to leave selection mode without picking anything. In the card, Esc closes the card without adding the element.

## FAQ

<AccordionGroup>
  <Accordion title="Which platforms support Element Selection?">
    All three previews: the iOS simulator, the Android emulator, and the web preview. The pointer sits in the toolbar above each of them.
  </Accordion>

  <Accordion title="Can I select several elements at once?">
    Yes. Select them one after another before you send. Each element shows as a chip in the composer. Remove a chip with its X.
  </Accordion>

  <Accordion title="The pointer is greyed out. Why?">
    The preview is still building or reloading. Wait for the app to appear, then press the pointer again.
  </Accordion>

  <Accordion title="Does it cost extra?">
    No. Element Selection is part of the normal message. The message spends build credits the same way any other message does.
  </Accordion>

  <Accordion title="I picked the wrong element. What do I do?">
    Press the X on the chip in the composer, then select again. Nothing is sent until you press send.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card icon="sparkles" href="/features/agent-modes" title="How the agent works">
    Design mode, Plan mode, and building.
  </Card>

  <Card icon="image" href="/features/assets" title="Assets and AI media">
    Replace the element's picture with one Rork generates.
  </Card>

  <Card icon="rotate-left" href="/features/undo-and-history" title="Undo and history">
    Roll back a change you did not like.
  </Card>

  <Card icon="lightbulb" href="/introduction/introduction/prompting-strategy" title="Prompting strategy">
    Write messages Rork gets right the first time.
  </Card>
</CardGroup>

<CtaBanner />