diff --git a/repository/Grafoscopio/GrafoscopioCodeModel.class.st b/repository/Grafoscopio/GrafoscopioCodeModel.class.st
new file mode 100644
index 0000000..55fb6a1
--- /dev/null
+++ b/repository/Grafoscopio/GrafoscopioCodeModel.class.st
@@ -0,0 +1,38 @@
+Class {
+	#name : #GrafoscopioCodeModel,
+	#superclass : #ComposableModel,
+	#instVars : [
+		'body'
+	],
+	#category : #'Grafoscopio-UI'
+}
+
+{ #category : #specs }
+GrafoscopioCodeModel class >> defaultSpec [
+
+	^ SpecLayout composed add: #body
+]
+
+{ #category : #accessing }
+GrafoscopioCodeModel >> body [
+	^ body
+]
+
+{ #category : #accessing }
+GrafoscopioCodeModel >> body: anObject [
+	body := anObject
+]
+
+{ #category : #API }
+GrafoscopioCodeModel >> content: aGrafoscopioNodeContent [
+
+	body
+		presentationClass: GTPlayground
+		startOn: (GTPlayPage new saveContent: aGrafoscopioNodeContent)
+]
+
+{ #category : #initialization }
+GrafoscopioCodeModel >> initializeWidgets [
+
+	body := GlamourPresentationModel new.
+]
diff --git a/repository/Grafoscopio/GrafoscopioNode.class.st b/repository/Grafoscopio/GrafoscopioNode.class.st
index 5bef843..b7a86f1 100644
--- a/repository/Grafoscopio/GrafoscopioNode.class.st
+++ b/repository/Grafoscopio/GrafoscopioNode.class.st
@@ -587,6 +587,15 @@ GrafoscopioNode >> saveContent: anObject [
 	body := anObject
 ]
 
+{ #category : #accessing }
+GrafoscopioNode >> specModelClass [
+
+	self tags = 'código' ifTrue: [^GrafoscopioCodeModel].
+
+	"por defecto"
+	^ GrafoscopioTextModel
+]
+
 { #category : #accessing }
 GrafoscopioNode >> tagAs: aTag [
 	"Tags the recipient node with aTag. For the moment we will have only one tag. In the future we will have several and there will be rules to
diff --git a/repository/Grafoscopio/GrafoscopioNotebook.class.st b/repository/Grafoscopio/GrafoscopioNotebook.class.st
new file mode 100644
index 0000000..7658ddd
--- /dev/null
+++ b/repository/Grafoscopio/GrafoscopioNotebook.class.st
@@ -0,0 +1,109 @@
+Class {
+	#name : #GrafoscopioNotebook,
+	#superclass : #ComposableModel,
+	#instVars : [
+		'tree',
+		'header',
+		'body'
+	],
+	#category : #'Grafoscopio-UI'
+}
+
+{ #category : #specs }
+GrafoscopioNotebook class >> defaultSpec [
+	"comment stating purpose of message"
+
+	^ SpecLayout composed
+		newRow: [:row |
+			row newColumn: [ :tc |
+				tc add: #tree
+					] width: 300.
+			row newColumn: [ :bc |
+				bc newRow: [ :bcr | bcr add: #header ] height: self toolbarHeight.
+				bc add: #body ]]
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> body [
+	^ body
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> body: anObject [
+	body := anObject
+]
+
+{ #category : #'as yet unclassified' }
+GrafoscopioNotebook >> changeBody: aNodeCollection [
+	| node |
+	node := aNodeCollection first.
+	self needRebuild: false.
+	tree needRebuild: false.
+			
+	body := self instantiate: node specModelClass new.
+	body content: node content.
+	body needRebuild: true.
+
+	header text: node header.
+			
+	self buildWithSpecLayout: self class defaultSpec.
+
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> extent [
+	^800@500
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> header [
+	^ header
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> header: anObject [
+	header := anObject
+]
+
+{ #category : #initialization }
+GrafoscopioNotebook >> initializePresenter [
+
+	tree whenSelectedItemsChanged: [ :arg | 
+		arg isEmpty ifFalse: [self changeBody: arg ]].
+	
+	header whenTextChanged: [ :arg |
+		(tree selectedItem) content header: header text.
+		tree updateTree]
+]
+
+{ #category : #initialization }
+GrafoscopioNotebook >> initializeWidgets [
+
+	tree := TreeModel new.
+	body := self newText.
+	
+	header := self newText.
+	
+	body disable.
+	body text: 'Seleciona un nodo a la izquierda'.
+	
+	tree childrenBlock: [:node | node children];
+		displayBlock: [:node | node title ].
+]
+
+{ #category : #API }
+GrafoscopioNotebook >> notebookContent: aTree [
+
+	tree roots: aTree children
+	
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> tree [
+	^ tree
+]
+
+{ #category : #accessing }
+GrafoscopioNotebook >> tree: anObject [
+	tree := anObject
+]
diff --git a/repository/Grafoscopio/GrafoscopioTextModel.class.st b/repository/Grafoscopio/GrafoscopioTextModel.class.st
new file mode 100644
index 0000000..15180db
--- /dev/null
+++ b/repository/Grafoscopio/GrafoscopioTextModel.class.st
@@ -0,0 +1,36 @@
+Class {
+	#name : #GrafoscopioTextModel,
+	#superclass : #ComposableModel,
+	#instVars : [
+		'body'
+	],
+	#category : #'Grafoscopio-UI'
+}
+
+{ #category : #specs }
+GrafoscopioTextModel class >> defaultSpec [
+
+	^ SpecLayout composed add: #body
+]
+
+{ #category : #accessing }
+GrafoscopioTextModel >> body [
+	^ body
+]
+
+{ #category : #accessing }
+GrafoscopioTextModel >> body: anObject [
+	body := anObject
+]
+
+{ #category : #API }
+GrafoscopioTextModel >> content: aGrafoscopioNodeContent [
+	body text: aGrafoscopioNodeContent
+]
+
+{ #category : #initialization }
+GrafoscopioTextModel >> initializeWidgets [
+
+	body := self newText.
+	body beForText.
+]