Components

{
  "type": "hero",
  "props": {
    "headline": "Example"
  }
}

{
  "type": "hero",
  "props": {
    "headline": "Jane Doe",
    "subheadline": "Designer & Developer",
    "alignment": "center"
  }
}

{
  "type": "text",
  "props": {
    "content": "Welcome to my page. Here's what I've been working on.",
    "size": "lg"
  }
}

{
  "type": "linkList",
  "props": {
    "links": [
      {
        "label": "Portfolio",
        "href": "https://example.com",
        "description": "My design work"
      },
      {
        "label": "Blog",
        "href": "https://blog.example.com"
      }
    ]
  }
}

{
  "type": "imageGrid",
  "props": {
    "images": [
      { "src": "https://example.com/1.jpg", "alt": "Photo 1" },
      { "src": "https://example.com/2.jpg", "alt": "Photo 2" }
    ],
    "columns": 2,
    "gap": "md"
  }
}

{
  "type": "socialLinks",
  "props": {
    "links": [
      { "platform": "twitter", "url": "https://twitter.com/jane" },
      { "platform": "github", "url": "https://github.com/jane" }
    ],
    "style": "pills"
  }
}

{
  "type": "divider",
  "props": {
    "style": "wave"
  }
}

{
  "type": "quote",
  "props": {
    "text": "Design is not just what it looks like. Design is how it works.",
    "attribution": "Steve Jobs",
    "style": "large"
  }
}

{
  "type": "embed",
  "props": {
    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "provider": "youtube"
  }
}

{
  "type": "contactCard",
  "props": {
    "name": "Jane Doe",
    "email": "jane@example.com",
    "role": "Senior Designer",
    "location": "San Francisco, CA"
  }
}

{
  "type": "footer",
  "props": {
    "text": "© 2026 Jane Doe",
    "links": [
      { "label": "Privacy", "href": "https://example.com/privacy" }
    ]
  }
}

{
  "type": "card",
  "props": {
    "title": "My Project",
    "description": "A brief description of the project",
    "href": "https://example.com/project",
    "badge": "New"
  }
}

{
  "type": "cardGrid",
  "props": {
    "columns": 2,
    "cards": [
      { "title": "Project A", "description": "First project" },
      {
        "title": "Project B",
        "description": "Second project",
        "badge": "Featured"
      }
    ]
  }
}

{
  "type": "testimonial",
  "props": {
    "quote": "Working with Jane was a fantastic experience.",
    "author": "John Smith",
    "role": "CEO, Acme Inc"
  }
}

{
  "type": "timeline",
  "props": {
    "events": [
      {
        "title": "Founded Company",
        "date": "January 2020",
        "description": "Started the journey"
      },
      {
        "title": "Series A",
        "date": "March 2022",
        "description": "Raised $10M"
      }
    ]
  }
}

{
  "type": "faq",
  "props": {
    "expandable": true,
    "items": [
      {
        "question": "How do I get started?",
        "answer": "Sign up and create your first page."
      },
      {
        "question": "Is it free?",
        "answer": "Yes, ChatBlocks is free to use."
      }
    ]
  }
}

{
  "type": "pricingTable",
  "props": {
    "plans": [
      {
        "name": "Free",
        "price": "$0/mo",
        "features": ["5 pages", "Basic themes", "Community support"]
      },
      {
        "name": "Pro",
        "price": "$9/mo",
        "features": [
          "Unlimited pages",
          "All themes",
          "Priority support",
          "Custom CSS"
        ],
        "highlighted": true
      }
    ]
  }
}

{
  "type": "gallery",
  "props": {
    "layout": "masonry",
    "images": [
      {
        "src": "https://example.com/photo1.jpg",
        "alt": "Beach",
        "caption": "Summer 2025"
      },
      {
        "src": "https://example.com/photo2.jpg",
        "alt": "Mountain"
      }
    ]
  }
}

{
  "type": "countdown",
  "props": {
    "targetDate": "2026-12-31T00:00:00Z",
    "label": "New Year Countdown",
    "expiredMessage": "Happy New Year!"
  }
}

{
  "type": "newsletter",
  "props": {
    "heading": "Stay Updated",
    "description": "Get notified about new features",
    "placeholder": "you@example.com",
    "buttonText": "Subscribe"
  }
}