Skip to content
TREB Docs

Getting Started

There are two ways to embed a spreadsheet in a web page. One is to include a script in your web page and add spreadsheets using HTML tags. The other way is to use the API.

If you are using a front-end bundler or javascript framework, you probably want to use the API. See the examples for Astro, Svelte or React.

The rest of this page will discuss embedding a spreadsheet using HTML tags and a script.

Embedding a spreadsheet

Here’s a simple web page that embeds a spreadsheet:

<!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

First we load the script file, then we add a <treb-spreadsheet> tag for the spreadsheet. This is a custom element, defined in the script.

In this example, we’re loading the script file from the unpkg CDN. That’s an easy way to get started, but if you prefer you can download the script and use your own copy.

Loading a document

The next step is usually loading a document. To do that, add a document attribute to the tag with the path to your document:

    <treb-spreadsheet document="/examples/financial-statement.treb.json" />

    <treb-spreadsheet document="/examples/financial-statement.treb.json" />

That will load the document when the spreadsheet is created.

For more on documents, see the Documents article.

Configuration

Next you might want to set some options to configure the spreadsheet. When using the custom element to embed a spreadsheet, you can pass options as attributes.

For example, to add the spreadsheet toolhar, we can add a toolbar attribute. Setting this to show means show the toolbar:

    <treb-spreadsheet document="/examples/financial-statement.treb.json"

      toolbar="show"/>

    <treb-spreadsheet document="/examples/financial-statement.treb.json"

      toolbar="show"/>

Note that the HTML tag extends over two lines in our example. It’s OK to do that in HTML.

Now the spreadsheet has a toolbar, which you can show/hide with a button in the sidebar. (Also the toolbar is too wide for this page; you can scroll it horizontally using shift-scroll).

For more on options, see the Configuration article.

Styles

TREB is styled using CSS. Any spreadsheet cell might have a different background or text color, but styling controls the default colors, fonts, and so on.

Most styles can be set using CSS variables. For example, let’s change the default font for a typewriter look:

    <!-- update the spreadsheet theme -->

    <style>

      :root { 

        --treb-grid-font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;

      }

    </style>

    <!-- update the spreadsheet theme -->

    <style>

      :root { 

        --treb-grid-font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;

      }

    </style>

For more on styling, see the Themes and styles article.

Layout

When a spreadsheet is created, if the containing node has a width and height the spreadsheet will stay that size. Otherwise, it will get a default width and height.

So generally to use a specific layout, use an HTML node with either a CSS class or inline style with a specific size.

Finished example

Here’s the finished exaple from this page:

<!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>



    <!-- update the spreadsheet theme -->

    <style>

      :root { 

        --treb-grid-font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;

      }

    </style>



  </head>

  <body>

    

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

    <treb-spreadsheet document="/examples/financial-statement.treb.json"

      toolbar="show"/>



  </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>



    <!-- update the spreadsheet theme -->

    <style>

      :root { 

        --treb-grid-font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;

      }

    </style>



  </head>

  <body>

    

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

    <treb-spreadsheet document="/examples/financial-statement.treb.json"

      toolbar="show"/>



  </body>



</html>
Open this example in a new tab