Skip to content
TREB Docs

Vanilla JS and HTML

If you’re not using a front-end framework, you can still use the API to add spreadsheets to your web app. You can use the TREB library from a CDN or download and use a local copy.

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

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

  </head>

  <body>



    <!-- we will add the spreadsheet to this div -->

    <div id='spreadsheet'></div>



    <!-- make sure to use type=module for ES -->

    <script type="module">



      // load the global instance from the script. here we're using

      // the unpkg CDN, but you can use a local copy. in that case 

      // point to the file `treb-spreadsheet.mjs`.

      import { TREB } from "https://unpkg.com/@trebco/treb";



      // start when the DOM is loaded

      window.addEventListener('DOMContentLoaded', () => {



        // get a reference to the node

        const container = document.querySelector('#spreadsheet');



        // create the spreadsheet

        const sheet = TREB.CreateSpreadsheet({

          container,

        });



        // do something with API

        sheet.SetRange('B2', '=RAND()');

        console.info("random value:", sheet.GetRange("B2"));



      });



    </script>



  </body>

</html>

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

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

  </head>

  <body>



    <!-- we will add the spreadsheet to this div -->

    <div id='spreadsheet'></div>



    <!-- make sure to use type=module for ES -->

    <script type="module">



      // load the global instance from the script. here we're using

      // the unpkg CDN, but you can use a local copy. in that case 

      // point to the file `treb-spreadsheet.mjs`.

      import { TREB } from "https://unpkg.com/@trebco/treb";



      // start when the DOM is loaded

      window.addEventListener('DOMContentLoaded', () => {



        // get a reference to the node

        const container = document.querySelector('#spreadsheet');



        // create the spreadsheet

        const sheet = TREB.CreateSpreadsheet({

          container,

        });



        // do something with API

        sheet.SetRange('B2', '=RAND()');

        console.info("random value:", sheet.GetRange("B2"));



      });



    </script>



  </body>

</html>