Unofficial CF Page Tree Documentation

A comprehensive reference for building ClickFunnels pages programmatically using JSON.

What is the Page Tree?

ClickFunnels stores page layouts as JSON structures called "page trees". Each page tree defines containers, elements, styles, and settings that make up a complete funnel page.

This documentation covers:

The root JSON structure and common properties
Container hierarchy (Sections, Rows, Columns, Flex)
All element types (Text, Buttons, Images, Forms, etc.)
The styleguide system for consistent design
Advanced features like animations and mobile settings

Quick Start

Getting Started

Learn the basics of page tree structure and common patterns.

Page Structure

Understand the root structure, IDs, and common element properties.

Containers

Section, Row, Column, and Flex containers that organize your page.

Elements

Buttons, text, images, videos, forms, and other UI components.

Key Constraints

Important limitations to know:

No margin-bottom - Only margin-top is available (default: 15px)
Line-height in % - Use percentage units (e.g., 120, 150)
One icon per position - Text and buttons support max ONE prepended and ONE appended icon
FlexContainer centered - Always has margin: 0 auto, no left/right margins
No placeholder text - Inputs don't support placeholders, use Paragraph labels instead

Container Hierarchy

ContentNode (root) └── SectionContainer/V1 (full-width section) ├── RowContainer/V1 (horizontal layout) │ └── ColContainer/V1 (12-grid column) │ └── Elements OR FlexContainer/V1 └── FlexContainer/V1 (can be direct child) └── Elements

Basic Example

JSON

{
  "version": 157,
  "content": {
    "type": "ContentNode",
    "id": "",
    "version": 0,
    "attrs": {
      "data-skip-background-settings": "false",
      "style": { "display": "block" }
    },
    "params": {
      "--style-background-color": "#ffffff"
    },
    "children": []
  },
  "settings": { "id": "", "type": "settings", "version": 0 },
  "popup": { "id": "", "type": "ModalContainer/V1", "version": 0 }
}