Skip to content
TREB Docs

Inline Documents

In most of our examples, we show you how to load a document from a separate file — that file might be hosted on your webserver or it could be hosted on a different webserver. In either case, we load the document using a URL that points to the resource.

Sometimes you might want to include the document right in the HTML page. This can be useful when you have limited access to the web host, or it has limited capabilities.

This is also a really easy way to get started and test what files look like.

Using the Custom HTML Tag

Inline documents work with the custom HTML tag <treb-element/>. If you’re using the API, you can include a document in your script like any other string.

A basic HTML file using the custom HTML tag looks like this:

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf8">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <!-- load the script. we're loading from a CDN. -->

    <script type="module" src="https://unpkg.com/@trebco/treb"></script>



  </head>

  <body>

    

    <!-- insert a spreadsheet in the document -->

    <treb-spreadsheet/>



  </body>

</html>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf8">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <!-- load the script. we're loading from a CDN. -->

    <script type="module" src="https://unpkg.com/@trebco/treb"></script>



  </head>

  <body>

    

    <!-- insert a spreadsheet in the document -->

    <treb-spreadsheet/>



  </body>

</html>
Open this example in a new tab

Thie highlighted lines show where we’re loading TREB (the <script/> tag) and how we’re including a spreadsheet in the webpage (using the <treb-element/> tag).

Adding an Inline Document

There are two steps to adding an inline document:

  • Add the inline-document attribute to the spreadsheet tag

    This attribute is like any other option you would set when configuring a spreadsheet. It tells the script to look for a document when loading.

  • Add a script element containing the document

    The script tag must have the type set to application/json. That prevents the web browser from trying to execute any code in this tag. The content of the tag is the JSON text of the document.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf8">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <!-- load the script. we're loading from a CDN. -->

    <script type="module" src="https://unpkg.com/@trebco/treb"></script>



  </head>

  <body>

    

    <!-- insert a spreadsheet in the document -->

    <treb-spreadsheet inline-document>

      <script type="application/json">

        {"app":"treb","version":"21.6.0","revision":76,"name":"Financial statement","decimal_mark":".","sheet_data":[{"id":100,"name":"Sheet1","data":[{"column":1,"cells":[{"row":2,"value":"Net sales:"},{"row":3,"value":"Products"},{"row":4,"value":"Services"},{"row":5,"value":"Total net sales","style_ref":1},{"row":7,"value":"Cost of sales:"},{"row":8,"value":"Products"},{"row":9,"value":"Services"},{"row":10,"value":"Total cost of sales","style_ref":1},{"row":11,"value":"Gross margin","style_ref":1}]},{"column":2,"cells":[{"row":1,"value":"Three months ended","merge_area":{"start":{"row":1,"column":2},"end":{"row":1,"column":4}},"style_ref":2},{"row":2,"value":44256,"style_ref":3},{"row":3,"value":63355,"style_ref":4},{"row":4,"value":19604,"style_ref":5},{"row":5,"value":"=Sum(C4:C5)","style_ref":6},{"row":8,"value":41485,"style_ref":4},{"row":9,"value":5589,"style_ref":5},{"row":10,"value":"=Sum(C9:C10)","style_ref":7},{"row":11,"value":"=C6 - C11","style_ref":6}]},{"column":4,"cells":[{"row":2,"value":44621,"style_ref":3},{"row":3,"value":63398,"style_ref":4},{"row":4,"value":17486,"style_ref":5},{"row":5,"value":"=Sum(E4:E5)","style_ref":6},{"row":8,"value":40899,"style_ref":4},{"row":9,"value":5280,"style_ref":5},{"row":10,"value":"=Sum(E9:E10)","style_ref":7},{"row":11,"value":"=E6 - E11","style_ref":6}]}],"sheet_style":{},"rows":13,"columns":6,"cell_styles":[{"row":6,"column":2,"ref":4,"rows":2},{"row":3,"column":3,"ref":4,"rows":2},{"row":5,"column":3,"ref":6},{"row":6,"column":3,"ref":4,"rows":4},{"row":10,"column":3,"ref":6,"rows":2},{"row":1,"column":4,"ref":2},{"row":6,"column":4,"ref":4,"rows":2}],"styles":[{},{"bold":true},{"horizontal_align":"center","border_bottom":1},{"horizontal_align":"center","number_format":"mmm-yyyy","border_bottom":1},{"number_format":"_(#,##0_);(#,##0);-???"},{"number_format":"_(#,##0_);(#,##0);-???","border_bottom":1},{"number_format":"_(#,##0_);(#,##0);-???","bold":true},{"number_format":"_(#,##0_);(#,##0);-???","bold":true,"border_bottom":1}],"row_style":{},"column_style":{},"default_row_height":25,"default_column_width":100,"row_height":{"0":19},"column_width":{"0":15,"1":208,"3":14},"selection":{"target":{"row":11,"column":4,"sheet_id":100},"area":{"start":{"row":11,"column":4,"sheet_id":100},"end":{"row":11,"column":4}},"empty":false},"annotations":[]}],"active_sheet":100}

      </script>

    </treb-spreadsheet>



  </body>

</html>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf8">

    <meta name="viewport" content="width=device-width,initial-scale=1">



    <!-- load the script. we're loading from a CDN. -->

    <script type="module" src="https://unpkg.com/@trebco/treb"></script>



  </head>

  <body>

    

    <!-- insert a spreadsheet in the document -->

    <treb-spreadsheet inline-document>

      <script type="application/json">

        {"app":"treb","version":"21.6.0","revision":76,"name":"Financial statement","decimal_mark":".","sheet_data":[{"id":100,"name":"Sheet1","data":[{"column":1,"cells":[{"row":2,"value":"Net sales:"},{"row":3,"value":"Products"},{"row":4,"value":"Services"},{"row":5,"value":"Total net sales","style_ref":1},{"row":7,"value":"Cost of sales:"},{"row":8,"value":"Products"},{"row":9,"value":"Services"},{"row":10,"value":"Total cost of sales","style_ref":1},{"row":11,"value":"Gross margin","style_ref":1}]},{"column":2,"cells":[{"row":1,"value":"Three months ended","merge_area":{"start":{"row":1,"column":2},"end":{"row":1,"column":4}},"style_ref":2},{"row":2,"value":44256,"style_ref":3},{"row":3,"value":63355,"style_ref":4},{"row":4,"value":19604,"style_ref":5},{"row":5,"value":"=Sum(C4:C5)","style_ref":6},{"row":8,"value":41485,"style_ref":4},{"row":9,"value":5589,"style_ref":5},{"row":10,"value":"=Sum(C9:C10)","style_ref":7},{"row":11,"value":"=C6 - C11","style_ref":6}]},{"column":4,"cells":[{"row":2,"value":44621,"style_ref":3},{"row":3,"value":63398,"style_ref":4},{"row":4,"value":17486,"style_ref":5},{"row":5,"value":"=Sum(E4:E5)","style_ref":6},{"row":8,"value":40899,"style_ref":4},{"row":9,"value":5280,"style_ref":5},{"row":10,"value":"=Sum(E9:E10)","style_ref":7},{"row":11,"value":"=E6 - E11","style_ref":6}]}],"sheet_style":{},"rows":13,"columns":6,"cell_styles":[{"row":6,"column":2,"ref":4,"rows":2},{"row":3,"column":3,"ref":4,"rows":2},{"row":5,"column":3,"ref":6},{"row":6,"column":3,"ref":4,"rows":4},{"row":10,"column":3,"ref":6,"rows":2},{"row":1,"column":4,"ref":2},{"row":6,"column":4,"ref":4,"rows":2}],"styles":[{},{"bold":true},{"horizontal_align":"center","border_bottom":1},{"horizontal_align":"center","number_format":"mmm-yyyy","border_bottom":1},{"number_format":"_(#,##0_);(#,##0);-???"},{"number_format":"_(#,##0_);(#,##0);-???","border_bottom":1},{"number_format":"_(#,##0_);(#,##0);-???","bold":true},{"number_format":"_(#,##0_);(#,##0);-???","bold":true,"border_bottom":1}],"row_style":{},"column_style":{},"default_row_height":25,"default_column_width":100,"row_height":{"0":19},"column_width":{"0":15,"1":208,"3":14},"selection":{"target":{"row":11,"column":4,"sheet_id":100},"area":{"start":{"row":11,"column":4,"sheet_id":100},"end":{"row":11,"column":4}},"empty":false},"annotations":[]}],"active_sheet":100}

      </script>

    </treb-spreadsheet>



  </body>

</html>
Open this example in a new tab

When to use Inline Documents

The primary benefit of using inline documents is that they don’t require any other files to be installed on the web server. They also load with one fewer network request, which may be helpul (although for most modern web servers this won’t really make much of a difference).