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

# Compatibility and Browser Support for Depict Packages

<b>If</b> you have a dependency listed below, make sure you have the minimum version or greater installed. You can also use parcel, vite or other bundlers, but we don't know the minimum version for those tools yet.

| Dependency (if applicable) | Minimum version |
| - | - |
| `sass` | 1.54.6 |
| `webpack` | 5.0 |

<Info>The only required dependency of above is `sass`</Info>

`@depict-ai/js-ui` ships no server build and targets browsers only; if you render on the server, use `@depict-ai/react-ui` (see [server-side rendering](/react-ui-guide/ssr)).

## Browser support

By default, the exported versions of Depict packages are transpiled for older browsers (targeting ES10). This makes it easier for the Depict UI to function in older browsers by default, but also results in a larger network payload and poorer page performance. However, you may still need to add polyfills (see below). If you're not keen on supporting older browsers, or you'd prefer to handle the transpilation process yourself, append `/latest` to all your imports to include the untranspiled version.

```ts theme={null}
import { /* your imports */ } from "@depict-ai/js-ui/latest";
import { /* your locales */ } from "@depict-ai/js-ui/locales/latest";
```

### Choosing a build

Depict packages ship two builds, selected by the import path:

| Import postfix | ECMAScript version | Intended for |
| - | - | - |
| `/ES10` (default) | ES10 (ECMAScript 2019) | Older browsers — see [browser list](https://browsersl.ist/#q=supports+array-flat) |
| `/latest` | ES14 (ECMAScript 2023) | Current major browsers; smaller payload |

The bare import (for example `@depict-ai/react-ui`) resolves to the ES10 build. To switch an
existing codebase to `/latest`, find and replace across your `.js`/`.ts`/`.tsx` files:
find `(@depict-ai(?!/types)[^"';\s]*)`, replace with `$1/latest`.

<Note>
  The default search modal's CSS uses
  [container queries](https://caniuse.com/css-container-queries), which older browsers lack.
  For those browsers, [use the classic modal](/other-guides/introduction#switching-to-the-classic-search-modal).
</Note>

### Polyfilling

The ES10 build handles syntax, not missing APIs — older browsers may still need polyfills.
Test your application in the oldest browser you target and add what is missing. Enable SDK
logging first by running `localStorage.debug = true` and reloading (see the debugging section
of the [react-ui](/react-ui-guide/introduction) or [js-ui](/js-ui-guide/introduction)
introduction), and exercise as many UI features as possible — some polyfills are only needed
for specific features.

Bundle the polyfills you need with your own build (for example via
[core-js](https://github.com/zloirock/core-js)) rather than loading them from a third-party
polyfill CDN at runtime. The polyfills Depict uses:

| Web API (click for compatibility) | Polyfill |
| - | - |
| [structuredClone](https://caniuse.com/mdn-api_structuredclone) | `import "core-js/stable/structured-clone";` |
| [Array.toSorted()](https://caniuse.com/mdn-javascript_builtins_array_tosorted) | `import "core-js/stable/array/to-sorted";` |
| [Smooth scrolling](https://caniuse.com/mdn-api_window_scrollby_options_behavior_parameter) | [smoothscroll-polyfill](https://www.npmjs.com/package/smoothscroll-polyfill) |
| [Element.replaceChildren()](https://caniuse.com/mdn-api_element_replacechildren) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [WeakRef](https://caniuse.com/mdn-javascript_builtins_weakref) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [EventTarget](https://caniuse.com/mdn-api_eventtarget)<br />(somewhat misleading compat table,<br />doesn't list which versions have a constructable EventTarget) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [String.at()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/at) | `import "core-js/proposals/relative-indexing-method";` |
| [String.trimStart()](https://caniuse.com/mdn-javascript_builtins_string_trimstart) & [String.trimEnd](https://caniuse.com/mdn-javascript_builtins_string_trimend) | `import "core-js/proposals/string-left-right-trim";` |
| [queueMicrotask](https://caniuse.com/mdn-api_queuemicrotask) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Node.contains()](https://caniuse.com/mdn-api_node_contains) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [globalThis](https://caniuse.com/?search=globalThis) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [`<template>` element](https://caniuse.com/template) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [ResizeObserver](https://caniuse.com/resizeobserver) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [`once` addEventListener option](https://caniuse.com/once-event-listener) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [setInterval](https://caniuse.com/mdn-api_setinterval_supports_parameters_for_callback) and [setTimeout API](https://caniuse.com/mdn-api_settimeout_supports_parameters_for_callback): Supports parameters for callback | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [DOMParser API: parseFromString: HTML (`text/html`) support](https://caniuse.com/mdn-api_domparser_parsefromstring_html) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Element.before()](https://developer.mozilla.org/en-US/docs/Web/API/Element/before) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Element.classList](https://caniuse.com/classlist) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Element.replaceWith()](https://caniuse.com/mdn-api_element_replacewith) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [CustomEvent](https://caniuse.com/customevent) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Element.closest()](https://caniuse.com/element-closest) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Element.matches()](https://caniuse.com/matchesselector) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [String.prototype.replaceAll](https://caniuse.com/mdn-javascript_builtins_string_replaceall) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [String.prototype.startsWith](https://caniuse.com/mdn-javascript_builtins_string_startswith) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [String.prototype.includes](https://caniuse.com/es6-string-includes) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [String.prototype.endsWith](https://caniuse.com/mdn-javascript_builtins_string_endswith) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Element.after(), Element.prepend(), Element.append(), Element.remove()](https://caniuse.com/dom-manip-convenience) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [DOMTokenList.forEach()](https://caniuse.com/mdn-api_domtokenlist_foreach) | Custom polyfill used by Depict — [contact us](mailto:hello@depict.ai) for the source |
| [Proxy](https://caniuse.com/proxy) | `import "proxy-polyfill/proxy.min.js";` |
| [navigator.sendBeacon()](https://caniuse.com/beacon) | `import "navigator.sendbeacon/dist/navigator.sendbeacon.min.js";` |
| [Web Animations API (WAAPI)](https://caniuse.com/web-animation) | `import "web-animations-js/web-animations.min";` |
| [document.currentScript](https://caniuse.com/document-currentscript) | `import "current-script-polyfill";` |
| [IntersectionObserver](https://caniuse.com/intersectionobserver) | `import "intersection-observer";` |
| [Scroll methods on elements (scroll, scrollTo, scrollBy)](https://caniuse.com/element-scroll-methods) | `import "element-scroll-polyfill";` |
| [Symbol](https://caniuse.com/mdn-javascript_builtins_symbol) | `import "core-js/modules/es.symbol";` |
| [Array.from](https://caniuse.com/mdn-javascript_builtins_array_from) | `import "core-js/es/array/from";` |
| [Array.fill](https://caniuse.com/mdn-javascript_builtins_array_fill) | `import "core-js/es/array/fill";` |
| [Array.flat](https://caniuse.com/mdn-javascript_builtins_array_flat) | `import "core-js/es/array/flat";` |
| [Math.imul](https://caniuse.com/mdn-javascript_builtins_math_imul) | `import "core-js/es/math/imul";` |
| [Math.trunc](https://caniuse.com/mdn-javascript_builtins_math_trunc) | `import "core-js/es/math/trunc";` |
| [Symbol.iterator](https://caniuse.com/mdn-javascript_builtins_symbol_iterator) | `import "core-js/es/symbol/iterator";` |
| [Symbol.async-iterator](https://caniuse.com/mdn-javascript_builtins_symbol_asynciterator) | `import "core-js/es/symbol/async-iterator";` |
| [Promise.finally](https://caniuse.com/mdn-javascript_builtins_promise_finally) | `import "core-js/features/promise/finally";` |
| [Promise.any](https://caniuse.com/mdn-javascript_builtins_promise_any) | `import "core-js/features/promise/any";` |
| [Promise.allSettled](https://caniuse.com/mdn-javascript_builtins_promise_allsettled) | `import "core-js/features/promise/all-settled";` |
| [Promise](https://caniuse.com/promises) | `import "core-js/features/promise/index";` |
| [Object.assign](https://caniuse.com/mdn-javascript_builtins_object_assign) | `import "core-js/features/object/assign";` |
| [Map.values](https://caniuse.com/mdn-javascript_builtins_map_values) | `import "core-js/features/map/map-values";` |
| [Array.forEach](https://caniuse.com/mdn-javascript_builtins_array_foreach) | `import "core-js/stable/array/for-each";` |
| [Reflect](https://caniuse.com/mdn-javascript_builtins_reflect) | `import "core-js/stable/reflect";` |
| [Array.find](https://caniuse.com/array-find) | `import "core-js/stable/array/find";` |
| [Array.includes](https://caniuse.com/array-includes) | `import "core-js/stable/array/includes";` |
| [Array.findIndex](https://caniuse.com/array-find-index) | `import "core-js/stable/array/find-index";` |
| [Object.entries](https://caniuse.com/object-entries) | `import "core-js/stable/object/entries";` |
| [Object.fromEntries](https://caniuse.com/mdn-javascript_builtins_object_fromentries) | `import "core-js/stable/object/from-entries";` |
| [Object.values](https://caniuse.com/object-values) | `import "core-js/stable/object/values";` |
| [Set](https://caniuse.com/mdn-javascript_builtins_set) | `import "core-js/stable/set/";` |
| [String.matchAll](https://caniuse.com/mdn-javascript_builtins_string_matchall) | `import "core-js/features/string/match-all";` |
| [URLSearchParams](https://caniuse.com/urlsearchparams) | `import "core-js/web/url-search-params";` |
| [URL](https://caniuse.com/url) | `import "core-js/web/url";` |
| DOM Collections (like HTMLCollection) forEach/iterator | `import "core-js/web/dom-collections";` |
| [WeakSet](https://caniuse.com/mdn-javascript_builtins_weakset) | `import "core-js/modules/es.weak-set";` |


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