Getting started with Tinybird.js

Tinybird.js is a JavaScript library that helps you build big data analytics applications through Tinybird Analytics. It is part of the Tinybird Analytics ecosystem, which also includes a RESTful API and a Web UI to help you manage your data, queries, API endpoints and Auth tokens.

Among other things, Tinybird.js provides you with an easy way to:

  • Import and append data into Tinybird Analytics.

  • Run live queries from your serverless applications. No back-end needed.

  • Build and run ETL pipelines.

  • Render specific visualization components.

  • Perform analytics in a secure environment.

Using the library

You need an Auth token to get started. Go to the Web UI and open the Auth token modal under your user settings. Once you have your Auth token, you can specify it in the code when initializaing the tinybird() object.

Initializing tinybird.js with an Auth Token
//norun
let tinyb = tinybird(your_auth_token)

Note that once you are logged in to the Web UI, all the examples in this documentation will (where possible) already include the necessary tokens for you to be able to copy and paste them directly into your apps.

You can use Tinybird.js by including it directly in your html files or you can use a module bundler.

Using Tinybird.js through Tinybird Analytics’ CDN

Include the JavaScript library in your HTML file.

Add tinybird.js to your html
<script src='https://cdn.tinybird.co/v1/tinybird.js'></script>

Once you have included the library, insert the following code in your app to make a basic query right from your frontend application.

Query data with javascript
// tinybird.js constructor function requires an Auth token.
let tinyb = tinybird('<token>')
let res = await tinyb.query('select * from <pipe> LIMIT 3')
console.log(res.data[0])
console.log("query time: " + res.statistics.elapsed)

If you haven’t imported any datasource into your account yet, you can try importing some NYC taxi data or the NYC Tree Atlas to test with data in your own account.

Using a module bundler

You can also install Tinybird.js using npm

Install as a module
//norun
npm install --save tinybird

CSP directives

For Tinybird.js, you can use this connect-src directive:

csp directives
connect-src https://api.tinybird.co

Next steps

Now that you know how to include Tinybird.js in a frontend application and how to issue basic queries, learn more about how to import data or manage your datasources programatically.