# Migrating from HyperclayJS
> Update a document from HyperclayJS to ClayJS: replace the preset script tag, load plugins and satellites, and update ignored attributes and API calls.
Source: https://clayjs.com/docs/migrating-from-hyperclayjs/
ClayJS replaces HyperclayJS. Updating an existing document involves swapping the loader script tag, loading only the [plugins](https://clayjs.com/docs/plugins/) and [satellites](https://clayjs.com/docs/satellites/) your document uses, replacing ignored attributes, and pointing JavaScript calls at [`window.clay`](https://clayjs.com/docs/api/).
## Replace the script tag and preset
HyperclayJS loaded as an ES module with a `?preset=` query parameter. ClayJS loads as a classic `
```
After (ClayJS):
```html
```
> [!WARNING]
> Do not put `type="module"` on `clay.js` or any satellite tag. The loader reads `document.currentScript.src` to locate its modules, and logs an error without booting if loaded as a module.
Instead of presets, pick the pieces your document needs:
- **Default-on plugins**: [`richclay`](https://clayjs.com/docs/plugins/richclay/) (`editable` rich text) and [`source`](https://clayjs.com/docs/plugins/source/) (byte-preserving saves). Pass `&exclude=richclay` when your document does not use rich text.
- **Opt-in plugins** (`?plugins=`): [`sync`](https://clayjs.com/docs/plugins/live-sync/), [`live`](https://clayjs.com/docs/plugins/live-sync/), [`sortable`](https://clayjs.com/docs/plugins/sortable/), [`undo`](https://clayjs.com/docs/plugins/undo/), `indicator`, [`upload`](https://clayjs.com/docs/plugins/upload/), [`quickcrop`](https://clayjs.com/docs/plugins/upload/), [`cms`](https://clayjs.com/docs/plugins/cms/), [`people`](https://clayjs.com/docs/plugins/people/), [`visitor-drafts`](https://clayjs.com/docs/plugins/people/), [`message`](https://clayjs.com/docs/plugins/message/), [`wire`](https://clayjs.com/docs/plugins/wire/), [`ai-edit`](https://clayjs.com/docs/plugins/ai-edit/), and `demo`.
- **Satellites** (separate `
```
### Dialogs and toasts
Load `https://clayjs.com/v1/clay-ui.js` for built-in dialogs and notifications on `window.clay`: `clay.ask`, `clay.confirm`, `clay.tell`, `clay.snippet`, `clay.toast`, `clay.toastPersistent`, and `clay.modal`. Note that `clay.confirm(prompt)` rejects with `undefined` when cancelled, so always pass a rejection handler: `clay.confirm("Delete this item?").then(remove, () => {})`.