Email JSON

This page documents the email JSON schema of the Chamaileon SDK.

The latest email JSON version is 4.1.0.

Document

Document Properties

Property Type Values Description
body object Read more see body element for more details
variables array Read more click link for more details
components array Read more click link for more details
fontFiles object key is the font name (first element in font stack), value is the font URL any valid css font
title string string any string
subjectLine string string any string
previewText string string any string
generatorOptions object Read more click link for more details

Document Default

const default = {
	body: {
		eid: "root",
		type: "body",
		children: [],
		version: "4.1.0",
		attrs: {},
		style: {
			backgroundColor: "",
			backgroundRepeat: "no-repeat",
			backgroundPosition: "center center",
			backgroundImage: "",
			backgroundSize: "auto",
			bodyWidth: 600,
		},
	},
	variables: [],
	components: [],
	fontFiles: {},
	title: "Default title",
};

Blocks

Block Properties

Property Type Values Description
_id string string has to be unique withing the block library
body object Read more has to start with fullwidth or block-level-conditional or block-level-loop, cannot start with anything else
fontFiles object key is the font name (first element in font stack), value is the font URL any valid css font
title string string any string
placeholder array array of objects array of elements, should start with fullwidth or block-level-conditional or block-level-loop, cannot start with body, column, branch. This is used to show different content inside the editor that hides the children content
version string string Email JSON version that it was created on

Block example

const example = {
  _id: "",
  title: "Default title",
  body: {
    eid: "example",
    type: "fullwidth",
    style: {
      backgroundColor: "",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center center",
      backgroundImage: "",
      backgroundSize: "auto",
      contentBackgroundColor: "",
      contentBackgroundRepeat: "no-repeat",
      contentBackgroundPosition: "center center",
      contentBackgroundImage: "",
      contentBackgroundSize: "auto",
      contentBorderRadius: "0px",
      contentBorderLeftColor: "#121212",
      contentBorderLeftStyle: "solid",
      contentBorderLeftWidth: "0px",
      contentBorderBottomColor: "#121212",
      contentBorderBottomStyle: "solid",
      contentBorderBottomWidth: "0px",
      contentBorderRightColor: "#121212",
      contentBorderRightStyle: "solid",
      contentBorderRightWidth: "0px",
      contentBorderTopColor: "#121212",
      contentBorderTopStyle: "solid",
      contentBorderTopWidth: "0px",
      contentMarginLeft: "0px",
      contentMarginBottom: "0px",
      contentMarginRight: "0px",
      contentMarginTop: "0px",
      contentPaddingLeft: "0px",
      contentPaddingBottom: "0px",
      contentPaddingRight: "0px",
      contentPaddingTop: "0px",
      contentWidth: null,
    },
    attrs: {
      hideOnMobile: false,
      hideOnDesktop: false,
      lock: false,
      marker: "",
    },
    children: [],
    placeholder: [],
    customData: {},
  },
  fontFiles: {},
  placeholder: [],
  version: "4.1.0"
}

Variables

Color Variable

Color Variable Properties

Property Type Values Description
name string string any string, without special characters, has to be unique
value string HEX color, color variable, "transparent" any HEX color that follows the format #ABABAB, "transparent",
type string string has to be "color"
const example = {
  name: "example",
  value: "#ABABAB",
  type: "color"
}

Color Variable Properties in element style or attr prop

Property Type Values Description
reference string string the name of the variable
default string HEX color, color variable, "transparent" any HEX color that follows the format #ABABAB, "transparent", when the variable is not found this will be used
const example = {
  reference: "example",
  default: "#ABABAB"
}

Image Variable

Image Variable Properties

Property Type Values Description
name string string any string, without special characters, has to be unique
value string URL any image URL
type string string has to be "image"
const example = {
  name: "example",
  value: "https://placehold.co/150x150.png",
  type: "image"
}

Image Variable Properties in element style or attr prop

Property Type Values Description
reference string string the name of the variable
default string URL any image URL, when the variable is not found this will be used
const example = {
  reference: "example",
  default: "https://placehold.co/150x150.png"
}

Font Stack Variable

Font Stack Variable Properties

Property Type Values Description
name string string any string, without special characters, has to be unique
value string string any font stack
type string string has to be "fontStack"
const example = {
  name: "example",
  value: "Arial, Helvetica Neue, Helvetica, sans-serif",
  type: "fontStack"
}

Font Stack Variable Properties in element style or attr prop

Property Type Values Description
reference string string the name of the variable
default string string any font stack, when the variable is not found this will be used
const example = {
  reference: "example",
  default: "Arial, Helvetica Neue, Helvetica, sans-serif"
}

Link variable

Link Variable Properties

Property Type Values Description
name string string any string, without special characters, has to be unique
value string string any URL
type string string has to be "link"
const example = {
  name: "example",
  value: "https://example.com",
  type: "fontStack"
}

Link Variable Properties in element style or attr prop

Property Type Values Description
reference string string the name of the variable
default string URL any URL, when the variable is not found this will be used
const example = {
  reference: "example",
  default: "https://example.com"
}

Text variable

Text Variable Properties

Property Type Values Description
name string string any string, without special characters, has to be unique
value string string any HTML or non-HTML string
type string string has to be "text"
const example = {
  name: "example",
  value: "Example text",
  type: "fontStack"
}

Text Variable Properties in element style or attr prop

Property Type Values Description
reference string string the name of the variable
default string string any HTML or non-HTML string, when the variable is not found this will be used
const example = {
  reference: "example",
  default: "Example text"
}

Components

Button Component

Button Component Properties

Property Type Values Description
name string string any string, without special characters
reference string, null string, null component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color)
type string string has to be "button"
style object object style from Button element style
version string string Email JSON version that it was created on
const example = {
  name: "example",
  reference: null,
  type: "button",
  style: {
    lineHeight: "25px",
		color: "#ffffff",
		fontSize: "18px",
		fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		letterSpacing: "normal",
		backgroundColor: "#0094c5",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "5px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "20px",
		marginBottom: "20px",
		marginRight: "20px",
		marginTop: "20px",
		paddingLeft: "15px",
		paddingBottom: "15px",
		paddingRight: "15px",
		paddingTop: "15px",
		hoverBackgroundColor: "",
		sizeType: "FIT_TO_TEXT",
		fullWidthOnMobile: true,
		align: "center",
		bold: false,
		italic: false,
		underline: false,
    width: null
  },
  version: "4.1.0"
}

Button Component Properties in element style

Property Type Values Description
reference string string the name of the component
modified boolean boolean shows if the element's style was modified
value object string can have parts of Button element style, has values that are not part of the component that's referenced
default object object Button element style, used when the referenced component is not found
const example = {
  reference: "example",
  modified: false,
  value: {},
  default: {
      lineHeight: "25px",
      color: "#ffffff",
      fontSize: "18px",
      fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
      letterSpacing: "normal",
      backgroundColor: "#0094c5",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center center",
      backgroundImage: "",
      backgroundSize: "auto",
      borderRadius: "5px",
      borderLeftColor: "#121212",
      borderLeftStyle: "solid",
      borderLeftWidth: "0px",
      borderBottomColor: "#121212",
      borderBottomStyle: "solid",
      borderBottomWidth: "0px",
      borderRightColor: "#121212",
      borderRightStyle: "solid",
      borderRightWidth: "0px",
      borderTopColor: "#121212",
      borderTopStyle: "solid",
      borderTopWidth: "0px",
      marginLeft: "20px",
      marginBottom: "20px",
      marginRight: "20px",
      marginTop: "20px",
      paddingLeft: "15px",
      paddingBottom: "15px",
      paddingRight: "15px",
      paddingTop: "15px",
      hoverBackgroundColor: "",
      sizeType: "FIT_TO_TEXT",
      fullWidthOnMobile: true,
      align: "center",
      bold: false,
      italic: false,
      underline: false,
      width: null
  }
}

Divider Component

Divider Component Properties

Property Type Values Description
name string string any string, without special characters
reference string, null string, null component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color)
type string string has to be "divider"
style object object style from Divider element style
version string string Email JSON version that it was created on
const example = {
  name: "example",
  reference: null,
  type: "divider",
  style: {
    width: "2px",
		type: "solid",
		color: "#a9a9a9",
		align: "center",
		backgroundColor: "",
		backgroundPosition: "center center",
		backgroundRepeat: "no-repeat",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingTop: "10px",
		paddingRight: "10px",
		paddingBottom: "10px",
		paddingLeft: "10px",
  },
  version: "4.1.0"
}

Divider Component Properties in element style

Property Type Values Description
reference string string the name of the component
modified boolean boolean shows if the element's style was modified
value object string can have parts of Divider element style, has values that are not part of the component that's referenced
default object object Divider element style, used when the referenced component is not found
const example = {
  reference: "example",
  modified: false,
  value: {},
  default: {
    width: "2px",
		type: "solid",
		color: "#a9a9a9",
		align: "center",
		backgroundColor: "",
		backgroundPosition: "center center",
		backgroundRepeat: "no-repeat",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingTop: "10px",
		paddingRight: "10px",
		paddingBottom: "10px",
		paddingLeft: "10px",
  }
}

Image Component

Image Component Properties

Property Type Values Description
name string string any string, without special characters
reference string, null string, null component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color)
type string string has to be "image"
style object object style from Image element style
version string string Email JSON version that it was created on
const example = {
  name: "example",
  reference: null,
  type: "image",
  style: {
    fullWidthOnMobile: false,
		align: "center",
		lockedWidth: null,
		lockedHeight: null,
		maxHeight: "300px",
		maxWidth: "300px",
		width: "150px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  },
  version: "4.1.0"
}

Image Component Properties in element style

Property Type Values Description
reference string string the name of the component
modified boolean boolean shows if the element's style was modified
value object string can have parts of Image element style, has values that are not part of the component that's referenced
default object object Image element style, used when the referenced component is not found
const example = {
  reference: "example",
  modified: false,
  value: {},
  default: {
    fullWidthOnMobile: false,
		align: "center",
		lockedWidth: null,
		lockedHeight: null,
		maxHeight: "300px",
		maxWidth: "300px",
		width: "150px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  }
}

Typed Text Component

Typed Text Component Properties

Property Type Values Description
name string string any string, without special characters
reference string, null string, null component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color)
type string string has to be "typed-text"
style object object style from Divider element style
version string string Email JSON version that it was created on
const example = {
  name: "example",
  reference: null,
  type: "typed-text",
  style: {
   subType: "paragraph",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingLeft: "10px",
		paddingBottom: "5px",
		paddingRight: "10px",
		paddingTop: "5px",
		lineHeight: "25px",
		letterSpacing: "normal",
		color: "#131313",
		fontSize: "18px",
		fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		linkTextDecoration: "underline",
		linkColor: "#00c0e7",
		listMarkerType: "disc",
		listMarkerFontSize: "18px",
		listMarkerColor: "#131313",
		listMarkerFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		lineSpacing: "0px",
		align: "left",
		bold: false,
		italic: false,
		underline: false,
  },
  version: "4.1.0"
}

Typed Text Component Properties in element style

Property Type Values Description
reference string string the name of the component
modified boolean boolean shows if the element's style was modified
value object string can have parts of Typed Text element style, has values that are not part of the component that's referenced
default object object Typed Text element style, used when the referenced component is not found
const example = {
  reference: "example",
  modified: false,
  value: {},
  default: {
    subType: "paragraph",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingLeft: "10px",
		paddingBottom: "5px",
		paddingRight: "10px",
		paddingTop: "5px",
		lineHeight: "25px",
		letterSpacing: "normal",
		color: "#131313",
		fontSize: "18px",
		fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		linkTextDecoration: "underline",
		linkColor: "#00c0e7",
		listMarkerType: "disc",
		listMarkerFontSize: "18px",
		listMarkerColor: "#131313",
		listMarkerFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		lineSpacing: "0px",
		align: "left",
		bold: false,
		italic: false,
		underline: false,
  }
}

Video Component

Video Component Properties

Property Type Values Description
name string string any string, without special characters
reference string, null string, null component can reference another component with the same type and can define partial style objects (eg. the referenced component has every style defined, the component that references it only defines a different color)
type string string has to be "video"
style object object style from Video element style
version string string Email JSON version that it was created on
const example = {
  name: "example",
  reference: null,
  type: "video",
  style: {
    align: "center",
		iconColor: "#FF0000",
		iconSize: "50px",
		iconType: "youtube",
		lockedWidth: null,
		lockedHeight: null,
		maxHeight: "338px",
		maxWidth: "600px",
		width: "600px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  },
  version: "4.1.0"
}

Video Component Properties in element style

Property Type Values Description
reference string string the name of the component
modified boolean boolean shows if the element's style was modified
value object string can have parts of Video element style, has values that are not part of the component that's referenced
default object object Video element style, used when the referenced component is not found
const example = {
  reference: "example",
  modified: false,
  value: {},
  default: {
    align: "center",
		iconColor: "#FF0000",
		iconSize: "50px",
		iconType: "youtube",
		lockedWidth: null,
		lockedHeight: null,
		maxHeight: "338px",
		maxWidth: "600px",
		width: "600px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  }
}

Elements

Body

Body Properties

Property Type Values Description
eid string string has to be unique within the full JSON, has to be "root"
type string string element type, has to be "body"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, should be fullwidth, block-level-conditional or block-level-loop
customData object object any information that is not provided by our json

Body Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
bodyWidth number integer 600 any integer

Body Attrs

Currently not in use.

Body Default

const default = {
  eid: "root",
  type: "body",
  style: {
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		bodyWidth: 600,
  },
  attrs: {},
  children: [],
  customData: {},
}

Fullwidth

Fullwidth Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "fullwidth"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch
placeholder array array of objects array of elements, should start with fullwidth or block-level-conditional or block-level-loop,, cannot start with body, column, branch. This is used to show different content inside the editor that hides the children content
customData object object any information that is not provided by our json

Fullwidth Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
contentBackgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
contentBackgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
contentBackgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
contentBackgroundImage string, object URL, image variable "" any image URL, Image variable
contentBackgroundSize string css value "auto" "auto", "contain", "cover"
contentBorderRadius string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentBorderLeftColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
contentBorderLeftStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
contentBorderLeftWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentBorderBottomColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
contentBorderBottomStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
contentBorderBottomWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentBorderRightColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
contentBorderRightStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
contentBorderRightWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentBorderTopColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
contentBorderTopStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
contentBorderTopWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentMarginLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentMarginBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentMarginRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentMarginTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentPaddingLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentPaddingBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentPaddingRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentPaddingTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
contentWidth string or null integer or null null any integer or null

Fullwidth Attrs

Property Type Values Default Acceptable values
hideOnMobile boolean boolean false boolean
hideOnDesktop boolean boolean false boolean
lock string or boolean string or boolean false "all", "design", true, false
marker string any string "" any string

Fullwidth Default

const default = {
  eid: "example",
  type: "fullwidth",
  style: {
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		contentBackgroundColor: "",
		contentBackgroundRepeat: "no-repeat",
		contentBackgroundPosition: "center center",
		contentBackgroundImage: "",
		contentBackgroundSize: "auto",
		contentBorderRadius: "0px",
		contentBorderLeftColor: "#121212",
		contentBorderLeftStyle: "solid",
		contentBorderLeftWidth: "0px",
		contentBorderBottomColor: "#121212",
		contentBorderBottomStyle: "solid",
		contentBorderBottomWidth: "0px",
		contentBorderRightColor: "#121212",
		contentBorderRightStyle: "solid",
		contentBorderRightWidth: "0px",
		contentBorderTopColor: "#121212",
		contentBorderTopStyle: "solid",
		contentBorderTopWidth: "0px",
		contentMarginLeft: "0px",
		contentMarginBottom: "0px",
		contentMarginRight: "0px",
		contentMarginTop: "0px",
		contentPaddingLeft: "0px",
		contentPaddingBottom: "0px",
		contentPaddingRight: "0px",
		contentPaddingTop: "0px",
		contentWidth: null,
  },
  attrs: {
    hideOnMobile: false,
		hideOnDesktop: false,
		lock: false,
		marker: "",
  },
  children: [],
  placeholder: [],
  customData: {},
}

Box

Box Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "box"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch
customData object object any information that is not provided by our json

Box Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
borderRadius string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderLeftColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderLeftStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderLeftWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderBottomColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderBottomStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderBottomWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderRightColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderRightStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderRightWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderTopColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderTopStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderTopWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px

Box Attrs

Property Type Values Default Acceptable values
hideOnMobile boolean boolean false boolean
hideOnDesktop boolean boolean false boolean

Box Default

const default = {
  eid: "example",
  type: "box",
  style: {
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  },
  attrs: {
    hideOnMobile: false,
		hideOnDesktop: false,
  },
  children: [],
  customData: {},
}

Multicolumn

Multicolumn Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "multicolumn"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, only column is acceptable
customData object object any information that is not provided by our json

Multicolumn Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"

Multicolumn Attrs

Property Type Values Default Acceptable values
hideOnMobile boolean boolean false boolean
hideOnDesktop boolean boolean false boolean
stacking string string "left-on-top" "left-on-top", "none", "right-on-top"
spacerBefore string integer with px postfix "0px" any integer with px postfix that follows the format 1px
spacerBetween string integer with px postfix "0px" any integer with px postfix that follows the format 1px
spacerAfter string integer with px postfix "0px" any integer with px postfix that follows the format 1px
spacerBeforeMobile string integer with px postfix "0px" any integer with px postfix that follows the format 1px
spacerBetweenMobile string integer with px postfix "0px" any integer with px postfix that follows the format 1px
spacerAfterMobile string integer with px postfix "0px" any integer with px postfix that follows the format 1px

Multicolumn Default

const default = {
  eid: "example",
  type: "multicolumn",
  style: {
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
  },
  attrs: {
    hideOnMobile: false,
		hideOnDesktop: false,
		stacking: "left-on-top",
		spacerBefore: "0px",
		spacerBetween: "0px",
		spacerAfter: "0px",
		spacerBeforeMobile: "0px",
		spacerBetweenMobile: "0px",
		spacerAfterMobile: "0px",
  },
  children: [],
  customData: {},
}

Column

Column Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "column"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch
customData object object any information that is not provided by our json

Column Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
width string integer with px postfix "300px" any integer with px postfix that follows the format 1px

Column Attrs

Property Type Values Default Acceptable values
hideOnMobile boolean boolean false boolean
lock string or boolean string or boolean false "all", "design", true, false

Column Default

const default = {
  eid: "example",
  type: "column",
  style: {
    width: "300px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
  },
  attrs: {
    hideOnMobile: false,
		lock: false,
  },
  children: [],
  customData: {},
}

Loop

Loop Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "loop"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch
customData object object any information that is not provided by our json

Loop Style

Currently not in use.

Loop Attrs

Property Type Values Default Acceptable values
expression string string "dummy_expression" any string

Loop Default

const default = {
  eid: "example",
  type: "loop",
  style: {},
  attrs: {
    expression: "dummy_expression",
  },
  children: [],
  customData: {},
}

Conditional

Conditional Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "conditional"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, only branch
customData object object any information that is not provided by our json

Conditional Style

Currently not in use.

Conditional Attrs

Currently not in use.

Conditional Default

const default = {
  eid: "example",
  type: "conditional",
  style: {},
  attrs: {},
  children: [],
  customData: {},
}

Block Level Loop

Block Level Loop Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "block-level-loop"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, except block-level-conditional, block-level-loop, body, column, branch
customData object object any information that is not provided by our json

Block Level Loop Style

Currently not in use.

Block Level Loop Attrs

Property Type Values Default Acceptable values
expression string string "dummy_expression" any string
lock string or boolean string or boolean false "all", "design", true, false

Block Level Loop Default

const default = {
  eid: "example",
  type: "block-level-loop",
  style: {},
  attrs: {
    lock: false,
		expression: "dummy_expression",
  },
  children: [],
  customData: {},
}

Block Level Conditional

Block Level Conditional Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "block-level-conditional"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, only branch
customData object object any information that is not provided by our json

Block Level Conditional Style

Currently not in use.

Block Level Conditional Attrs

Property Type Values Default Acceptable values
lock string or boolean string or boolean false "all", "design", true, false

Block Level Conditional Default

const default = {
  eid: "example",
  type: "block-level-conditional",
  style: {},
  attrs: {
    lock: false,
  },
  children: [],
  customData: {},
}

Branch

Branch Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "branch"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
children array array of objects array of elements, except fullwidth, block-level-conditional, block-level-loop, body, column, branch
customData object object any information that is not provided by our json

Branch Style

Currently not in use.

Branch Attrs

Property Type Values Default Acceptable values
expression string string "dummy_expression" any string
type string string "if" "if", "else-if", "else"

Branch Default

const default = {
  eid: "example",
  type: "branch",
  style: {},
  attrs: {
    expression: "dummy_expression",
		type: "if",
  },
  children: [],
  customData: {},
}

Button

Button Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "button"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Button Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "#0094c5" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
borderRadius string integer with px postfix "5px" any integer with px postfix that follows the format 1px
borderLeftColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderLeftStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderLeftWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderBottomColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderBottomStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderBottomWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderRightColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderRightStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderRightWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderTopColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderTopStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderTopWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginLeft string integer with px postfix "20px" any integer with px postfix that follows the format 1px
marginBottom string integer with px postfix "20px" any integer with px postfix that follows the format 1px
marginRight string integer with px postfix "20px" any integer with px postfix that follows the format 1px
marginTop string integer with px postfix "20px" any integer with px postfix that follows the format 1px
paddingLeft string integer with px postfix "15px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "15px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "15px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "15px" any integer with px postfix that follows the format 1px
lineHeight string integer with px postfix "25px" any integer with px postfix that follows the format 1px
color string, object HEX color, color variable, "transparent" "#ffffff" any HEX color that follows the format #ABABAB, "transparent", Color variable
fontSize string integer with px postfix "18px" any integer with px postfix that follows the format 1px
fontFamily string, object string, font stack variable "Arial, Helvetica Neue, Helvetica, sans-serif" any font stack, Font stack variable
letterSpacing string integer with px postfix "normal" any integer with em postfix that follows the format 1.00em, "normal"
hoverBackgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
sizeType string string "FIT_TO_TEXT" "FIXED", "FIT_TO_TEXT"
fullWidthOnMobile boolean boolean true boolean
align string string "center" "center", "left", "right"
bold boolean boolean false boolean
italic boolean boolean false boolean
underline boolean boolean false boolean
width string, null string, null null any integer with px postfix that follows the format 1px

Button Attrs

Property Type Values Default Acceptable values
title string, object string, text variable "" any string, Text variable
text string, object string, text variable "

Click here to edit me

"
any HTML formatted string, Text variable
href string, object URL, link variable "" any URL, Link variable

Box Default

const default = {
  eid: "example",
  type: "button",
  style: {
		lineHeight: "25px",
		color: "#ffffff",
		fontSize: "18px",
		fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		letterSpacing: "normal",
		backgroundColor: "#0094c5",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "5px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "20px",
		marginBottom: "20px",
		marginRight: "20px",
		marginTop: "20px",
		paddingLeft: "15px",
		paddingBottom: "15px",
		paddingRight: "15px",
		paddingTop: "15px",
		hoverBackgroundColor: "",
		sizeType: "FIT_TO_TEXT",
		fullWidthOnMobile: true,
		align: "center",
		bold: false,
		italic: false,
		underline: false,
    width: null
  },
  attrs: {
		title: "",
		text: "<p>Click here to edit me</p>",
		href: "",
  },
  customData: {},
}

Text

Text Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "text"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Text Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
paddingLeft string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "5px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "5px" any integer with px postfix that follows the format 1px
paragraphLineHeight string integer with px postfix "25px" any integer with px postfix that follows the format 1px
paragraphColor string, object HEX color, color variable, "transparent" "#131313" any HEX color that follows the format #ABABAB, "transparent", Color variable
paragraphFontSize string integer with px postfix "18px" any integer with px postfix that follows the format 1px
paragraphFontFamily string, object string, font stack variable "Arial, Helvetica Neue, Helvetica, sans-serif" any font stack, Font stack variable
paragraphLetterSpacing string integer with px postfix "normal" any integer with em postfix that follows the format 1.00em, "normal"
h1LineHeight string integer with px postfix "40px" any integer with px postfix that follows the format 1px
h1Color string, object HEX color, color variable, "transparent" "#131313" any HEX color that follows the format #ABABAB, "transparent", Color variable
h1FontSize string integer with px postfix "33px" any integer with px postfix that follows the format 1px
h1FontFamily string, object string, font stack variable "Georgia, Times, Times New Roman, serif" any font stack, Font stack variable
h1LetterSpacing string integer with px postfix "normal" any integer with em postfix that follows the format 1.00em, "normal"
h2LineHeight string integer with px postfix "34px" any integer with px postfix that follows the format 1px
h2Color string, object HEX color, color variable, "transparent" "#131313" any HEX color that follows the format #ABABAB, "transparent", Color variable
h2FontSize string integer with px postfix "26px" any integer with px postfix that follows the format 1px
h2FontFamily string, object string, font stack variable "Georgia, Times, Times New Roman, serif" any font stack, Font stack variable
h2LetterSpacing string integer with px postfix "normal" any integer with em postfix that follows the format 1.00em, "normal"
h3LineHeight string integer with px postfix "27px" any integer with px postfix that follows the format 1px
h3Color string, object HEX color, color variable, "transparent" "#131313" any HEX color that follows the format #ABABAB, "transparent", Color variable
h3FontSize string integer with px postfix "22px" any integer with px postfix that follows the format 1px
h3FontFamily string, object string, font stack variable "Georgia, Times, Times New Roman, serif" any font stack, Font stack variable
h3LetterSpacing string integer with px postfix "normal" any integer with em postfix that follows the format 1.00em, "normal"
linkTextDecoration string string "underline" "underline", "none"
linkColor string, object HEX color, color variable, "transparent" "#00c0e7" any HEX color that follows the format #ABABAB, "transparent", Color variable

Text Attrs

Property Type Values Default Acceptable values
text string, object string, text variable

Double click to edit text!

"
any HTML formatted string, Text variable

Text Default

const default = {
  eid: "example",
  type: "text",
  style: {
    backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingLeft: "10px",
		paddingBottom: "5px",
		paddingRight: "10px",
		paddingTop: "5px",
		paragraphLineHeight: "25px",
		paragraphLetterSpacing: "normal",
		paragraphColor: "#131313",
		paragraphFontSize: "18px",
		paragraphFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		linkTextDecoration: "underline",
		linkColor: "#00c0e7",
		h3LineHeight: "27px",
		h3Color: "#131313",
		h3FontSize: "22px",
		h3FontFamily: "Georgia, Times, Times New Roman, serif",
		h3LetterSpacing: "normal",
		h2LineHeight: "34px",
		h2Color: "#131313",
		h2FontSize: "26px",
		h2FontFamily: "Georgia, Times, Times New Roman, serif",
		h2LetterSpacing: "normal",
		h1LineHeight: "40px",
		h1Color: "#131313",
		h1FontSize: "33px",
		h1FontFamily: "Georgia, Times, Times New Roman, serif",
		h1LetterSpacing: "normal",
  },
  attrs: {
    text: "<p>Double click to edit text!</p>",
  },
  customData: {},
}

Typed Text

Typed Text Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "typed-text"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Typed Text Style

Can be replaced with a component. See Typed Text component.

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
paddingLeft string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "5px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "5px" any integer with px postfix that follows the format 1px
lineHeight string integer with px postfix "25px" any integer with px postfix that follows the format 1px
color string, object HEX color, color variable, "transparent" "#131313" any HEX color that follows the format #ABABAB, "transparent", Color variable
fontSize string integer with px postfix "18px" any integer with px postfix that follows the format 1px
fontFamily string, object string, font stack variable "Arial, Helvetica Neue, Helvetica, sans-serif" any font stack, Font stack variable
letterSpacing string integer with px postfix "normal" any integer with em postfix that follows the format 1.00em, "normal"
linkTextDecoration string string "underline" "underline", "none"
linkColor string, object HEX color, color variable, "transparent" "#00c0e7" any HEX color that follows the format #ABABAB, "transparent", Color variable
subType string string "paragraph" "paragraph", "heading1", "heading2", "heading3", "list"
listMarkerType string string "disc" "disc", "square", "decimal", "lower-roman", "upper-roman", "lower-alpha", "upper-alpha"
listMarkerFontSize string integer with px postfix "18px" any integer with px postfix that follows the format 1px
listMarkerColor string, object HEX color, color variable, "transparent" "#131313" any HEX color that follows the format #ABABAB, "transparent", Color variable
listMarkerFontFamily string, object string, font stack variable "Arial, Helvetica Neue, Helvetica, sans-serif" any font stack, Font stack variable
lineSpacing string integer with px postfix "0px" any integer with px postfix that follows the format 1px
align string string "center" "center", "left", "right", "justify"
bold boolean boolean false boolean
italic boolean boolean false boolean
underline boolean boolean false boolean

Typed Text Attrs

Property Type Values Default Acceptable values
text string, object string, text variable "Double click to edit text!" any text string, Text variable

Typed Text Default

const default = {
  eid: "example",
  type: "typed-text",
  style: {
		subType: "paragraph",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingLeft: "10px",
		paddingBottom: "5px",
		paddingRight: "10px",
		paddingTop: "5px",
		lineHeight: "25px",
		letterSpacing: "normal",
		color: "#131313",
		fontSize: "18px",
		fontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		linkTextDecoration: "underline",
		linkColor: "#00c0e7",
		listMarkerType: "disc",
		listMarkerFontSize: "18px",
		listMarkerColor: "#131313",
		listMarkerFontFamily: "Arial, Helvetica Neue, Helvetica, sans-serif",
		lineSpacing: "0px",
		align: "left",
		bold: false,
		italic: false,
		underline: false,
  },
  attrs: {
    text: "Double click to edit text!",
  },
  customData: {},
}

Divider

Divider Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "divider"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Divider Style

Can be replaced with a component. See Divider component.

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
paddingLeft string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "10px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "10px" any integer with px postfix that follows the format 1px
width string integer with px postfix "2px" any integer with px postfix that follows the format 1px
type string string "solid" "solid", "double", "dashed", "dotted"
color string, object HEX color, color variable, "transparent" "#a9a9a9" any HEX color that follows the format #ABABAB, "transparent", Color variable
align string string "center" "center", "left", "right", "justify"

Divider Attrs

Currently not in use.

Divider Default

const default = {
  eid: "example",
  type: "divider",
  style: {
		width: "2px",
		type: "solid",
		color: "#a9a9a9",
		align: "center",
		backgroundColor: "",
		backgroundPosition: "center center",
		backgroundRepeat: "no-repeat",
		backgroundImage: "",
		backgroundSize: "auto",
		paddingTop: "10px",
		paddingRight: "10px",
		paddingBottom: "10px",
		paddingLeft: "10px",
  },
  attrs: {},
  customData: {},
}

Image

Image Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "image"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Image Style

Can be replaced with a component. See Image component.

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
borderRadius string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderLeftColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderLeftStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderLeftWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderBottomColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderBottomStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderBottomWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderRightColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderRightStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderRightWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderTopColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderTopStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderTopWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
fullWidthOnMobile boolean boolean false boolean
align string string "center" "center", "left", "right"
lockedWidth string, null string, null null any integer with px postfix that follows the format 1px, null
lockedHeight string, null string, null null any integer with px postfix that follows the format 1px, null
maxHeight string integer with px postfix "300px" any integer with px postfix that follows the format 1px
maxWidth string integer with px postfix "300px" any integer with px postfix that follows the format 1px
width string integer with px postfix "150px" any integer with px postfix that follows the format 1px

Image Attrs

Property Type Values Default Acceptable values
title string, object string, text variable "" any string, Text variable
link string, object URL, link variable "" any URL, Link variable
altText string, object string, text variable "" any string, Text variable
src string, object URL, image variable "https://cdn.chamaileon.io/assets/img/image_placeholder.png" any image URL, Image variable

Image Default

const default = {
  eid: "example",
  type: "image",
  style: {
    fullWidthOnMobile: false,
		align: "center",
		lockedWidth: null,
		lockedHeight: null,
		maxHeight: "300px",
		maxWidth: "300px",
		width: "150px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  },
  attrs: {
    title: "",
		link: "",
		altText: "",
		src: "https://cdn.chamaileon.io/assets/img/image_placeholder.png",
  },
  customData: {},
}

Dynamic Image

Dynamic Image Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "dynamic-image"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Dynamic Image Style

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
borderRadius string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderLeftColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderLeftStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderLeftWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderBottomColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderBottomStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderBottomWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderRightColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderRightStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderRightWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderTopColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderTopStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderTopWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
fullWidthOnMobile boolean boolean false boolean
align string string "center" "center", "left", "right"
maxHeight string integer with px postfix "300px" any integer with px postfix that follows the format 1px
maxWidth string integer with px postfix "300px" any integer with px postfix that follows the format 1px
width string integer with px postfix "150px" any integer with px postfix that follows the format 1px
height string integer with px postfix "150px" any integer with px postfix that follows the format 1px

Dynamic Image Attrs

Property Type Values Default Acceptable values
title string, object string, text variable "" any string, Text variable
link string, object URL, link variable "" any URL, Link variable
altText string, object string, text variable "" any string, Text variable
src string URL "https://placehold.co/150x150.png" any image URL

Dynamic Image Default

const default = {
  eid: "example",
  type: "dynamic-image",
  style: {
		align: "center",
		fullWidthOnMobile: false,
		maxHeight: "300px",
		maxWidth: "300px",
		width: "150px",
		height: "150px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  },
  attrs: {
    title: "",
		link: "",
		altText: "",
		src: "https://placehold.co/150x150.png"
  },
  customData: {},
}

Video

Video Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "video"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Video Style

Can be replaced with a component. See Video component.

Property Type Values Default Acceptable values
backgroundColor string, object HEX color, color variable, "transparent" "" any HEX color that follows the format #ABABAB, "transparent", Color variable
backgroundRepeat string css value "no-repeat" "no-repeat", "repeat", "repeat-x", "repeat-y"
backgroundPosition string css value "center center" "left", "center", "right", "bottom", "top", "left top", "left center", "left bottom", "center top", "center center", "center bottom", "right top", "right center", "right bottom", "top left", "top center", "top right", "bottom left", "bottom center", "bottom right"
backgroundImage string, object URL, image variable "" any image URL, Image variable
backgroundSize string css value "auto" "auto", "contain", "cover"
borderRadius string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderLeftColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderLeftStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderLeftWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderBottomColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderBottomStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderBottomWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderRightColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderRightStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderRightWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
borderTopColor string, object HEX color, color variable, "transparent" "#121212" any HEX color that follows the format #ABABAB, "transparent", Color variable
borderTopStyle string css value "solid" "double", "dotted", "dashed", "solid", "none"
borderTopWidth string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
marginTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingLeft string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingBottom string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingRight string integer with px postfix "0px" any integer with px postfix that follows the format 1px
paddingTop string integer with px postfix "0px" any integer with px postfix that follows the format 1px
fullWidthOnMobile boolean boolean false boolean
align string string "center" "center", "left", "right"
lockedWidth string, null string, null null any integer with px postfix that follows the format 1px, null
lockedHeight string, null string, null null any integer with px postfix that follows the format 1px, null
maxHeight string integer with px postfix "338px" any integer with px postfix that follows the format 1px
maxWidth string integer with px postfix "600px" any integer with px postfix that follows the format 1px
width string integer with px postfix "600px" any integer with px postfix that follows the format 1px
iconColor string, object HEX color, color variable, "transparent" "#FF0000" any HEX color that follows the format #ABABAB, "transparent", Color variable
iconSize string integer with px postfix "50px" any integer with px postfix that follows the format 1px
iconType string string "youtube" "play", "play-box", "play-box-outline", "play-circle", "play-circle-outline", "youtube"

Video Attrs

Property Type Values Default Acceptable values
link string, object URL, link variable "" any URL, Link variable
altText string, object string, text variable "" any string, Text variable
videoId string string "" any videoId from vimeo or youtube
videoProvider string string "" "vimeo", "youtube"
previewBaseUrl string URL "" Video element backend base URL
thumbnailBaseUrl string URL "" Video element backend base URL
src string URL "https://placehold.co/600x338.png" any image URL

Video Default

const default = {
  eid: "example",
  type: "video",
  style: {
		align: "center",
		iconColor: "#FF0000",
		iconSize: "50px",
		iconType: "youtube",
		lockedWidth: null,
		lockedHeight: null,
		maxHeight: "338px",
		maxWidth: "600px",
		width: "600px",
		backgroundColor: "",
		backgroundRepeat: "no-repeat",
		backgroundPosition: "center center",
		backgroundImage: "",
		backgroundSize: "auto",
		borderRadius: "0px",
		borderLeftColor: "#121212",
		borderLeftStyle: "solid",
		borderLeftWidth: "0px",
		borderBottomColor: "#121212",
		borderBottomStyle: "solid",
		borderBottomWidth: "0px",
		borderRightColor: "#121212",
		borderRightStyle: "solid",
		borderRightWidth: "0px",
		borderTopColor: "#121212",
		borderTopStyle: "solid",
		borderTopWidth: "0px",
		marginLeft: "0px",
		marginBottom: "0px",
		marginRight: "0px",
		marginTop: "0px",
		paddingLeft: "0px",
		paddingBottom: "0px",
		paddingRight: "0px",
		paddingTop: "0px",
  },
  attrs: {
    link: "",
		altText: "",
		videoId: "",
		videoProvider: "",
		previewBaseUrl: "",
		thumbnailBaseUrl: "",
		src: "https://placehold.co/600x338.png",
  },
  customData: {},
}

Code

Code Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "code"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json
placeholder object object element, except fullwidth, block-level-conditional, block-level-loop, body, column, branch. This is used to show different content inside the editor that hides the actual content

Code Style

Currently not in use.

Code Attrs

Property Type Values Default Acceptable values
title string string "Your title" any string
content string string "" any HTML string
style string string "" any AMP supported css
isAmp boolean boolean false boolean

Code Default

const default = {
  eid: "example",
  type: "code",
  style: {},
  attrs: {
    title: "Your title",
		content: "<your-code></your-code>",
		style: "",
		isAmp: false,
  },
  placeholder: {},
  customData: {},
}

Social

Social Properties

Property Type Values Description
eid string string has to be unique within the full JSON, cannot be "root"
type string string element type, has to be "social"
style object Read more see style properties of this element
attrs object Read more see attr properties of this element
customData object object any information that is not provided by our json

Social Style

Currently not in use.

Social Attrs

Property Type Values Default Acceptable values
elements array object {} any element object that contains the 3 parameters that are detailed below
elements.type string string "" "Blogger", "Facebook", "Instagram", "Linkedin", "Medium", "Pinterest", "Snapchat", "SoundCloud", "Spotify", "Telegram", "TikTok", "Tumblr", "Twitter", "Vimeo", "Vkontakte", "WeChat", "YouTube"
elements.link string URL "" any URL
elements.src string string "" any string that targets the icon without the base URL
align string string "center" "center", "left", "right"
color string string "colorful" "colorful", "black", "grey", "white"
iconSet number integer between 1 and 5 4 1 (flat), 2 (square), 3 (roundedSquare), 4 (circle), 5 (transparentCircle)
size number any integer 40 any integer
layout string string "horizontal" "horizontal", "vertical"
spacing number any integer 10 any integer
hideOnMobile boolean boolean false boolean
hideOnDesktop boolean boolean false boolean
reorderOnMobile boolean boolean false boolean
baseUrl string URL "https://cdn.chamaileon.io/assets/" any URL that targets the CDN where you store your social icons

Social Default

const default = {
  eid: "example",
  type: "social",
  style: {},
  attrs: {
    elements: [
			{
				type: "Facebook",
				link: "https://www.facebook.com/",
				src: "img/Facebook/fb-4-colorful.png",
			},
			{
				type: "Linkedin",
				link: "https://www.linkedin.com/",
				src: "img/Linkedin/li-4-colorful.png",
			},
			{
				type: "Instagram",
				link: "https://www.instagram.com/",
				src: "img/Instagram/ig-4-colorful.png",
			},
			{
				type: "Twitter",
				link: "https://www.twitter.com/",
				src: "img/Twitter/tw-4-colorful.png",
			},
		],
		align: "center",
		color: "colorful",
		iconSet: 4,
		size: 40,
		layout: "horizontal",
		spacing: 10,
		hideOnMobile: false,
		hideOnDesktop: false,
		reorderOnMobile: false,
		baseUrl: "https://cdn.chamaileon.io/assets/",
  },
  customData: {},
}

Changelog

4.1.0

Added

  • bold, italic and underline properties to button style
  • bold, italic and underline properties to typed-text style
  • validation and conversion tools for customData.externalElementDefaultJson that is used with the new externalElements feature (more details in the Editor External elements section)

4.0.0 or older

  • This is the starting point of the documentation