The topmost item in the layout item tree. In browser terms: Think of the GoldenLayout instance as window object and of goldenLayout.root as the document.


A reference to the (jQuery) DOM element containing the layout


True once the layout item tree has been created and the initialised event has been fired.


A reference to the current, extended top level config.

Don't rely on this object for state saving / serialisation. Use layout.toConfig() instead.


The currently selected item or null if no item is selected. Only relevant if settings.selectionEnabled is set to true.


The current outer width of the layout in pixels


The current outer height of the layout in pixels


An array of BrowserWindow instances


True if the layout has been opened as a popout by another layout


A singleton instance of EventEmitter that works across windows



Fired after layout.init() has been called and the layout tree has been created.


Fired whenever something happens that updates the state of the layout (as returned by layout.toConfig)


Fired when a new popout window was opened.


Fired when a previously created popout window was closed.


Fired when the user selects a new / different item. Only relevant if settings.selectionEnabled is true.


Fired whenever an item gets destroyed.


Fired whenever an item is created.


Fired whenever a component is created.


Fired whenever a row is created.


Fired whenever a column is created.


Fired whenever a stack is created.


Fired whenever a tab is created.

GoldenLayout( configuration, container )

configurationconfigurationfalse-A GoldenLayout configuration object
containerDOM | jQuery elementtruedocument.bodyThe DOM element the layout will be initialised in

Constructs a new layout. The simplest use case would look something like this

myLayout = new GoldenLayout({
        type: 'component', 
        componentName: 'sayHi',
        componentState: { name: 'Wolfram' }
myLayout.registerComponent( 'sayHi',  function( container, state ){
    container.getElement().text( 'Hi ' + ); 

registerComponent( name, component )

nameStringfalse-The name of the component, as referred to by componentName in the component configuration.
componentConstructor | Functionfalse-A constructor or factory function. Will be invoked with new and two arguments, a container object and a component state.

Registers either a component constructor or a component factory function with GoldenLayout. registerComponent is the counterpart to the componentName and componentState config keys in the item config.

Here's how it hangs together:

// Write your StockChart component constructor
StockChartComponent = function( container, state ) {
    //container will be an instance of {link 'apidocs/Container'}

// Register it with your GoldenLayout instance
myLayout.registerComponent( 'StockChart', StockChartComponent );

//Tell GoldenLayout where to create an instance of the component in
//your config
    componentName: 'StockChart',
    componentState: { stocks: [ 'APPL', 'GOOG' ] }

Alternatively you can provide a factory function.

myLayout.registerComponent( 'StockChart', function( container, state ){
    //For instance if you're using the same chart component and just pass
    //the type as an argument
    return new GenericChart( 'stock', state );


Renders the layout into the container. If init() is called before the document is ready it attaches itself as a listener to the document and executes once it becomes ready.


Returns the current state of the layout and its components as a serialisable object.

getComponent( name )

nameStringfalse-The name of a previously registered component

Returns a component that was previously registered with layout.registerComponent().

updateSize(width, height)

widthIntegertrueThe container elements widthThe outer width the layout should be resized to
heightIntegertrueThe container elements heightThe outer height the layout should be resized to

Resizes the layout. If no arguments are provided GoldenLayout measures its container and resizes accordingly.


Destroys the layout. Recursively calls destroy on all components and content items, removes all event listeners and finally removes itself from the DOM.

createContentItem( itemConfiguration, parent )

itemConfigurationObjectfalse-An item configuration (can be an entire tree of items)
parentItemtrue-A parent item

Creates a new content item or tree of content items from configuration. Usually you wouldn't call this directly, but instead use methods like layout.createDragSource(), item.addChild() or item.replaceChild() that all call this method implicitly.

createPopout( configOrContentItem, dimensions, parentId, indexInParent )

configOrContentItemGoldenLayout config or contentItemfalse-The content item or config that will be created in the new window. If a item is provided its config will be read, if config is provided, only the content key will be used
dimensionsObjectfalse-A map containing the keys left, top, width and height. Left and top can be negative to place the window in another screen.
parentIdStringtruenullThe id of the item within the current layout the child window's content will be appended to when popIn is clicked
indexInParentNumbertruenullThe index at which the child window's contents will be appended to

Creates a new popout window with configOrContentItem as contents at the position specified in dimensions

 * Open a popout with testComponent as content.
 * Since parentId and indexInParent aren't specified
 * the component will be appended to the topmost
 * layout element if popIn() is called
    componentName: 'testComponent', 
    type: 'component'
}, {
    width: 200, 
    height: 300, 
    left: 400, 
    top: 100

createDragSource( element, itemConfiguration )

elementDOM or jQuery elementfalse-The DOM element that will be turned into a dragSource
itemConfigurationObjectfalse-An item configuration (can be an entire tree of items)

Turns a DOM element into a dragSource, meaning that the user can drag the element directly onto the layout where it turns into a contentItem.

selectItem( contentItem )

contentItemObjectfalse-A ContentItem instance

If settings.selectionEnabled is set to true, this allows to select items programmatically.

GoldenLayout.minifyConfig( config )

configObjectfalse-A GoldenLayout configuration object

Static method on the GoldenLayout constructor! This method will iterate through a GoldenLayout config object and replace frequent keys and values with single letter substitutes.

GoldenLayout.unminifyConfig( minifiedConfig )

configObjectfalse-A minified GoldenLayout configuration object

Static method on the GoldenLayout constructor! This method will reverse the minifications of GoldenLayout.minifyConfig.

Comments and Questions

comments powered by Disqus