Svelte component

The CloudTables component for Svelte let's you embed tables directly into your Svelte application using the component tag: <CloudTables/> and attributes to configure it.


The CloudTables component for Svelte is available as the @cloudtables/svelte package on npm and can be installed in your Svelte application using:

# npm
npm install --save @cloudtables/svelte
# yarn
yarn add @cloudtables/svelte


After npm has finished installing, import the component in the .svelte file you wish to embed the CloudTable into (e.g. App.svelte)

import CloudTables from '@cloudtables/svelte';

Once imported you can then use the custom <CloudTables/> tag to embed a CloudTable into your application. The attributes available for this tag are:

  • src The custom url for your CloudTable which can be seen in the Embed page for your data set.
  • apiKey would be replaced by your API Key (see the Security / API Keys section in your CloudTables application), or
  • token server side generated secure access token that can be used instead of an apiKey
  • userId is optional, but will be used to uniquely identify users in the CloudTables interface..
  • userName is also optional, but can be used to help identify who made what changes when reviewing logs in CloudTables. It is recommended you include userId and userName.


When embedding CloudTables into your Svelte application, you can use a secure access token which is generated by a server-side program, or by embedding your access key directly into the tags.

  • API token: We strongly recommend using a server generated secure access token as it will be tied to a single user's session and cannot be reused by anyone else who might intercept the key, or provide any access beyond that specified by the server.
  • API key: The API access is embedded directly into the application, but it means the full access of that key is available to the client.

API token

To generate a secure access token use one of our server-side clients (HTTP REST / cURL, Java, .NET, NodeJS, PHP). Then embed your CloudTable into your Svelte application using:



  • {datasetId} - the ID of the data set you'd like to show (see the data set Embed tab for this information).

Note specifically the use of the token attribute which would be given the value of the token generated by the server.

API key (serverless)

Serverless access is faster to setup since you embed the API key directly into your CloudTables tag (but also less secure, since you expose your API key):


Here the apiKey attribute is used to give the API key to use.