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