TREB logo (a leaf)

How to: embed a spreadsheet in a web page

There are two steps to embedding TREB into a web page. You need to include the main javascript file, and then you need to load the spreadsheet.

To load the script file, add this tag to your document:

<script src='https://treb.app/treb/current/embedded-treb-bundle.js'></script>

The main script file is about 160kB gzipped, and less than 120kB compressed with brotli. You can link to the script files on our site, or download the script files and host them on your own webserver.

The easiest way to add a spreadsheet is to just include a div tag with a data-treb attribute pointing to the file:

<div data-treb='https://treb.app/doc/iris.treb'></div>

If you add both of those to your web page, you should get this:


The script will set up everything. You can set some options when using the embed tag; see this page for details.

There is a default size for embedded spreadsheets, but if your containing element has a size (if you set it in your page style, for example), the spreadsheet will stay that size. Spreadsheets are resizable by default, but you can disable that.

Embedding Part 2 (Advanced)

Modern browsers (basically everything but IE11) can use ES6. Relative to the equivalent code in ES5, ES6 is generally smaller and faster to parse. You can optionally send ES6 code to browsers that can read it using the module/nomodule attributes in script tags.

The way to optionally load code based on the browser version is to include two script tags. The first one points to the base (ES5) version, but it includes a nomodule attribute. The nomodule attribute tells browsers that understand modules to ignore it.

The second tag loads the ES6 script, but sets the type attribute to module. This doesn’t mean the code is a module, but only browsers that understand modules will load it.

<!-- for older browsers -->
<script type="text/javascript" nomodule 
        src="/path/to/embedded-treb-bundle.js"></script>

<!-- for modern browsers -->
<script type="module" src="/path/to/embedded-treb-bundle-es6.js"></script>

Using this pair of script tags, older browsers will load the ES5 code and modern browsers will load the ES6 code.

If the loaded script needs to load any other files (for the formatting toolbar, import/export, et cetera) it will load the matching ES5/ES6 version.

Interacting with the Spreadsheet

For any spreadsheet instance loaded using the embed tag (above), we attach a reference to the spreadsheet object _spreadsheet to the containing div element. You can use that reference to interact with the object via the API.

There’s also an option to call a function when the object is created. This function will be called with the object instance and the containing node. See the options page.