app.html

<div class="flex-vert">
    <div class="flex-shrink section top">
        <h1>code editor</h1>
        <window-control distribute=".code-editor-containers">
            <window-control-connector target="code-editor-container[language='Javascript']" class="active">Javascript</window-control-connector>
            <window-control-connector target="code-editor-container[language='HTML']">HTML</window-control-connector>
            <window-control-connector target="code-editor-container[language='CSS']">CSS</window-control-connector>
        </window-control>
    </div>
    <div class="flex-dynamic">
        <div class="code-editor-containers flex-vert">
            <code-editor-container language="Javascript" dir="vertical" class="first-visible last-visible">
            </code-editor-container>
            
            <code-editor-container language="HTML" dir="vertical" style="display: none;">
            </code-editor-container>
            
            <code-editor-container language="CSS" dir="vertical" style="display: none;">
            </code-editor-container>
        </div>
        <div class="output-frame-container">
            <resize-handle target=".code-editor-containers" dir="horizontal"></resize-handle>
            <resize-handle target=".code-editor-containers" dir="vertical" place="top"></resize-handle>
            <output-frame></output-frame>
        </div>
    </div>
    <div class="flex-shrink section bottom">methods: rect, box, center, width, height, rand</div>
</div>
<notification-bubbles></notification-bubbles>