KitMaker API Docs

Configuration

You can customize the look and feel of the iFrame editor by passing a config object in the initialization message.

Configuration Structure #

const config = {
  theme: {
    backgroundColor: "#ffffff",
    accentColor: "#2563eb"
  },
  layout: {
    viewSelectorPosition: "bottom",
    padding: "0",
    paddingSelectedView: "20px",
    paddingViewSelector: "30px 0",
    heightSelectedView: "700px"
  }
};

theme Options #

Control the colors of the editor.

ParameterTypeDefaultDescription
backgroundColorstring#ffffffBackground HEX color of the main editor area.
accentColorstring#2563ebPrimary accent HEX color used for loading spinners and active states.

layout Options #

Control the spacing and positioning of elements.

ParameterTypeDefaultDescription
viewSelectorPositionstringbottomPosition of the view selector strip (`top` or `bottom`).
paddingstring0CSS padding for the entire editor container.
paddingSelectedViewstring0CSS padding around the main design area.
paddingViewSelectorstring0CSS padding around the view selector strip.
heightSelectedViewstring700pxExplicit height for the main design area (e.g., "800px", "100%"). If set, the design area will shrink/grow to this exact height.