# Javascript

URL: https://docs.blux.cc/javascript

Integrate Blux into any JavaScript project using the core SDK.

The `@bluxcc/core` package is framework-agnostic — use it in any JavaScript or TypeScript project without a framework dependency.

## Installation

Install the Blux core SDK using your package manager of choice:

<Tabs items={['npm', 'pnpm', 'yarn']} defaultIndex={0}>
  <Tab value="npm">
```bash
    npm install @bluxcc/core
```
  </Tab>
  <Tab value="pnpm">
```bash
    pnpm add @bluxcc/core
```
  </Tab>
  <Tab value="yarn">
```bash
    yarn add @bluxcc/core
```
  </Tab>
</Tabs>

## Setup

Call `createConfig` once at the entry point of your application to initialize Blux. Do not call it more than once. The only required option is `appId`. Leave out `networks` and the app uses Mainnet. Leave out `appName` and Blux uses `"App"`.

<Tabs items={['ESM', 'CJS', 'HTML (CDN)']} defaultIndex={0}>
  <Tab value="ESM">
```ts
    import { createConfig } from "@bluxcc/core";

    createConfig({
      appId: "your-app-id",
    });
```
  </Tab>
  <Tab value="CJS">
```ts
    const { createConfig } = require("@bluxcc/core");

    createConfig({
      appId: "your-app-id",
    });
```
  </Tab>
  <Tab value="HTML (CDN)">
```html
    <script src="https://cdn.jsdelivr.net/npm/@bluxcc/core/dist/index.iife.js"></script>

    <script>
      Blux.createConfig({
        appId: "your-app-id",
      });
    </script>
```
  </Tab>
</Tabs>

## Use it

After `createConfig`, open the built-in modals from the `blux` object.

```ts

blux.login();
```

<Cards>
  {getPageTreePeers(source.getPageTree(), '/javascript').map((peer) => (
    <Card key={peer.url} title={peer.name} href={peer.url}>
      {peer.description}
    </Card>
  ))}
</Cards>