Skip to main content
This tutorial shows the recommended path for adding @elata-biosciences/eeg-web to an existing browser application. Use this when your app needs EEG analysis APIs in the browser. If you also need live headset transport, you will add @elata-biosciences/eeg-web-ble after this tutorial.

​
What You Will Build

You will:
  1. install @elata-biosciences/eeg-web
  2. initialize the EEG WASM runtime
  3. run a simple analysis call
  4. verify your app can serve the packaged WASM assets

​
Step 1: Install The Package

pnpm add @elata-biosciences/eeg-web
Or: 
npm install @elata-biosciences/eeg-web

​
Step 2: Create A Small EEG Module

Create a small module in your app so the integration stays isolated and easy to test: 
import { initEegWasm, band_powers } from "@elata-biosciences/eeg-web";

let eegInitPromise: Promise<void> | null = null;

async function ensureEegReady() {
  if (!eegInitPromise) {
    eegInitPromise = initEegWasm();
  }
  await eegInitPromise;
}

export async function analyzeExampleEeg() {
  await ensureEegReady();

  const eegData = new Float32Array([0.2, 0.5, 0.1, -0.3, -0.4, 0.1, 0.2, 0.6]);
  const powers = band_powers(eegData, 256);

  return powers;
}
Why this shape:
  • initEegWasm() should run before using analysis helpers
  • the module-level Promise avoids repeated initialization, including concurrent calls
  • keeping it in one file makes it easier to swap in real samples later

​
Step 3: Call It From Your UI

For example: 
import { analyzeExampleEeg } from "./eeg";

const powers = await analyzeExampleEeg();
console.log("alpha", powers.alpha);
console.log("beta", powers.beta);
At this stage you are not using a real headset yet. You are proving that the browser app can load the runtime and execute the EEG functions correctly.

​
Step 4: Verify The WASM Asset Path

Run your app in development and confirm the module initializes without errors. If initEegWasm() fails, the most likely problem is that your bundler or app deployment is not serving the packaged wasm/ assets correctly. This is the first thing to fix before adding more product logic. If you are using Vite, the two common fixes are:
  1. add vite-plugin-wasm and vite-plugin-top-level-await, then keep using await initEegWasm()
  2. import the WASM asset URL directly and pass it to initEegWasm(wasmUrl)
The guide at EEG In A Browser App shows both patterns. If you are stuck, compare your app against the scaffolded eeg-web-demo template before assuming the package itself is broken.

​
Step 5: Replace Example Data With Real App Data

Once the example call works, swap the placeholder array with actual EEG sample buffers from your app. The common pattern is:
  1. receive or load EEG samples
  2. normalize them into typed arrays
  3. call Elata analysis helpers
  4. map the result into app state, feedback, scoring, or visualizations
That last step is where your product behavior lives.

​
When To Add eeg-web-ble

Add @elata-biosciences/eeg-web-ble when you need live browser transport from a supported Muse-compatible headset. Do not start there if the plain EEG runtime is not working yet. Get WASM loading working first, then add transport.

​
Common Problems

  • initEegWasm() throws: your app is probably not serving packaged wasm/ assets correctly
  • You expected device discovery: eeg-web does not do Bluetooth transport by itself
  • You are evaluating the SDK from scratch: start with Build Your First Elata App instead of manual setup

​
Next Steps