Panel Item Tutorial

This tutorial shows you how to create and register your own panel items.

Panel Items are containers placed inside a Panel.

OS.js uses Hyperapp for its panel items by default.

Custom Panel Item

The default Panel Service provider allows you to add (or override) panel items:

import {PanelItem} from '@osjs/panels';

class MyPanelItem extends PanelItem {
  render(state, actions) {
    return super.render('my-panel-item', [
      h('span', {}, 'Hello World!')


// Static
osjs.register(PanelServiceProvider, {
  args: {
    registry: {
      'my-panel-item': MyPanelItem

// Runtime
osjs.make('osjs/panels').register('my-panel-item', MyPanelItem);

results matching ""

    No results matching ""