diff --git a/src/demo/app/app.component.html b/src/demo/app/app.component.html
index f2165de..500c60d 100644
--- a/src/demo/app/app.component.html
+++ b/src/demo/app/app.component.html
@@ -8,7 +8,7 @@
 </div>
 <div id="flo-container">
   <flo-editor (floApi)="editorContext = $event" [metamodel]="metamodel" [renderer]="renderer" [editor]="editor" [paletteSize]="paletteSize" [paletteEntryPadding]="{width: 4, height: 4}" [(dsl)]="dsl" [paperPadding]="20" (validationMarkers)="markersChanged($event)">
-    <div flo-editor-header>
+    <div header>
       <div id="controls" class="controls">
         <button class="button" id="clearGraph" (click)="editorContext.clearGraph()">Create New Flow</button>
         <!-- let's use the 'x' control on the nodes themselves when they are selected
diff --git a/src/lib/editor/editor.component.html b/src/lib/editor/editor.component.html
index bf682d4..a5e926e 100644
--- a/src/lib/editor/editor.component.html
+++ b/src/lib/editor/editor.component.html
@@ -1,4 +1,4 @@
-<ng-content select="[flo-editor-header]"></ng-content>
+<ng-content select="[header]"></ng-content>
 <div id="flow-view" class="flow-view" style="position:relative">
   <div id="canvas" class="canvas" style="position:relative; display: block; width: 100%; height: 100%;">
     <div *ngIf="!noPalette" id="palette-container" class="palette-container" style="overflow:hidden;">
@@ -22,7 +22,7 @@
 
       <div id="paper-container">
         <div id="paper" class="paper" tabindex="0" style="overflow: hidden; position: absolute; display: block; height:100%; width:100%; overflow:auto;"></div>
-        <ng-content select="[flo-canvas-actions]"></ng-content>
+        <ng-content select="[canvas]"></ng-content>
       </div>
 
       <span class="canvas-controls-container" ng-if="canvasControls">
@@ -51,5 +51,5 @@
     </div>
   </div>
 </div>
-<ng-content select="[flo-editor-footer]"></ng-content>
+<ng-content select="[footer]"></ng-content>