diff --git a/static/js/app.mjs b/static/js/app.mjs
index 4d97a3f..45becb6 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -1,3 +1,4 @@
+import { Component } from '@component'
 import { Editor } from '@editor'
 import { MessageBus } from '@mbus'
 import { SelectType, SelectNodeDialog, ConnectionDataDialog } from '@select_node'
@@ -54,7 +55,7 @@ export class App {
 				const uri = `${location.protocol}//${location.host}/nodes/${event.detail}`
 				const img = document.querySelector('#editor-node .copy-path')
 				img.classList.add('highlight')
-				setTimeout(()=>img.classList.remove('highlight'), 150)
+				setTimeout(() => img.classList.remove('highlight'), 150)
 				navigator.clipboard.writeText(uri)
 				break
 
@@ -190,7 +191,11 @@ export class App {
 				this.typesList.fetchTypes().then(() => {
 					mbus.dispatch('TYPES_LIST_FETCHED')
 				})
+				break
 
+			case 'script':
+				document.getElementById('scripts').classList.add('show')
+				document.getElementById('editor-script').classList.add('show')
 				break
 		}
 	}// }}}
@@ -693,8 +698,9 @@ export class TreeNode {
 	}// }}}
 }
 
-export class TypesList {
-	constructur() {// {{{
+class TypesList extends Component {
+	constructor() {// {{{
+		super()
 		this.types = []
 	}// }}}
 	async fetchTypes() {// {{{
@@ -712,7 +718,7 @@ export class TypesList {
 				.catch(err => reject(err))
 		})
 	}// }}}
-	render() {// {{{
+	renderComponent() {// {{{
 		const div = document.createElement('div')
 
 		const create = document.createElement('img')
@@ -775,11 +781,12 @@ export class TypesList {
 	}// }}}
 }
 
-class TypeSchemaEditor {
+class TypeSchemaEditor extends Component {
 	constructor(dataType) {// {{{
+		super()
 		this.type = dataType
 	}// }}}
-	render() {// {{{
+	renderComponent() {// {{{
 		const tmpl = document.createElement('template')
 		tmpl.innerHTML = `
 			<div>
diff --git a/views/pages/app.gotmpl b/views/pages/app.gotmpl
index 4136f9a..6f39742 100644
--- a/views/pages/app.gotmpl
+++ b/views/pages/app.gotmpl
@@ -4,8 +4,9 @@
 <script type="importmap">
 {
 	"imports": {
-		"@editor":      "/js/{{ .VERSION }}/editor.mjs",
 		"@mbus":        "/js/{{ .VERSION }}/mbus.mjs",
+		"@component":   "/js/{{ .VERSION }}/component.mjs",
+		"@editor":      "/js/{{ .VERSION }}/editor.mjs",
 		"@select_node": "/js/{{ .VERSION }}/select_node.mjs"
 	}
 }
@@ -21,8 +22,9 @@
 <div id="layout">
 	<div class="page section" id="menu">
 		<div class="item" id="logo"><img src="/images/{{ .VERSION }}/logo.svg" /></div>
-		<div class="item" data-section='node' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'node')">Nodes</div>
-		<div class="item" data-section='type' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'type')">Types</div>
+		<div class="item" data-section='node'   onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'node')">Nodes</div>
+		<div class="item" data-section='type'   onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'type')">Types</div>
+		<div class="item" data-section='script' onclick="mbus.dispatch('MENU_ITEM_SELECTED', 'script')">Scripts</div>
 	</div>
 
 	<div class="page section" id="nodes"></div>
@@ -62,6 +64,9 @@
 
 	<div class="page section" id="types"></div>
 	<div class="page section" id="editor-type-schema"></div>
+
+	<div class="page section" id="scripts"></div>
+	<div class="page section" id="editor-script"></div>
 </div>
 
 {{ end }}