Skip to content
TREB Docs

Svelte

Here’s an example using the ES module in a Svelte or SvelteKit app.

Add the library using npm/yarn/pnpm

npm add -D @trebco/treb

npm add -D @trebco/treb

In a svelte module, import the TREB global instance and the stylesheet; then call CreateSpreadsheet to mount the component

<script lang="ts">



// import the onMount handler from svelte

import { onMount } from 'svelte';



// import TREB module and options type

import { TREB, type EmbeddedSpreadsheetOptions } from '@trebco/treb';



// pass any options as a parameter

export let options: EmbeddedSpreadsheetOptions = {};



// reference to the HTML node we will use to mount the spreadsheet

let container: HTMLElement;



onMount(() => {



  // create spreadsheet, passing options 

  // and a reference to the container node



  TREB.CreateSpreadsheet({

    ...options,

    container,

  });



});



</script>



<div bind:this={container}></div>



<script lang="ts">



// import the onMount handler from svelte

import { onMount } from 'svelte';



// import TREB module and options type

import { TREB, type EmbeddedSpreadsheetOptions } from '@trebco/treb';



// pass any options as a parameter

export let options: EmbeddedSpreadsheetOptions = {};



// reference to the HTML node we will use to mount the spreadsheet

let container: HTMLElement;



onMount(() => {



  // create spreadsheet, passing options 

  // and a reference to the container node



  TREB.CreateSpreadsheet({

    ...options,

    container,

  });



});



</script>



<div bind:this={container}></div>

We call CreateSpreadsheet in a svelte onMount handler so it’s only called client-side (it skips server-side rendering).