HubL Reference

Table of contents

How to use Developer Info on COS pages

Developer Info allows you to see all of the information that is available in the context of a page or post. While the majority of the commonly used variables available on the COS have been listed here, Developer Info will give you a comprehensive JSON tree of all the information available in a page or post.

Before using Developer Info, you will need to install a extension or plugin to format JSON in your browser. If you are using Chrome, you can install an extension called JSONView.


Viewing Developer Info

After installing a JSON formatting browser extension, you can access Developer Info from the sprocket menu of any live page/post or shareable preview. Click the sprocket and choose Developer Info.

While much of the information contained in the page's context is for internal purposes, this JSON will give you a comprehensive view of all the info that can be rendered on a particular page or post. For example, below is an excerpt from the Developer Info of

page_meta: {
    html_title: "HubSpot Designers Site",
    meta_keywords: "",
    meta_description: "Find all the help, documentation, inspiration you nee to bring your ideas to life with HubSpot's Content Optimization System. ",
    name: "Designers Home V2",
    canonical_url: ""

This JSON block shows the properties contained within the page_meta dict. If you wanted to print the HTML title of the page, you would write the HubL expression below. 

{{ page_meta.html_title }}
With each nested level of the JSON tree, you will need to concatenate the property with a period. For example, the display name of a blog post author is nested three levels down in the JSON tree and therefore would be printed with the expression below.

{{ content.blog_post_author.display_name }}