> ## Documentation Index
> Fetch the complete documentation index at: https://braintrust.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom view code cannot use package imports

export const plans_0 = "Any"

export const deployments_0 = "Any"

export const data_plane_version_0 = undefined

export const use_case_0 = "Use case - Building custom views or visualizations that rely on external package imports"

<Note>
  **Applies to:**

  * Plan - {plans_0}
  * Deployment - {deployments_0}
  * {data_plane_version_0}
  * {use_case_0}
</Note>

## Summary

**Issue:** Custom view code that uses `import` or `require` statements fails silently — external packages are unavailable at runtime.

**Cause:** The custom view sandbox explicitly strips all `import` and `require` calls before executing code. This is a security measure because Braintrust cannot validate arbitrary third-party code.

**Resolution:** Rewrite the component without external dependencies, or use the span iframes feature to render custom content with full access to external libraries.

## How custom view code execution works

### Security sandbox environment

Custom views run in an isolated sandbox, completely separate from your local project environment. The sandbox receives only your component code, trace data, and span data via `postMessage` communication.

Before execution, the sandbox preprocessor automatically strips all `import` and `require` statements from your code. Any references to imported modules will throw runtime errors since the modules are never loaded.

### Available APIs and libraries

The sandbox provides access to:

* Native browser APIs (Canvas, SVG, DOM manipulation, fetch)
* React primitives and hooks
* A small set of pre-bundled libraries (exact list not publicly documented)

Your local `node_modules` directory and any packages you've installed are not accessible to custom view code.

### Alternative for external dependencies

For visualizations requiring external libraries like D3, Recharts, or domain-specific packages, use the [span iframes feature](https://www.braintrust.dev/docs/instrument/advanced-tracing#customize-span-rendering) instead.

Span iframes render a fully custom HTML page inside the trace view. You control the entire document, so you can load external scripts via CDN `<script>` tags:

```html theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  </head>
  <body>
    <svg id="chart"></svg>
    <script>
      // Full access to d3 and any other CDN-loaded library
    </script>
  </body>
</html>
```

This approach bypasses the custom view sandbox limitations while maintaining security through standard browser iframe isolation.
