# Use third-party libraries

Every developer learns one of the most important principles of software engineering early in their career: DRY (Don’t Repeat Yourself). Using third-party libraries can save your time as you do not need to develop the functionality that the library provides. PocketBlocks provides some built-in third-party libraries for common uses, and you can manually import other libraries on demand.

## Built-in libraries

PocketBlocks provides some JavaScript built-in libraries for use.

| Library                  | Docs                                                       | Version                    |
| ------------------------ | ---------------------------------------------------------- | -------------------------- |
| lodash                   | <https://lodash.com/docs/>                                 | 4.17.21                    |
| moment                   | <https://momentjs.com/docs/>                               | 2.29.3                     |
| uuid                     | <https://github.com/uuidjs/uuid>                           | 8.3.2（Support v1/v3/v4/v5） |
| numbro                   | <https://numbrojs.com/format.html>                         | 2.3.6                      |
| papaparse(Papa)          | <https://www.papaparse.com/docs>                           | 5.3.2                      |
| PocketBase SDK(pb)       | <https://pocketbase.io/docs/client-side-sdks>              | 0.21.3                     |
| TanStack QueryClient(qc) | <https://tanstack.com/query/v5/docs/reference/QueryClient> | 5.44.0                     |

## Manually import third-party libraries

PocketBlocks supports setting up preloaded JavaScript and libraries which can be at **app-level** or **workspace-level**.

* **App-level** libraries get loaded only in the app where defined. Plus, app A cannot use libraries that are set up for app B.
* **Workspace-level** libraries will be loaded when you open any application in your workspace. All the apps can access those libraries. There can be a certain impact on app performance, especially when you have complex JavaScript functions that aren't being used in every app.

{% hint style="info" %}
**Tips you should know before setting up libraries:**

* External libraries are loaded and run in the browser.
* NodeJS-only libraries are not supported now.
* URLs of external libraries need to support cross-domain.
* The export of the library must be set directly on the window object, global variables like `var xxx = xxx` do not take effect.
* The external libraries run in a restricted sandbox environment and the following global variables are not available:

  <mark style="background-color:yellow;">`parent`</mark>

  <mark style="background-color:yellow;">`document`</mark>

  <mark style="background-color:yellow;">`location`</mark>

  <mark style="background-color:yellow;">`chrome`</mark>

  <mark style="background-color:yellow;">`setTimeout`</mark>

  <mark style="background-color:yellow;">`fetch`</mark>

  <mark style="background-color:yellow;">`setInterval`</mark>

  <mark style="background-color:yellow;">`clearInterval`</mark>

  <mark style="background-color:yellow;">`setImmediate`</mark>

  <mark style="background-color:yellow;">`XMLHttpRequest`</mark>

  <mark style="background-color:yellow;">`importScripts`</mark>

  <mark style="background-color:yellow;">`Navigator`</mark>

  <mark style="background-color:yellow;">`MutationObserver`</mark>
  {% endhint %}

Now let's take **cowsay** as an example and import it at app-level and workspace-level.

* GitHub page: <https://github.com/piuccio/cowsay>
* Library link: <https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js>

### At app-level

Navigate to the settings page and then click the plus sign **+** under the **JavaScript library** tab. Paste the **cowsay** link and click **Add New**.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-efa0e9d94a4b923fca1a7e60a69129a79bd4c576%2F01.png?alt=media" alt=""><figcaption></figcaption></figure>

Create a JS query and insert code.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-7b4159f6aa9ecf480a18f11809278b6c39863433%2F02.png?alt=media" alt=""><figcaption></figcaption></figure>

You can obtain the same result by calling the `cowsay.say()` method in the value of the text component.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-983783686b7e8dcba1845c8925a7dbda15c91c26%2F03.png?alt=media" alt=""><figcaption></figcaption></figure>

Note that the cowsay library is imported at app-level and you can not use it in any other app within your workspace.

### At workspace-level

Go to PocketBlocks Homepage, select **Settings** > **Advanced**, and then click **Add** under the **JavaScript library** tab. Paste the link of the third-party JS library and click **Add New** to add it to your workspace. The installed libraries are accessible from any app within your workspace.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-15db33a7fa64f2210f7c27deb5153943476b2aa9%2F04.png?alt=media" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://pocketblocks.pedroza.dev/build-apps/write-javascript/use-third-party-libraries.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.