cf-pagetree-parser

Convert FunnelWind HTML into ClickFunnels PageTree JSON, ready to import via BarnumPT.

What is cf-pagetree-parser?

The cf-pagetree-parser library converts rendered FunnelWind HTML (with data-type attributes) into the ClickFunnels PageTree JSON format. This is the final step before importing your page into ClickFunnels.

1 FunnelWind Write cf-* markup

→

2 cf-elements Render to HTML

→

3 cf-pagetree-parser Convert to JSON

→

4 BarnumPT Import to CF

Installation

npm

npm install cf-pagetree-parser

Or use via CDN:

HTML

<script src="https://cdn.jsdelivr.net/npm/cf-pagetree-parser@latest/dist/cf-pagetree-parser.js"></script>

How It Works

The parser traverses the DOM looking for elements with data-type attributes (added by cf-elements during rendering). It then:

Identifies the element type from data-type (e.g., Headline/V1, Button/V1)
Extracts styles from inline styles and data attributes
Builds the parent-child hierarchy matching ClickFunnels structure
Generates unique IDs in the 6Z-xxxxx-0 format
Outputs valid PageTree JSON ready for import

Basic Usage

JavaScript

import { parsePageTree } from 'cf-pagetree-parser';

// Parse to PageTree JSON - automatically finds ContentNode
const pageTree = parsePageTree();

console.log(JSON.stringify(pageTree, null, 2));

Full Workflow Example

Here's a complete example showing the entire pipeline from FunnelWind markup to PageTree JSON:

Step 1: Write FunnelWind Markup

HTML

<cf-page bg="#0f172a">
  <cf-section pt="80px" pb="80px">
    <cf-row width="wide">
      <cf-col span="12" align="center">
        <cf-headline size="48px" color="#ffffff" weight="bold">
          Welcome to My Funnel
        </cf-headline>
        <cf-subheadline size="20px" color="#94a3b8" mt="16px">
          Start your journey today
        </cf-subheadline>
        <cf-button href="#signup" bg="#3b82f6" color="#ffffff" mt="32px">
          Get Started
        </cf-button>
      </cf-col>
    </cf-row>
  </cf-section>
</cf-page>

Step 2: Include cf-elements to Render

HTML

<script src="https://cdn.jsdelivr.net/npm/cf-elements/cf-elements.js"></script>

This renders your FunnelWind markup into visible HTML with data-type markers.

Step 3: Parse to PageTree JSON

JavaScript

import { parsePageTree } from 'cf-pagetree-parser';

// After cf-elements has rendered the page
const pageTree = parsePageTree(document.body);

// Send to BarnumPT or save for later
window.postMessage({ type: 'PAGETREE_READY', data: pageTree }, '*');

Step 4: Import via BarnumPT

The BarnumPT Chrome extension listens for the PageTree JSON and imports it directly into your ClickFunnels page editor.

Output Format

The parser outputs JSON matching the ClickFunnels PageTree schema:

JSON

{
  "version": 157,
  "content": {
    "type": "ContentNode",
    "id": "6Z-abc12-0",
    "version": 0,
    "attrs": { "style": { "display": "block" } },
    "params": { "--style-background-color": "#0f172a" },
    "children": [
      {
        "type": "SectionContainer/V1",
        "id": "6Z-def34-0",
        "parentId": "6Z-abc12-0",
        "fractionalIndex": "a0",
        "children": [...]
      }
    ]
  },
  "settings": { "id": "", "type": "settings", "version": 0 },
  "popup": { "id": "", "type": "ModalContainer/V1", "version": 0 }
}

Related Packages

cf-elements

Web Components that render FunnelWind markup to viewable HTML with data-type markers.

BarnumPT

Chrome extension that imports PageTree JSON directly into the ClickFunnels page editor.

Element Type Mapping

The parser converts FunnelWind components to these ClickFunnels types:

FunnelWind Component	ClickFunnels Type
`cf-page`	ContentNode
`cf-section`	SectionContainer/V1
`cf-row`	RowContainer/V1
`cf-col`	ColContainer/V1
`cf-flex`	FlexContainer/V1
`cf-headline`	Headline/V1
`cf-subheadline`	SubHeadline/V1
`cf-paragraph`	Paragraph/V1
`cf-button`	Button/V1
`cf-image`	Image/V1
`cf-video`	Video/V1
`cf-input`	Input/V1
`cf-textarea`	Textarea/V1
`cf-divider`	Divider/V1
`cf-icon`	Icon/V1
`cf-list`	BulletList/V1

Tips & Best Practices

Wait for rendering: Make sure cf-elements has fully rendered before parsing. Use DOMContentLoaded or a small delay.

Validate structure: Follow the FunnelWind hierarchy (page → section → row → col → elements) to ensure valid PageTree output.

Unsupported elements: Some ClickFunnels elements (countdown, surveys, calendars) don't have FunnelWind equivalents and won't be generated.