Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Box
✓ <!-- Load T3.js via script tag in HTML -->
<script src="https://cdn.rawgit.com/box/t3js/v2.7.0/dist/t3.js"></script>
// Then access globally in your JavaScript
const app = Box.Application;
✗ import { Box } from 't3js';
// OR
const Box = require('t3js');
T3.js exposes the 'Box' object as a global variable after being loaded via a <script> tag. It does not provide CommonJS or ES module exports, so direct 'import' or 'require' statements will not work.
Box.Application
✓ Box.Application.addModule('my-module', function(context) { /* ... */ });
✗ import { Application } from 't3js';
// OR
const app = require('t3js').Application;
The core application instance, 'Box.Application', is accessed directly as a property of the global 'Box' object. No direct module import for this symbol exists.
addModule
✓ Box.Application.addModule('my-module', function(context) {
var moduleEl;
function init() { /* ... */ }
function destroy() { /* ... */ }
return { init: init, destroy: destroy };
});
✗ import { addModule } from 't3js.Application';
// OR
Application.addModule('my-module', ...); // if 'Application' is not globally defined
Modules are registered by calling the 'addModule' method directly on the global 'Box.Application' instance. It is not available as a standalone import or property of the 'Box' global itself.
This quickstart demonstrates how to define and initialize a T3 module, attach a behavior for event handling, define a service, and initialize the entire T3 application within an HTML page. It showcases core T3 patterns like `data-module` attributes, `Box.Application.addModule`, `context.attachBehavior`, and `context.getService`.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T3 Quickstart</title>
<!-- Load T3.js - ensure this path is correct or use a CDN -->
<script src="https://cdn.rawgit.com/box/t3js/v2.7.0/dist/t3.js"></script>
</head>
<body>
<div data-module="my-greeter">
<h1 data-element="greeting-message">Loading...</h1>
<button data-behavior="greet-button">Say Hello</button>
</div>
<script>
// Define a T3 Module
Box.Application.addModule('my-greeter', function(context) {
var greetingMessageElement;
function init() {
greetingMessageElement = context.getElement('greeting-message');
// Attach a behavior for declarative event handling
context.attachBehavior('greet-button', greetBehavior);
updateGreeting('Initial message');
}
function destroy() {
greetingMessageElement = null;
}
function updateGreeting(message) {
if (greetingMessageElement) {
greetingMessageElement.textContent = message;
}
}
// Define a Behavior
var greetBehavior = {
onclick: function() {
const myService = context.getService('my-time-service');
const time = myService ? myService.getCurrentTime() : 'unknown time';
updateGreeting(`Hello from T3 at ${time}!`);
}
};
return {
init: init,
destroy: destroy,
// Expose a method if needed for other modules/services
updateMessage: updateGreeting
};
});
// Define a T3 Service
Box.Application.addService('my-time-service', function() {
function getCurrentTime() {
return new Date().toLocaleTimeString();
}
return { getCurrentTime: getCurrentTime };
});
// Initialize the T3 Application when the DOM is ready
document.addEventListener('DOMContentLoaded', function() {
Box.Application.init();
console.log('T3 Application Initialized.');
// You can also get a service directly after init
const timeService = Box.Application.getService('my-time-service');
if (timeService) {
console.log('Current time via service:', timeService.getCurrentTime());
}
});
</script>
</body>
</html>
Errors
Common errors & fixes
ReferenceError: Box is not defined
The T3.js library script has not been loaded, or it was loaded after your application code attempted to access the global 'Box' object.
fixEnsure that the `<script>` tag for `t3.js` is placed in your HTML *before* any custom JavaScript code that uses `Box.Application` or other T3 components. Verify the script path and network availability.
TypeError: Box.Application.addModule is not a function
This error typically indicates that the `Box.Application` object is not available or fully initialized when `addModule` is called, usually because the `t3.js` script failed to load or loaded out of order.
fixCheck the browser's developer console for errors during script loading. If you are using an async script load or defer, ensure your application code waits for the `DOMContentLoaded` event before interacting with T3.
Error: Module 'my-module-name' not found on element
This error occurs when `Box.Application.start()` (or `init()`) attempts to find a module for a DOM element with a `data-module` attribute, but no corresponding module has been registered with `Box.Application.addModule()` for that specific name.
fixVerify that the string value in your HTML's `data-module="my-module-name"` attribute exactly matches the module name provided in your JavaScript: `Box.Application.addModule('my-module-name', ...)`. Audit
Dependencies
jqueryoptionalRequired for specific T3 builds (e.g., t3-jquery.js) to support older browsers like IE8 and jQuery versions 1.8.0+.