Based on Dockimbel VID livecode, this is a little more advanced version where you can define Red's values used by the VID code. And the window is resizable.

Livecode enhanced

Red [
	Title:   "Simple GUI livecoding demo"
	Author:  "Nenad Rakocevic / Didier Cadieu"
	File: 	 %livecode2.red
	Needs:	 'View
	Usage:  {
		Type VID code in the bottom right area, you will see the resulting GUI components
		rendered live on the left side and fully functional (events/actors/reactors working live).
		The top right area let you define Red's values to be used in your VID code, even functions or anything.
	}
]

;--- Size the window's faces according the main window size
insert-event-func [
	if event/type = 'resize [
		pan/size/y: mainwin/size/y - pan/offset/y - orig/y
		code/size/y: pan/size/y - code/offset/y - orig/y
	 	output/size: mainwin/size - output/offset - orig
		'done
	]
]

err-color: 255.180.180
orig: 4x4

view/flags mainwin: layout [
	title "Red Livecoding"
	backdrop gray
	origin orig
	space 4x0

	style area: area wrap font-name "Fixedsys"

	pan: panel [
		below
		origin orig
		space 0x0
		text "Values to define before layout :" 200x15
		preset: area 500x100 on-key-up [
			face/color: either error? err: try [do load face/text][print err err-color][white]
		]
		pad 0x4
		text "Layout code in VID dialect :" 200x15
		code: area 500x600 wrap font-name "Fixedsys" on-key-up [
			face/color: either error? err: try [output/pane: layout/only load face/text][print err err-color][white]
		]
	]
	output: panel 400x600
] 'resize