> For the complete documentation index, see [llms.txt](https://docs.zus.network/zus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zus.network/zus-docs/sdks/js-sdk.md).
# JS SDK
This page will specifically guide you through setting up a project using the Züs JS SDK. For detailed API documentation, please refer to the API Reference.
### Install Züs JS SDK
The Züs JS SDK is available as a package on NPM for use with a module bundler:
{% tabs %}
{% tab title="NPM" %}
```javascript
npm install @zerochain/sdk
```
{% endtab %}
{% tab title="Yarn" %}
```javascript
yarn add @zerochain/sdk
```
{% endtab %}
{% endtabs %}
### Initialize the SDK
Before using the SDK, it must be initialized. This process involves loading the required scripts, fetching the appropriate WASM file, and then initializing the WASM.
#### Adding Required Scripts
Include the following scripts in the `` of your HTML:
```html
```
{% hint style="info" %}
The WASM relies on the scripts above and requires specific versions to function correctly. Make sure to use the exact versions listed. These may be updated periodically based on the latest WASM `v1.x.x` release requirements.
{% endhint %}
#### Fetching the WASM
There are two WASM file types available, `standard` and `enterprise`.
1. Download the appropriate WASM file(s):
* **Standard WASM** is for interacting with a Standard Allocation:
* Download `zcn.wasm` from the "Assets" section of any GoSDK Release [here](https://github.com/0chain/gosdk/releases)
* **Enterprise WASM** is for interacting with an Enterprise Allocation:
* Download `enterprise-zcn.wasm` from the "Assets" section of any eGoSDK Release [here](https://github.com/0chain/egosdk/releases)
2. Upload your WASM file for `wasmBaseUrl` config:
* You can place it in your website’s static assets folder.
* ```sh
public/
|--wasm/
| |--zcn.wasm
| |--enterprise-zcn.wasm
```
* In this case, set the `wasmBaseUrl` config to `/wasm`.
* Alternatively, you can upload it to a web server or CDN.
* For example, if `wasmBaseUrl` is set to `https://example.com/wasm`, the WASM files should be located at:
* `https://example.com/wasm/enterprise-zcn.wasm` for the Enterprise WASM
* `https://example.com/wasm/zcn.wasm` for the Standard WASM
3. Upload the [`md5worker.js` file](https://cdn.zus.network/public/md5worker.js) for the `md5WorkerUrl` config:
* This is optional if you are not using upload features of the SDK. This includes using SDK methods like `multiUpload` and `bulkUpload`. {/\* DOTODO: update link to multiUpload and bulkUpload \*/}
* Place it in your website’s static assets folder:
```sh
public/
|--md5worker.js
```
* In this case, set the `md5WorkerUrl` config to `md5worker.js`.
* Alternatively, use the [CDN URL](https://cdn.zus.network/public/md5worker.js) for the `md5WorkerUrl` config. :::warning
{% hint style="info" %}
This is strongly not recommended as it is used only in Zus apps like Vult, Blimp & Chalk and may change in the future, potentially breaking your app.
{% endhint %}
{% tabs %}
{% tab title="JavaScript" %}
````javascript
import { useWasmLoader } from '@zerochain/sdk/dist/react'
export const App = () => {
const [isWasmLoaded, setIsWasmLoaded] = useState(false)
// highlight-start
const loadWasm = useWasmLoader({
onLog: (type, log) => console[type]('WASM LOG:', log.message),
setIsWasmLoaded,
})
// highlight-end
// Using useEffect to ensure the `window` object is accessible
useEffect(() => {
// highlight-start
loadWasm({
md5WorkerUrl: 'md5worker.js',
wasmBaseUrl: '/wasm', // Or, 'https://example.com/wasm'
})
// highlight-end
}, [loadWasm])
// ...
}
```
````
{% endtab %}
{% tab title="Vanilla" %}
```javascript
import { wasmLoader } from '@zerochain/sdk'
const loadWasm = wasmLoader({
onLog: (type, log) => console[type]('WASM LOG:', log.message),
setIsWasmLoaded: isWasmLoaded => updateMyUI(isWasmLoaded),
})
loadWasm({
md5WorkerUrl: 'md5worker.js',
wasmBaseUrl: '/wasm', // Or, 'https://example.com/wasm'
})
```
{% endtab %}
{% endtabs %}
### Fetching WASM with Caching Support
The SDK supports caching the WASM file for faster access. This is **not** enabled by default, but you can modify the `loadWasm` config to enable it.
* Set `useCachedWasm` to `true`.
* Configure `cacheConfig` based on your WASM file type:
* For **Enterprise WASM**, set `enterpriseGosdkVersion` and `enterpriseWasmUrl`.
* For **Standard WASM**, set `standardGosdkVersion` and `standardWasmUrl`.
* Optionally, set `wasmBaseUrl` as a fallback. (Reference)
```js
loadWasm({
// highlight-start
useCachedWasm: true,
cacheConfig: {
enterpriseGosdkVersion: process.env.EGOSDK_VERSION, // Example: '1.18.5'
enterpriseWasmUrl: process.env.EGOSDK_WASM_URL, // Example: 'https://example.com/wasm/enterprise-zcn.wasm'
standardGosdkVersion: process.env.GOSDK_VERSION, // Example: '1.18.17'
standardWasmUrl: process.env.GOSDK_WASM_URL, // Example: 'https://example.com/wasm/zcn.wasm'
},
// highlight-end
// Set other options as needed
md5WorkerUrl: 'md5worker.js',
wasmBaseUrl: '/wasm', // Or, 'https://example.com/wasm'
});
```
#### Switching between WASM modes
The SDK provides `updateWasmMode` for switching between WASM modes.
* First call `updateWasmMode` with the desired WASM mode.
* Then call `loadWasm` with the proper config.
{% tabs %}
{% tab title="React (TSX)" %}
```javascript
import { useWasmLoader } from '@zerochain/sdk/dist/react'
import { updateWasmMode } from '@zerochain/sdk'
export const SwitchWasmMode = () => {
const loadWasm = useWasmLoader({ /** ... */})
const switchWasmMode = (newWasmMode: "normal" | "enterprise") => {
updateWasmMode(newWasmMode)
loadWasm({ /** Your loadWasm config */})
}
// ...
}
```
{% endtab %}
{% tab title="TypeScript" %}
```typescript
import { wasmLoader } from '@zerochain/sdk'
import { updateWasmMode } from '@zerochain/sdk'
const loadWasm = wasmLoader({ /** ... */})
const switchWasmMode = (newWasmMode: "normal" | "enterprise") => {
updateWasmMode(newWasmMode)
loadWasm({ /** Your loadWasm config */})
}
```
{% endtab %}
{% endtabs %}
### Next Steps
Now that the SDK is initialized, you can start using its methods in your application. Check out the API Reference.
#### Example: Logging the WASM version
```js
import sdk from '@zerochain/sdk'
async function logWasmVersion() {
const version = await sdk.getGosdkVersion(domain)
console.log('WASM Version:', version)
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.zus.network/zus-docs/sdks/js-sdk.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.