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

# Migrate from Elements

> Move from Photon Elements to Prescribe: what replaces each attribute and event.

<Warning>
  **Photon Elements will be deprecated on January 1, 2027.** Support will be removed in early 2027. Migrate to Prescribe before then.
</Warning>

Prescribe replaces Photon Elements (`@photonhealth/elements`, with `<photon-client>` and `<photon-prescribe-workflow>`). It covers the same prescribing workflow, runs on the [Network API](/docs/network/overview), and lets the patient choose their pharmacy by default.

Most migrations change one component. Patients you synced before keep their `pat_…` ids.

## 1. Choose how to add Prescribe

| Your frontend | Use |
| - | - |
| React | Prescribe's [React components](/docs/prescribe/embed/react) |
| Angular, Vue, or anything else | Prescribe's [iframe](/docs/prescribe/embed/iframe). It needs no package or credentials. |
| A link from another tool | A [deep link](/docs/prescribe/app/deep-links), which replaces the `/prescriptions/new` link |

## 2. Replace the client

<CodeGroup>
  ```html Before theme={"dark"}
  <photon-client id="YOUR_CLIENT_ID" org="YOUR_ORG_ID" dev-mode="true" redirect-uri="https://example.com">
    <photon-prescribe-workflow patient-id="pat_01M3WQQHRB1T0K1469KD18BAWX" />
  </photon-client>
  ```

  ```tsx After theme={"dark"}
  <PhotonProvider clientId="YOUR_CLIENT_ID" organization="YOUR_ORG_ID" environment="neutron">
    <PhotonOrder patient="pat_01M3WQQHRB1T0K1469KD18BAWX" />
  </PhotonProvider>
  ```
</CodeGroup>

| `<photon-client>` | Prescribe |
| - | - |
| `id` | `clientId`. It's the same Application credential. |
| `org` | `organization` |
| `dev-mode="true"` | `environment="neutron"`. Prescribe defaults to production. |
| `redirect-uri`, `redirect-path` | Not needed. Sign-in returns to the page it started on. |
| `auto-login` | Not needed. Prescribe signs in on its own when it can, and otherwise shows **Sign in to Photon**. |

The iframe takes no client at all. It signs the prescriber in to Photon itself.

## 3. Replace the workflow

`<photon-prescribe-workflow>` becomes `<PhotonOrder>`. In an iframe, it becomes `/order/embed`.

| `<photon-prescribe-workflow>` | Prescribe |
| - | - |
| `patient-id` | `patient="pat_…"`, or `?patient=pat_…` in an iframe. Prescribe takes Photon ids only. To pass your own patient, give their details (`patient={{ demographic: { … } }}`) and Photon matches them. |
| `template-ids` | `order={{ patient: { id }, prescriptions: { add: [{ templateId: "…" }] } }}` |
| `prescription-ids` | `order={{ prescriptions: { add: [{ id: "rx_…" }] } }}`. Prescribe puts the draft itself on the order rather than copying it. |
| `initial-prescriptions`, `template-overrides`, `prescription-overrides` | Draft the prescriptions from your backend with the values you want ([prescription sync](/docs/network/prescription)), then pass their ids. See [One-click orders](/docs/integrations/one-click-orders). |
| `enable-order`, `enable-send-to-patient` | Always on. **Send** texts the patient, who chooses their pharmacy. |
| `pharmacy-id` | Set the pharmacy on the draft order from your backend ([`pharmacy`](/docs/network/order#pharmacies)), then open the order by id |
| `external-order-id` | Set `externalId` on the order from your backend |
| `hide-patient-card` | `fixed` keeps the patient visible but removes **Change patient** |

### Events

| Elements event | Prescribe |
| - | - |
| `photon-order-created` | `onSent(order)`, or the `PhotonOrder.onSent` message from an iframe |
| `photon-prescriptions-created`, `photon-draft-prescription-created` | `onOrder(order)`, which fires as each prescription is saved or signed. Read them from `order.prescriptions`. A standalone `PhotonPrescription` has `onPrescription(rx)` and `onSigned(rx)`. |
| `photon-prescriptions-error`, `photon-order-error` | No event. The card shows the error to the prescriber. |

Prescribe events pass the live object: `order.id` and `order.state`. They don't pass a raw GraphQL payload. For what happens after sending, use [webhooks](/docs/network/webhooks). They haven't changed.

## 4. Replace deep links

| Before | After |
| - | - |
| `app.neutron.health/prescriptions/new?patientId=pat_…` | `rx.neutron.health/order?patient=pat_…` |
| `…&templateIds=tmp_…` | Build the link with `ph.order.url({ patient: { id }, prescriptions: { add: [{ templateId }] } })`. See [Deep links](/docs/prescribe/app/deep-links). |

⚠️ `rx.neutron.health` isn't live yet.

## Not in Prescribe yet

These Elements features don't have a Prescribe equivalent yet. If you rely on one, talk to your Photon contact before you migrate.

* Prescriber-chosen pharmacy in the UI: `enable-local-pickup`, `enable-delivery-pharmacies` and `mail-order-ids`. Your backend can still set the pharmacy on a draft order.
* Catalog limits: `disable-list` and `allow-off-catalog-search`
* Coverage checks: `enable-coverage-check`. Benefits are coming to Prescribe as pharmacy offers.
* Patient context in the workflow: `weight`, `weight-unit`, `address`, and the `supervisor` for an order
* `additional-notes`, `hide-templates` and `hide-submit`
* Recent prescriptions: `<photon-med-history>`, `enable-med-history*` and `enable-combine-and-duplicate`
* Opening a patient by your own external id


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.