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

# Custom view code cannot use package imports

> [!NOTE]
>
> **Applies to:**
>
> * Plan - Any
> * Deployment - Any
> *
> * Use case - Building custom views or visualizations that rely on external package imports

## 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://docs.braintrust.dev/instrument/advanced-tracing.md#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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.