vue-poster-editor/lib/canvas/editor-mirror.html

A poster editor based on Vue.js

<div
    class="editor-canvas editor-mirror"
    :style="{
        backgroundColor: global.backgroundColor
    }"
>
    <!-- Layouts -->
    <div
        class="editor-layout"
        v-for="layout in layouts"
        :class="{
            'editor-layout-loaded': layout.$loaded
        }"
        :style="{
            backgroundRepeat: layout.backgroundRepeat,
            backgroundColor: layout.backgroundColor || 'transparent',
            backgroundImage: layout.backgroundImage ? 'url('+ layout.backgroundImage +')' : null,
            height: global.zoom * layout.height + 'px',
            width: global.zoom * layout.width + 'px'
        }"
    >
        <!-- elements -->
        <component
            v-for="(element, index) in layout.elements"
            :key="index"
            :is="'editor-element-' + element.type"
            :options="options"
            :global="global"
            :model="element"
        ></component>
    </div>
</div>