Array of panel objects. See .panel_template() for all porpeties in this object. If you change this array during run-time you will need to call .refresh() method to update layout on the screen. It is not recommended to change this array after the object has been created. You should use .set() method to change panels dynamically, which will refresh the panel you changed. let layout = new w2layout({ name : 'layout', panels : [ { type: 'top', size: 40 }, { type: 'preview', size: 200 } ] }); w2ui.layout.set('top', { size: 50 }); As of version 1.2+ you can add w2tabs or/and w2toolbar object at the top of the panel. let layout = new w2layout({ name : 'layout', panels : [ { type: 'top', size: 40 }, { type: 'main', tabs: { active: 'tab1', tabs: [ { id: 'tab1', text: 'Tab 1' }, { id: 'tab2', text: 'Tab 2' }, { id: 'tab3', text: 'Tab 3' }, { id: 'tab4', text: 'Tab 4' } ], onClick: function (id, data) { console.log(id); } } }, { type: 'preview', size: 200 } ] }); As of version 1.5+ you can set negative size of left and right panel. If size is negative, the panel will take all available size minus the size you specified. In other words the size of the panel (only left or right) will be 100% of available size - defined size of the panel.