Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
  Forked from:
  https://quasar.dev/layout/drawer#Example--Mini-to-overlay
-->

<!-- TODO LIST: -->

<!-- 1) Add explanation comments -->

<!-- 2) Finish top menu bar -->

<!-- 3) Design new Natron icon in Inkscape following material design guidelines -->

<!-- 4) Move project to Codesandbox -->

<!--This div is for the entire app-->
<div id="q-app">
  <!--This div is also for the entire app-->
  <div class="q-pa-md">
    <!--This div is for the UI grid-->
    <q-layout view="hHh Lpr lff" container style="height: 700px" class="shadow-2 rounded-borders">
      <q-header class="dark-primary-color">
        <!--This q-bar is for the uppermost top bar-->
        <q-bar>
          <!--This icon should be replaced by the Natron redesigned icon-->
          <q-icon name="laptop_chromebook"></q-icon>
          <div>Natron</div>

          <q-space></q-space>

          <q-btn dense flat icon="minimize"></q-btn>
          <q-btn dense flat icon="crop_square"></q-btn>
          <q-btn dense flat icon="close"></q-btn>
        </q-bar>
        
        <!-- Make sure that this q-dialog is at the top, otherwise it will load incorrectly -->

        <q-dialog v-model="alert">
          <q-stepper v-model="step" ref="stepper" color="primary" animated>
            <q-step :name="1" title="Welcome!" icon="settings" :done="step > 1">
              Welcome to the Natron new GUI project! This is my sandbox to test out a new UI for the open-source compositing application <a href="https://natrongithub.github.io/">Natron</a>.
            </q-step>

            <q-step :name="2" title="Background" icon="timeline" :done="step > 2">
              <p>I created this UI mockup because I felt that Natron's current UI deserves attention. The UI of an application can be what makes or breaks the app for the user. In Natron's case, a clunky UI can frustrating to work with and discourage a beginner from learning Natron.</p>
              <p>Because Natron's UI is difficult to grasp, especially for beginners, I envisioned a simpler and more modern UI. This UI would look more professional, while also be more begineer-friendly.</p>
            </q-step>

            <q-step :name="3" title="Finish" icon="assignment">
              <p>There is still a lot that I haven't finished - adjustable layout, node settings, etc. However, I hope that this creates enough interest for a potential UI redesign.</p>
              <p>If you would like to see this tour again, you can find it under the help menu.</p>
            </q-step>

            <template v-slot:navigation>
              <q-stepper-navigation>
                <q-btn v-if="step < 3" @click="$refs.stepper.next()" color="primary" label="Continue"></q-btn>

                <q-btn v-if="step > 2" label="Done" color="primary" v-close-popup></q-btn>

                <q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="Back" class="q-ml-sm"></q-btn>
              </q-stepper-navigation>
            </template>
          </q-stepper>
        </q-dialog>

        <!--This div is for the top menu/toolbar-->

        <q-toolbar>
          <q-btn flat @click="drawerLeft = !drawerLeft" round dense icon="menu"></q-btn>

          <q-btn stretch flat label="File">
            <q-menu auto-close>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>New Project</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Open Project...</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Open Recent</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Reload Project</q-item-section>
                </q-item>

                <q-separator></q-separator>

                <q-item clickable v-close-popup>
                  <q-item-section>Save Project</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Close Project</q-item-section>
                </q-item>

                <q-separator></q-separator>

                <q-item clickable v-close-popup>
                  <q-item-section>Quit</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>

          <q-btn stretch flat label="Edit">
            <q-menu auto-close>
              <q-list dense style="min-width: 100px">
                <q-item clickable>
                  <q-item-section>Preferences</q-item-section>
                  <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>

                  <q-menu anchor="top right" self="top left">
                    <q-list>
                      <q-item v-for="n in 3" :key="n" dense clickable>
                        <q-item-section>Submenu Label</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>
                        <q-menu auto-close anchor="top right" self="top left">
                          <q-list>
                            <q-item v-for="n in 3" :key="n" dense clickable>
                              <q-item-section>3rd level Label</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-item>
                <q-separator></q-separator>
                <q-item clickable v-close-popup>
                  <q-item-section>Cut</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Copy</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Paste</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Select All</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>

          <q-btn stretch flat label="Layout">
            <q-menu>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>Cut</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Copy</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Paste</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Select All</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>

          <q-btn stretch flat label="Display"></q-btn>

          <q-btn stretch flat label="Render"></q-btn>

          <q-btn stretch flat label="Cache"></q-btn>

          <q-btn stretch flat label="Help">
            <q-menu>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>Manual</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Forum</q-item-section>
                </q-item>
                <q-item clickable v-close-popup @click="(alert = true, step = 1)">
                  <q-item-section>Show Tours</q-item-section>

                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Search</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </q-btn>

          <q-space></q-space>

          <q-btn flat @click="drawerRight = !drawerRight" round dense icon="tune"></q-btn>

        </q-toolbar>

      </q-header>
      <!--This div is for the left rail-->
      <q-drawer side="left" v-model="drawerLeft" show-if-above :mini="miniState" mini-to-overlay :width="50" :breakpoint="200" bordered content-class="bg-grey-3">
        <q-scroll-area class="fit">
          <q-list padding>
            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="visibility"></q-icon>
                <q-tooltip>
                  I am a viewer node
                </q-tooltip>
              </q-item-section>
            </q-item>

            <q-item active clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="brush"></q-icon>
                <q-tooltip>
                  I am a rotopaint node
                </q-tooltip>
              </q-item-section>
            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="query_builder"></q-icon>
                <q-tooltip>
                  I am a retime node
                </q-tooltip>
              </q-item-section>

            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="shuffle"></q-icon>
                <q-tooltip>
                  I am a shuffle node
                </q-tooltip>
              </q-item-section>

            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="palette"></q-icon>
                <q-tooltip>
                  I am a colorcorrect node
                </q-tooltip>
              </q-item-section>

            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="blur_circular"></q-icon>
                <q-tooltip>
                  I am a blur node
                </q-tooltip>
              </q-item-section>

            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="colorize"></q-icon>
                <q-tooltip>
                  I am a keyer node
                </q-tooltip>
              </q-item-section>

            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="layers"></q-icon>
                <q-tooltip>
                  I am a merge node
                </q-tooltip>
              </q-item-section>

            </q-item>

            <q-item clickable v-ripple>
              <q-item-section avatar>
                <q-icon name="transform"></q-icon>
                <q-tooltip>
                  I am a transform node
                </q-tooltip>
              </q-item-section>

            </q-item>

          </q-list>
        </q-scroll-area>
      </q-drawer>

      <q-drawer id="resize" side="right" v-model="drawerRight" show-if-above bordered :width="300" :breakpoint="300" content-class="bg-white">
        <q-scroll-area class="fit">
          <div class="q-gutter-t-l" style="max-width: 300px">

            <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="justify" narrow-indicator>
              <q-tab name="project" icon="description" label="project">
                <q-tooltip>
                  Modify the project settings here
                </q-tooltip>
              </q-tab>

              <q-tab name="node" icon="build" label="node">
                <q-tooltip>
                  Modify the selected node's settings here
                </q-tooltip>
              </q-tab>

              <q-tab name="script" icon="code" label="script">
                <q-tooltip>
                  Write and execute a script
                </q-tooltip>
              </q-tab>
            </q-tabs>
            <q-separator></q-separator>
            <q-tab-panels v-model="tab" animated>
              <q-tab-panel name="project">
                <div class="text-h6">Project Settings</div>
                <q-list>
                  <q-item>
                    <q-item-section>Frame Rate</q-item-section>

                    <q-item-section avatar rounded>
                      <q-input outlined v-model="text" type="text" :dense="dense" label="FPS" style="max-width: 100px" />
                    </q-item-section>
                  </q-item>

                  <q-separator></q-separator>

                  <q-item>
                    <q-item-section>File Paths</q-item-section>
                    <q-item-section avatar>
                      <q-btn color="primary" label="Edit..." />
                    </q-item-section>
                  </q-item>

                  <q-separator></q-separator>

                  <q-item>
                    <q-item-section>Output Format</q-item-section>
                    <q-item-section avatar>
                      <q-select outlined v-model="model" :options="options" :dense="dense" :options-dense="denseOpts">
                      </q-select>
                    </q-item-section>

                  </q-item>
                </q-list>
                </q-btn-dropdown>
                </q-item-section>
                </q-item>

                <q-separator></q-separator>

                <q-item>
                  <q-item-section>Frame Start</q-item-section>
                  <q-item-section avatar rounded>
                    <q-input outlined v-model="text" type="text" :dense="dense" label="Frame..." style="max-width: 100px" />
                  </q-item-section>
                </q-item>

                <q-item>
                  <q-item-section>Frame End</q-item-section>
                  <q-item-section avatar rounded>
                    <q-input outlined v-model="text" type="text" :dense="dense" label="Frame..." style="max-width: 100px" />
                  </q-item-section>
                </q-item>

                <q-separator></q-separator>

                <q-item>
                  <q-item-section>GPU rendering</q-item-section>
                  <q-item-section avatar>
                    <q-toggle v-model="button1" color="green" />
                  </q-item-section>
                </q-item>

                <q-item>
                  <q-item-section>Auto Previews</q-item-section>
                  <q-item-section avatar>
                    <q-toggle v-model="button2" color="green" />
                  </q-item-section>
                </q-item>

                <q-item clickable v-ripple>
                  <q-item-section>Plugins</q-item-section>
                  <q-item-section avatar>
                    <q-btn label="Open..." color="primary" @click="layout = true"></q-btn>

                    <q-dialog v-model="layout">
                      <q-layout view="hhh LpR fff" container class="bg-white">
                        <q-header class="default-primary-color">
                          <q-toolbar>
                            <q-btn flat @click="drawer = !drawer" round dense icon="menu"></q-btn>
                            <q-toolbar-title>Plugins</q-toolbar-title>
                            <q-btn flat @click="drawerR = !drawerR" round dense icon="menu"></q-btn>
                            <q-btn flat v-close-popup round dense icon="close"></q-btn>
                          </q-toolbar>
                        </q-header>

                        <q-footer class="dark-primary-color">
                          <q-toolbar inset>
                            <q-btn class="default-primary-color" text-color="white" label="Reset to Factory Settings"></q-btn>
                            <q-space></q-space>

                            <q-btn class="default-primary-color" text-color="white" label="Save"></q-btn>

                            <q-space></q-space>

                            <q-btn class="default-primary-color" text-color="white" label="Cancel"></q-btn>
                          </q-toolbar>
                        </q-footer>

                        <q-drawer bordered v-model="drawer" :width="200" :breakpoint="200" content-class="bg-grey-3 q-pa-sm">
                          <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
                        </q-drawer>

                        <q-drawer side="right" bordered v-model="drawerR" :width="200" :breakpoint="200" content-class="bg-grey-3 q-pa-sm">
                          <div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
                        </q-drawer>

                        <q-page-container>
                          <q-page padding>
                            <h4>Pre-installed Plugins</h4>
                            <p v-for="n in contentSize" :key="n">
                              {{ lorem }}
                            </p>
                          </q-page>
                        </q-page-container>
                      </q-layout>
                    </q-dialog>
                  </q-item-section>
                </q-item>
                </q-list>
              </q-tab-panel>
              <q-tab-panel name="node">
                <div class="text-h6">Node</div>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
              </q-tab-panel>
              <q-tab-panel name="script">
                <div class="text-h6">Script</div>
                <q-space></q-space>
                <q-btn color="primary" label="New Script..." />
              </q-tab-panel>
            </q-tab-panels>
          </div>
        </q-scroll-area>
      </q-drawer>
      <!--This container is for the page content-->
      <q-page-container>
        <q-page>
          <!--This is the viewport panel-->
          <div class="q-px-none">
            <q-layout view="hHh Lpr lff" container style="height: 300px" class="rounded-borders shadow-2">

              <q-drawer side="right" v-model="panelRight" bordered :width="250" :breakpoint="250">
                <q-scroll-area class="fit">
                  <div class="q-pa-sm float-left">
                    <q-list dense padding>

                      <q-item-label header>A topic</q-item-label>

                      <q-item tag="label" v-ripple>
                        <q-item-section side top>
                          <q-checkbox v-model="check1"></q-checkbox>
                        </q-item-section>

                        <q-item-section>
                          <q-item-label>Some text</q-item-label>
                          <q-item-label caption>
                            Some label text
                          </q-item-label>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced></q-separator>
                      <q-item-label header>A topic</q-item-label>

                      <q-item tag="label" v-ripple>
                        <q-item-section>
                          <q-item-label>Some text</q-item-label>
                          <q-item-label caption>Some label Text</q-item-label>
                        </q-item-section>
                        <q-item-section side top>
                          <q-toggle color="green" v-model="notif2" val="friend"></q-toggle>
                        </q-item-section>
                      </q-item>

                      <q-separator spaced></q-separator>
                      <q-item-label header>Other settings</q-item-label>

                      <q-item>
                        <q-item-section side>
                          <q-icon color="teal" name="volume_down"></q-icon>
                        </q-item-section>
                        <q-item-section>
                          <q-slider v-model="volume" :min="0" :max="10" label color="teal"></q-slider>
                        </q-item-section>
                        <q-item-section side>
                          <q-icon color="teal" name="volume_up"></q-icon>
                        </q-item-section>
                      </q-item>

                      <q-item>
                        <q-item-section side>
                          <q-icon color="deep-orange" name="brightness_medium"></q-icon>
                        </q-item-section>
                        <q-item-section>
                          <q-slider v-model="brightness" :min="0" :max="10" label color="deep-orange"></q-slider>
                        </q-item-section>
                      </q-item>

                      <q-item>
                        <q-item-section side>
                          <q-icon color="primary" name="mic"></q-icon>
                        </q-item-section>
                        <q-item-section>
                          <q-slider v-model="mic" :min="0" :max="50" label></q-slider>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </div>
                </q-scroll-area>
              </q-drawer>

              <q-drawer side="right" v-model="panelRight2" bordered :width="250" :breakpoint="250">
                <q-scroll-area class="fit">
                  <div class="q-pa-sm">
                    <p>I am placeholder 2</p>
                  </div>
                </q-scroll-area>
              </q-drawer>

              <q-drawer side="right" v-model="panelRight3" bordered :width="250" :breakpoint="250">
                <q-scroll-area class="fit">
                  <div class="q-pa-sm">
                    <p>I am placeholder 3</p>
                  </div>
                </q-scroll-area>
              </q-drawer>

              <q-drawer side="right" v-model="panelRight4" bordered :width="250" :breakpoint="250">
                <q-scroll-area class="fit">
                  <div class="q-pa-sm">
                    <p>I am placeholder 4</p>
                  </div>
                </q-scroll-area>
              </q-drawer>

              <q-drawer side="right" v-model="drawerRight" show-if-above :mini="!drawer || miniState" :width="200" :breakpoint="500" bordered content-class="bg-grey-3">

                <q-list padding>

                  <q-item clickable v-ripple :active="link === 'inbox'" @click="panelRight = !panelRight, link = 'inbox'" active-class="viewport-opt-active">
                    <q-tooltip>
                      Click on me once to open, and once to close
                    </q-tooltip>

                    <q-item-section avatar>
                      <q-icon name="inbox"></q-icon>
                    </q-item-section>

                  </q-item>

                  <q-item clickable v-ripple :active="link === 'star'" @click="panelRight2 = !panelRight2, link = 'star'" active-class="viewport-opt-active">
                    <q-tooltip>
                      Click on me once to open, and once to close
                    </q-tooltip>
                    <q-item-section avatar>
                      <q-icon name="star"></q-icon>
                    </q-item-section>

                  </q-item>

                  <q-item clickable v-ripple :active="link === 'send'" @click="panelRight3 = !panelRight3, link = 'send'" active-class="viewport-opt-active">
                    <q-item-section avatar>
                      <q-tooltip>
                        Click on me once to open, and once to close
                      </q-tooltip>
                      <q-icon name="send"></q-icon>
                    </q-item-section>

                  </q-item>

                  <q-item clickable v-ripple :active="link === 'drafts'" @click="panelRight4 = !panelRight4, link = 'drafts'" active-class="viewport-opt-active">
                    <q-item-section avatar>
                      <q-tooltip>
                        Click on me once to open, and once to close
                      </q-tooltip>
                      <q-icon name="drafts"></q-icon>
                    </q-item-section>

                  </q-item>
                </q-list>

              </q-drawer>
              
              <q-footer class="default primary color">
                
               <div id="workspace" role="main">
          <div q-pa-md id="horizontalRuler" class="ruler"><b id="hMarker" class="marker"></b></div>
          </div>
        
              </q-footer>

              <!-- This area is for the viewport (which is empty)-->

              <q-page-container>
                <q-page class="q-px-lg q-py-md">

                </q-page>
              </q-page-container>
            </q-layout>
          </div>
          
          <div class="q-pa-md">
    <q-layout view="lHh lpr lFf" container style="height: 400px" class="shadow-2 rounded-borders">
      
      <q-page-container>
        <q-page class="q-pa-s">
          <div id="rete"></div>
        </q-page>
      </q-page-container>
      
    </q-layout>
  </div>

          
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</div>
              
            
!

CSS

              
                /* Palette generated by Material Palette - materialpalette.com/blue-grey/grey */

.dark-primary-color    { background: #455A64; }
.default-primary-color { background: #607D8B; }
.light-primary-color   { background: #CFD8DC; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #9E9E9E; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #757575; }
.divider-color         { border-color: #BDBDBD; }
.temporary-color       { background:
#EEEEEE; }


.viewport-opt-active {
  color: primary;
}


img {
    max-width: 100%;
    max-height: 100%;
}

#resize {
  resize: horizontal;
}


#workspace {
  position: relative;
  font-size: 62.5%;
  background: #232425;
  padding: 10px;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ruler styles */
.ruler {
  position: absolute;
  background: #333435;
  background-size: 100px 100px;
  background-position: -1px -1px;
}
.ruler:after {
  content: "";
  display: block;
  position: absolute;
  background-size: 10px 10px;
  background-position: -1px -1px;
}
#horizontalRuler {
  height: 20px;
  width: 100%;
  top: 0;
  left: 21px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.4) 1px,
    transparent 1px
  );
}
#horizontalRuler:after {
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 1px,
    transparent 1px
  );
}

#workspace ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #999;
}
.ruler li {
  position: absolute;
}
#horizontalRuler li {
  top: -1px;
}
#horizontalRuler li:first-child {
  display: none;
}
#verticalRuler li {
  right: 0;
  margin-top: -12px;
}
.ruler .marker {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: rgba(0, 255, 255, 0.8);
}
#hMarker {
  width: 1px;
  height: 100%;
}



.node .control input, .node .input-control input {
  width: 140px;
}

select, input {
  width: 100%;
  border-radius: 30px;
  background-color: white;
  padding: 2px 6px;
  border: 1px solid #999;
  font-size: 110%;
  width: 170px;
}

              
            
!

JS

              
                new Vue({
  el: "#q-app",
  data() {
    return {
      drawerLeft: true,
      drawerRight: true,
      tab: "project",
      dense: true,
      button1: true,
      button2: false,
      model: "1080 HD",

      options: ["1080 HD", "4K", "720p", "2K", "Custom..."],

      dense: true,
      denseOpts: true,

      layout: false,

      moreContent: true,
      drawer: false,
      drawerR: false,
      
      alert: true,
      step: 1,
      
      miniState: true,
      panelRight: true,
      panelRight2: false,
      panelRight3: false,
      panelRight4: false,
      active: true,
      
      check1: true,
      check2: false,
      check3: false,

      notif1: true,
      notif2: true,
      notif3: false,

      volume: 6,
      brightness: 3,
      mic: 8,

      lorem:
        "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, ratione eum minus fuga, quasi dicta facilis corporis magnam, suscipit at quo nostrum!"
    };
  },

  computed: {
    contentSize() {
      return this.moreContent ? 150 : 5;
    }
  }
});

var numSocket = new Rete.Socket('Number value');

var VueNumControl = {
  props: ['readonly', 'emitter', 'ikey', 'getData', 'putData'],
  template: '<input type="number" :readonly="readonly" :value="value" @input="change($event)" @dblclick.stop="" @pointerdown.stop="" @pointermove.stop=""/>',
  data() {
    return {
      value: 0,
    }
  },
  methods: {
    change(e){
      this.value = +e.target.value;
      this.update();
    },
    update() {
      if (this.ikey)
        this.putData(this.ikey, this.value)
      this.emitter.trigger('process');
    }
  },
  mounted() {
    this.value = this.getData(this.ikey);
  }
}

class NumControl extends Rete.Control {

  constructor(emitter, key, readonly) {
    super(key);
    this.component = VueNumControl;
    this.props = { emitter, ikey: key, readonly };
  }

  setValue(val) {
    this.vueContext.value = val;
  }
}

class NumComponent extends Rete.Component {

    constructor(){
        super("Number");
    }

    builder(node) {
        var out1 = new Rete.Output('num', "Number", numSocket);

        return node.addControl(new NumControl(this.editor, 'num')).addOutput(out1);
    }

    worker(node, inputs, outputs) {
        outputs['num'] = node.data.num;
    }
}

class AddComponent extends Rete.Component {
    constructor(){
        super("Add");
    }

    builder(node) {
        var inp1 = new Rete.Input('num',"Number", numSocket);
        var inp2 = new Rete.Input('num2', "Number2", numSocket);
        var out = new Rete.Output('num', "Number", numSocket);

        inp1.addControl(new NumControl(this.editor, 'num'))
        inp2.addControl(new NumControl(this.editor, 'num2'))

        return node
            .addInput(inp1)
            .addInput(inp2)
            .addControl(new NumControl(this.editor, 'preview', true))
            .addOutput(out);
    }

    worker(node, inputs, outputs) {
        var n1 = inputs['num'].length?inputs['num'][0]:node.data.num1;
        var n2 = inputs['num2'].length?inputs['num2'][0]:node.data.num2;
        var sum = n1 + n2;
        
        this.editor.nodes.find(n => n.id == node.id).controls.get('preview').setValue(sum);
        outputs['num'] = sum;
    }
}

(async () => {
    var container = document.querySelector('#rete');
    var components = [new NumComponent(), new AddComponent()];
    
    var editor = new Rete.NodeEditor('demo@0.1.0', container);
    editor.use(ConnectionPlugin.default);
    editor.use(VueRenderPlugin.default);    
    editor.use(ContextMenuPlugin.default);
    editor.use(AreaPlugin);
    editor.use(CommentPlugin.default);
    editor.use(HistoryPlugin);
    editor.use(ConnectionMasteryPlugin.default);

    var engine = new Rete.Engine('demo@0.1.0');
    
    components.map(c => {
        editor.register(c);
        engine.register(c);
    });

    var n1 = await components[0].createNode({num: 2});
    var n2 = await components[0].createNode({num: 0});
    var add = await components[1].createNode();

    n1.position = [80, 200];
    n2.position = [80, 400];
    add.position = [500, 240];
 

    editor.addNode(n1);
    editor.addNode(n2);
    editor.addNode(add);

    editor.connect(n1.outputs.get('num'), add.inputs.get('num'));
    editor.connect(n2.outputs.get('num'), add.inputs.get('num2'));


    editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
      console.log('process');
        await engine.abort();
        await engine.process(editor.toJSON());
    });

    editor.view.resize();
    AreaPlugin.zoomAt(editor);
    editor.trigger('process');
})();
              
            
!
999px

Console