Quickstart: Create Your First Ablo Deck in Minutes

This guide walks you through installing the Ablo Decks SDK, obtaining an API key, and running a complete script that creates a real deck in your Ablo workspace. By the end you will have a working foundation you can build on.

Install the SDK

Add @abloatai/decks to your project. The package is published to npm and works with any Node.js project that supports ES modules or CommonJS.

npm i @abloatai/decks

yarn add @abloatai/decks

pnpm add @abloatai/decks

The package ships with full TypeScript type definitions — no separate @types package is required.

Get your API key

The SDK authenticates every request with a server-side API key tied to your Ablo workspace.

Sign in to tryablo.com and open your workspace.
Navigate to Settings → API.
Copy your API key.

Store the key as an environment variable so it never appears in your source code:

export ABLO_API_KEY="your-api-key-here"

For persistent configuration, add the line above to your shell profile (e.g. ~/.zshrc) or use a .env file with a tool like dotenv.

Never paste your API key directly into source files or commit it to version control. Use environment variables or a secrets manager instead.

Create your first deck

Create a file called deck.ts (or deck.mjs for plain JavaScript) and paste the following code. It creates a deck with one slide that contains a headline text layer and a bar chart showing two quarters of revenue data.

import { Decks } from '@abloatai/decks';

const ablo = new Decks(process.env.ABLO_API_KEY);

const deck = await ablo.decks.create({
  title: 'Q3 Board Update',
  slides: [
    {
      title: 'Revenue',
      layers: [
        {
          type: 'text',
          text: 'Revenue up 40% YoY',
          style: 'h1',
          at: { x: 160, y: 120, w: 1600, h: 160 },
        },
        {
          type: 'bar',
          data: [
            { label: 'Q1', value: 120 },
            { label: 'Q2', value: 168 },
          ],
          at: { x: 160, y: 340, w: 1600, h: 600 },
        },
      ],
    },
  ],
});

console.log('Deck created:', deck.id);

The at object positions each layer on the 1920 × 1080 slide canvas using pixel coordinates: x and y set the top-left corner, w and h set the width and height.

Run the script

Execute the script with Node.js. If you are using TypeScript, compile first with tsc or run directly with ts-node or tsx:

node deck.js

npx tsx deck.ts

npx ts-node deck.ts

A successful run prints the new deck’s ID to your console:

Deck created: dec_01j9z...

Open your Ablo workspace — the deck named Q3 Board Update will appear in your library, ready to preview, share, or refine.

What’s next

Now that you have a working deck, explore the rest of the SDK:

Authentication

Learn all the ways to pass your API key and keep it secure.

API Reference

Browse the full surface area — decks, slides, layers, themes, and more.

Get Started

Core Concepts

Layers

Styling

Guides

Quickstart: Create Your First Ablo Deck in Minutes

What’s next

Authentication

API Reference

​What’s next

Authentication

API Reference

What’s next