---
title: Welcome to PostNitro.ai Embed SDK
description: Learn how to integrate PostNitro's carousel maker directly into your web application with our powerful Embed SDK.
canonical: https://postnitro.ai/docs/embed/sdk
---

# Welcome to PostNitro.ai Embed SDK

The PostNitro Embed SDK allows you to **seamlessly integrate our carousel maker directly into your web application**. Whether you're building a content management system, marketing platform, or social media tool, our SDK provides a powerful, user-friendly interface for creating stunning carousel posts.

## Why Use the PostNitro Embed SDK?

The PostNitro Embed SDK gives you complete control over the carousel creation experience within your application. Your users can create, edit, and export carousels without ever leaving your platform.

### Perfect for Web Applications
- **Content Management Systems**: Let users create carousels for their content
- **Marketing Platforms**: Provide visual carousel creation tools
- **Social Media Tools**: Allow users to design posts before publishing
- **Educational Platforms**: Enable students to create educational content
- **E-commerce Platforms**: Let merchants create product showcase carousels

### Key Benefits
- **Seamless Integration**: Embed the carousel maker directly into your website
- **Full Control**: Customize the experience to match your brand
- **Real-time Preview**: Users see their changes instantly
- **Multiple Export Formats**: PNG, PDF, and MP4 support
- **Brand Integration**: Apply your brand colors, fonts, and templates
- **User Management**: Handle user authentication and data persistence

## How It Works

### 1. **SDK Integration Workflow**
```mermaid
graph LR
    A[Your Web App] --> B[PostNitro SDK]
    B --> C[Carousel Maker Interface]
    C --> D[User Creates/Edits]
    D --> E[Export Data]
    E --> F[Your App Handles Data]
```

### 2. **User Experience Flow**
```mermaid
graph LR
    A[User Clicks Create] --> B[SDK Opens Interface]
    B --> C[User Designs Carousel]
    C --> D[User Saves/Exports]
    D --> E[Data Returns to Your App]
    E --> F[Your App Processes Data]
```

## SDK Capabilities

### Core Features
- **Create New Carousels**: Start from scratch with templates
- **Edit Existing Carousels**: Modify saved carousels
- **Real-time Preview**: See changes as you make them
- **Multiple Export Formats**: PNG, PDF, and MP4
- **Brand Integration**: Apply your brand identity
- **Template Support**: Use pre-designed templates

### Customization Options
- **Default Headshot**: Set default branding for new users
- **API Key Management**: Secure authentication
- **Callback Handling**: Custom data processing
- **Error Handling**: Robust error management

### Export Data Structure
```typescript
interface ExportData {
    id: string;           // Unique identifier for the content
    name: string;         // User-defined content name
    size: string;         // Aspect ratio (e.g., "16:9", "1:1", "9:16")
    type: string;         // Export format: "pdf", "png", or "mp4"
    data: Blob | Blob[];  // File data - single Blob for PDF/MP4, Blob array for PNG
}
```

## Getting Started

### 1. **Sign Up for PostNitro.ai**
- Create your account at [PostNitro.ai](https://postnitro.ai)
- Set up your brand profile and templates
- Get your API key from account settings

### 2. **Install the SDK**

#### Using Package Manager (Recommended)
```bash
# Using npm
npm install @postnitro/embed

# Using yarn
yarn add @postnitro/embed

# Using pnpm
pnpm add @postnitro/embed
```

#### Using CDN (Traditional)
```html
<script src="https://cdn.jsdelivr.net/npm/@postnitro/embed/dist/index.umd.js"></script>
```

### 3. **Initialize the SDK**

#### Module Import (Modern Frameworks)
```typescript
import { createEditor } from "@postnitro/embed";

const editor = createEditor({
    apiKey: "your-api-key",
    defaultHeadshot: {
        name: 'Your Brand',
        logo: 'https://your-brand.com/logo.png',
        handle: 'Your Brand Handle',
    }
});
```

#### Script Import (Traditional)
```typescript
const editor = window.postnitroEmbed.createEditor({
    apiKey: "your-api-key",
    defaultHeadshot: {
        name: 'Your Brand',
        logo: 'https://your-brand.com/logo.png',
        handle: 'Your Brand Handle',
    }
});
```

### 4. **Start Creating Carousels**

#### Create a New Carousel
```typescript
editor.createDesign((data: ExportData) => {
    console.log('Carousel created:', data);
    
    // Handle the exported data
    if (data.type === 'png') {
        // Handle PNG images (array of Blobs)
        data.data.forEach((blob, index) => {
            const url = URL.createObjectURL(blob);
            // Save or display the image
        });
    } else if (data.type === 'pdf') {
        // Handle PDF (single Blob)
        const url = URL.createObjectURL(data.data as Blob);
        // Save or display the PDF
    }
});
```

#### Edit an Existing Carousel
```typescript
editor.editDesign('your-carousel-id', (data: ExportData) => {
    console.log('Carousel updated:', data);
    
    // Handle the updated data
    // Similar to createDesign handling
});
```

## Integration Examples

### React/Next.js Integration
```tsx
'use client'

import { createEditor, ExportData } from "@postnitro/embed";
import { useState } from "react";

export default function CarouselCreator() {
    const [editor] = useState(() => createEditor({
        apiKey: process.env.NEXT_PUBLIC_POSTNITRO_API_KEY,
        defaultHeadshot: {
            name: 'My App',
            logo: '/logo.png',
            handle: 'Create amazing content',
        }
    }));

    const handleCreateCarousel = () => {
        editor.createDesign((data: ExportData) => {
            // Handle the carousel data
            console.log('New carousel:', data);
            
            // Save to your database
            saveCarouselToDatabase(data);
        });
    };

    const handleEditCarousel = (carouselId: string) => {
        editor.editDesign(carouselId, (data: ExportData) => {
            // Handle the updated carousel data
            console.log('Updated carousel:', data);
            
            // Update in your database
            updateCarouselInDatabase(carouselId, data);
        });
    };

    return (
        <div className="carousel-creator">
            <button onClick={handleCreateCarousel}>
                Create New Carousel
            </button>
            <button onClick={() => handleEditCarousel('existing-id')}>
                Edit Carousel
            </button>
        </div>
    );
}
```

### Vanilla JavaScript Integration
```html
<!DOCTYPE html>
<html>
<head>
    <title>Carousel Creator</title>
</head>
<body>
    <button id="createBtn">Create Carousel</button>
    <button id="editBtn">Edit Carousel</button>

    <script src="https://cdn.jsdelivr.net/npm/@postnitro/embed/dist/index.umd.js"></script>
    <script>
        const editor = window.postnitroEmbed.createEditor({
            apiKey: "your-api-key",
            defaultHeadshot: {
                name: 'My Website',
                logo: '/logo.png',
                handle: 'Create content',
            }
        });

        document.getElementById('createBtn').addEventListener('click', () => {
            editor.createDesign((data) => {
                console.log('Carousel created:', data);
                
                // Handle the data based on type
                if (data.type === 'png') {
                    // Handle multiple PNG images
                    data.data.forEach((blob, index) => {
                        const url = URL.createObjectURL(blob);
                        // Create download link or display image
                        const link = document.createElement('a');
                        link.href = url;
                        link.download = `${data.name}-slide-${index + 1}.png`;
                        link.click();
                    });
                }
            });
        });

        document.getElementById('editBtn').addEventListener('click', () => {
            editor.editDesign('your-carousel-id', (data) => {
                console.log('Carousel updated:', data);
                // Handle updated data
            });
        });
    </script>
</body>
</html>
```

### Vue.js Integration
```vue
<template>
    <div class="carousel-creator">
        <button @click="createCarousel">Create Carousel</button>
        <button @click="editCarousel">Edit Carousel</button>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { createEditor } from '@postnitro/embed';

const editor = ref(null);

onMounted(() => {
    editor.value = createEditor({
        apiKey: import.meta.env.VITE_POSTNITRO_API_KEY,
        defaultHeadshot: {
            name: 'Vue App',
            logo: '/logo.png',
            handle: 'Vue-powered content',
        }
    });
});

const createCarousel = () => {
    editor.value?.createDesign((data) => {
        console.log('Carousel created:', data);
        // Handle the data
    });
};

const editCarousel = () => {
    editor.value?.editDesign('your-carousel-id', (data) => {
        console.log('Carousel updated:', data);
        // Handle the data
    });
};
</script>
```

## Best Practices

### 1. **Error Handling**
```typescript
try {
    editor.createDesign((data) => {
        // Handle success
    });
} catch (error) {
    console.error('Failed to create carousel:', error);
    // Handle error appropriately
}
```

### 2. **Data Management**
- Always validate the ExportData before processing
- Handle different export types appropriately
- Clean up object URLs to prevent memory leaks
- Store carousel IDs for future editing

### 3. **User Experience**
- Show loading states while the carousel maker is opening
- Provide clear feedback when carousels are saved
- Handle network errors gracefully
- Offer multiple export format options

### 4. **Security**
- Never expose your API key in client-side code
- Use environment variables for sensitive data
- Validate all user inputs
- Implement proper authentication

## Configuration Options

### Editor Configuration
```typescript
interface EditorConfig {
    apiKey: string;                    // Required: Your PostNitro API key
    defaultHeadshot?: {                // Optional: Default branding
        name: string;
        logo: string;
        handle: string;
    };
    // Additional configuration options may be available
}
```

### Export Data Handling
```typescript
// Handle PNG exports (multiple images)
if (data.type === 'png' && Array.isArray(data.data)) {
    data.data.forEach((blob, index) => {
        const url = URL.createObjectURL(blob);
        // Process each slide image
    });
}

// Handle PDF exports (single document)
if (data.type === 'pdf') {
    const url = URL.createObjectURL(data.data as Blob);
    // Process the PDF document
}

// Handle MP4 exports (video)
if (data.type === 'mp4') {
    const url = URL.createObjectURL(data.data as Blob);
    // Process the video file
}
```

## Troubleshooting

### Common Issues

#### SDK Not Loading
- Check your internet connection
- Verify the CDN URL is correct
- Ensure the script is loaded before initialization

#### API Key Errors
- Verify your API key is correct
- Check if your account is active
- Ensure you have sufficient credits

#### Export Issues
- Check if the carousel data is valid
- Verify the export format is supported
- Handle large file sizes appropriately

### Getting Help
- **Email Support**: [support@postnitro.ai](mailto:support@postnitro.ai)
- **Live Chat**: Available on [postnitro.ai](https://postnitro.ai)
- **Documentation**: Check our detailed guides for specific issues

## Ready to Get Started?

1. **Sign up** at [PostNitro.ai](https://postnitro.ai)
2. **Get your API key** from your account settings
3. **Install the SDK** using your preferred method
4. **Initialize** the editor in your application
5. **Start creating** amazing carousel content

Transform your web application with powerful carousel creation capabilities. Start integrating today! 🚀