DocumentationDocumentation
User guide/Frontend development and delivery

Local resources and page restrictions

Understand resource roots, script rules, and supported loading methods for embedded pages.

Page paths are relative to the bound root

bind sets the root; web.local_app('web/index.html') resolves from it. HTML script/image paths resolve from the page; CSS URLs resolve from the stylesheet. Check separately after moving files, not all against the add-on root.

Files load through the local resource channel without a user-started server. Developer-specific absolute paths are not substitutes.

Keep scripts in separate files

Local page references
html
<link rel="stylesheet" href="./style.css">
<button id="run" type="button">Run</button>
<script src="./app.js"></script>

Bind with addEventListener in app.js rather than inline script/onclick. ES modules need resolvable relative URLs. Build bare package imports instead of expecting browser resolution.

Page sources have different capabilities

Location What can be checked Blender communication
Trusted local pages Full add-on UI, actions, state, and resources Available.
Ordinary browser preview Layout and frontend behavior No host bridge.
Loopback development server Frontend development display No injected bridge.
Remote page Existing ordinary-page display scope No bridge to local add-on APIs.

Development servers are not integration shortcuts. New add-ons use trusted local pages; remote access is outside the current integration route.

External pages have no action/state/resource bridge. Avoid using the primary tool window for external navigation when retaining functionality. Acquiring the local SDK cannot grant remote pages the same capabilities.

Do not borrow references across add-ons

Local resources are isolated by add-on/client. Read through references received by the page, not disk paths, other add-ons' references, or expired temporary URLs. Transfer binary data through Publish and read resources.

Trace the loading chain for blank pages

  1. Match local_app with the bound root.
  2. Check HTML script/style and CSS image paths.
  3. Check for inline scripts or bare imports.
  4. Confirm the actual build output and loaded add-on copy.
  5. Once the page works, check bridge presence and registrations.

Do not hide missing resources with empty modules or repeated style overrides.

Based on entry boundaries, resource permissions, and frontend guidance.

Back to User guide · All topics