Skip to main content
Depict UI is crafted to cater to a diverse range of users and developers. While we lean into modern web advancements, we’re also considerate of those who don’t regularly update their devices or developers who might not be familiar with transpilation. Our CSS is designed with a wide-ranging compatibility in mind except our new search modal. For compatibilitiy, use the classic one.. On the other hand, our JavaScript harnesses the latest syntax and features. Because of this, it may require transpilation and polyfilling to ensure flawless performance on older browsers - don’t worry, we’ll help you with both.
Requirement for older browsersDescriptionDo you need to handle it?
TranspilingTranspiling adjusts the syntax of code, making it comprehensible to older browsers. It’s like simplifying language for clearer understanding.No. Depict provides an ES10 pre-transpiled version out-of-the-box.
PolyfillingPolyfilling offers missing APIs through emulation, ensuring all requisite functions are available.Yes, but we’re here to guide you through.

​
Out-of-the-box support

By default, Depict UI is pre-transpiled to ES10, ensuring broad compatibility. Still, we do maintain a version for the very latest browsers for those who wish to use it.
Import postfixSupported ECMAScript VersionSupported browsers
/ES10 (default)ES10 (ECMAScript 2019)See here
/latestES14 (ECMAScript 2023)Best for current major browsers
To incorporate a specific version, adjust your import path accordingly. The default import (@depict-ai/react-ui) directly provides the ES10 version. For those interested in embracing the future, you can use find and replace in your editor to easily get the latest version. Make sure to limit yourself to .js/.ts/.tsx files and then find: (@depict-ai(?!/types)[^"';\s]*) and replace with: $1/latest.

​
Polyfilling

Always test your application in your oldest targeted browser and then add any missing APIs. Make sure you’ve enabled logging in the SDK by running localStorage.debug=true, then reload (see Debugging and Error reporting). Try testing as many possible features/use cases of the UI as possible as some polyfills only are required for specific features. Below are the polyfills we at Depict use. Some may need transpilation or might rely on others. Each link leads to a babel REPL for viewing both transpiled and original code. For a simplified approach, consider platforms like Polyfill.io.
Web API (click for compatibility)Polyfill
structuredCloneimport "core-js/stable/structured-clone";
Array.toSorted()import "core-js/stable/array/to-sorted";
Smooth scrollingsmoothscroll-polyfill
Element.replaceChildren()See here
WeakRefSee here
EventTarget
(somewhat misleading compat table,
doesn’t list which versions have a constructable EventTarget)		See here
String.at()import "core-js/proposals/relative-indexing-method";
String.trimStart() & String.trimEndimport "core-js/proposals/string-left-right-trim";
queueMicrotaskSee here
Node.contains()See here
globalThisSee here
<template> elementSee here
ResizeObserverSee here
once addEventListener optionSee here
fetchSee here
setInterval and setTimeout API: Supports parameters for callbackSee here
DOMParser API: parseFromString: HTML (text/html) supportSee here
Element.before()See here
Element.classListSee here
Element.replaceWith()See here
CustomEventSee here
Element.closest()See here
Element.matches()See here
String.prototype.replaceAllSee here
String.prototype.startsWithSee here
String.prototype.includesSee here
String.prototype.endsWithSee here
Element.after(), Element.prepend(), Element.append(), Element.remove()See here
DOMTokenList.forEach()See here
Proxyimport "proxy-polyfill/proxy.min.js";
navigator.sendBeacon()import "navigator.sendbeacon/dist/navigator.sendbeacon.min.js";
Web Animations API (WAAPI)import "web-animations-js/web-animations.min";
document.currentScriptimport "current-script-polyfill";
IntersectionObserverimport "intersection-observer";
Scroll methods on elements (scroll, scrollTo, scrollBy)import "element-scroll-polyfill";
Symbolimport "core-js/modules/es.symbol";
Array.fromimport "core-js/es/array/from";
Array.fillimport "core-js/es/array/fill";
Array.flatimport "core-js/es/array/flat";
Math.imulimport "core-js/es/math/imul";
Math.truncimport "core-js/es/math/trunc";
Symbol.iteratorimport "core-js/es/symbol/iterator";
Symbol.async-iteratorimport "core-js/es/symbol/async-iterator";
Promise.finallyimport "core-js/features/promise/finally";
Promise.anyimport "core-js/features/promise/any";
Promise.allSettledimport "core-js/features/promise/all-settled";
Promiseimport "core-js/features/promise/index";
Object.assignimport "core-js/features/object/assign";
Map.valuesimport "core-js/features/map/map-values";
Array.forEachimport "core-js/stable/array/for-each";
Reflectimport "core-js/stable/reflect";
Array.findimport "core-js/stable/array/find";
Array.includesimport "core-js/stable/array/includes";
Array.findIndeximport "core-js/stable/array/find-index";
Object.entriesimport "core-js/stable/object/entries";
Object.fromEntriesimport "core-js/stable/object/from-entries";
Object.valuesimport "core-js/stable/object/values";
Setimport "core-js/stable/set/";
String.matchAllimport "core-js/features/string/match-all";
URLSearchParamsimport "core-js/web/url-search-params";
URLimport "core-js/web/url";
DOM Collections (like HTMLCollection) forEach/iteratorimport "core-js/web/dom-collections";
WeakSetimport "core-js/modules/es.weak-set";
⌘I