Skip to Content
Pindown.ai is in early alpha - features may change
API GuideCreating a Page

Creating a Page

Learn how to create a page and add pins to it - building your first structured document.

Overview

This guide demonstrates how to create pages:

  1. Create a Page - Your document container
  2. Create Pins - Individual content items (stats, charts, markdown, etc.)
  3. Add Pins to Page - Build your document sequentially

Step 1: Create a Page

First, create a page for your document.

import { PindownClient } from '@pindownai/client-js'
 
const client = new PindownClient({
  apiKey: process.env.PINDOWN_API_KEY
})
 
const page = await client.pages.create({
  metadata: {
    title: 'Monthly Sales Report',
    tags: ['sales', 'monthly', 'report']
  }
})
 
console.log('Page created:', page.id)

Step 2: Create Pins

Create pins that will be added to your page.

// Create a markdown pin for header
const headerPin = await client.pins.create({
  pin_type: 'markdown',
  pin_config: {
    content: '# Monthly Sales Report\n\n## Executive Summary\n\nThis month showed strong growth...'
  },
  metadata: {
    title: 'Report Header'
  }
})
 
// Create a stat cards pin
const statsPin = await client.pins.create({
  pin_type: 'stat-cards',
  pin_config: {
    cards: [
      {
        title: 'Total Revenue',
        value: '$145,230',
        change: '+23.5%',
        trend: 'up'
      },
      {
        title: 'Orders',
        value: '1,450',
        change: '+12.1%',
        trend: 'up'
      }
    ]
  },
  metadata: {
    title: 'Key Metrics'
  }
})
 
// Create a line chart pin
const chartPin = await client.pins.create({
  pin_type: 'line-chart',
  pin_config: {
    title: 'Sales Over Time',
    data: [
      { date: '2024-01-01', value: 1200 },
      { date: '2024-01-02', value: 1450 },
      { date: '2024-01-03', value: 1680 }
    ]
  },
  metadata: {
    title: 'Revenue Trend'
  }
})
 
console.log('Pins created:', headerPin.id, statsPin.id, chartPin.id)

Step 3: Add Pins to Page

Add pins to your page in the order you want them to appear.

// Add header pin (appears first)
await client.pages.addPin(page.id, {
  pin_id: headerPin.id
})
 
// Add stats pin (appears second)
await client.pages.addPin(page.id, {
  pin_id: statsPin.id
})
 
// Add chart pin (appears third)
await client.pages.addPin(page.id, {
  pin_id: chartPin.id
})
 
console.log('✅ Page complete!')
console.log(`🔗 View at: https://pindown.ai/pages/${page.id}`)

Page Structure

Pins appear on your page in the order you add them (top to bottom):

┌─────────────────────────┐
│  Pin 1: Header          │
│  (Markdown)             │
├─────────────────────────┤
│  Pin 2: Stats           │
│  (Stat Cards)           │
├─────────────────────────┤
│  Pin 3: Chart           │
│  (Line Chart)           │
└─────────────────────────┘

Next Steps

QuickstartPinboard with Pins