Defining a Simple Panel

To create a simple panel, that doesn't need to dock to workspace, set the type to simple.


In the panel field in package.json:

  "name": "simple-package",
  "panel": {
    "main": "panel/index.html",
    "type": "simple",
    "title": "Simple Panel",
    "width": 400,
    "height": 300

By defining the panel field, and set the type to simple, the panel will be opened as a simple panel. The simple panel will accept a html page as its entry point in main.

The rest is just a web page:

    <title>Simple Panel Window</title>
    <meta charset="utf-8">
      body {
        margin: 10px;

      h1 {
        color: #f90

    <h1>A simple panel window</h1>
    <button id="btn">Send Message</button>

      let btn = document.getElementById('btn');
      btn.addEventListener('click', () => {
        Editor.log('on button clicked!');

Once done, open the panel use'simple-package').

The simple panel is similar to a web page, it is used to integrate some web app to Cocos Creator.

results matching ""

    No results matching ""