DAMAR PREPROCESSOR ENGINE v2

Template Creator Guide & Docs

Build responsive, interactive, and beautifully styled slide blueprints using custom data-attributes.

data-text Text Directive

Editable & Dynamic Text

Add data-text="field" to any HTML element to make it editable in the slide inspector and canvas. Supports placeholder and data-char-limit.

<!-- Basic editable title -->
<h1 data-text="title" data-char-limit="50" placeholder="Judul Utama..."></h1>

<!-- Subtitle / description -->
<p data-text="subtitle" data-char-limit="120" placeholder="Sub-judul..."></p>

data-asset Media Directive

Image & Background Slots

Add data-asset="slotName" to create an image container. Automatically handles image rendering, crop focal points, and upload triggers.

<!-- Main image slot -->
<div data-asset="default" label="Foto Utama" icon="ph-image" class="absolute inset-0"></div>

<!-- Secondary slot without floating upload button -->
<div data-asset="bg" hide-button="true" class="absolute inset-0"></div>

data-setting Brand Directive

Regional Branding & Settings

Binds active regional metadata (Logo, Organization name, City/Province location) directly into elements.

<!-- Active region emblem/logo -->
<img data-setting="logo" class="w-8 h-8 object-contain" />

<!-- Organization & Location text -->
<div data-setting="organization" class="font-bold"></div>
<div data-setting="location" class="text-gray-500"></div>

data-variable Global Variable

Global Workspace Variables

Add data-variable="key" to insert dynamic global text values configured in the editor settings (e.g. social handles, hashtags).

<!-- Renders global variable "instagram" -->
<span data-variable="instagram" class="font-mono text-xs"></span>

v-for & slide.list

Dynamic List Loops

Use Vue's v-for loop on slide.list combined with indexed data-text="list[idx]" to create editable repeating lists or timelines.

<div v-for="(item, idx) in (slide.list || [])" :key="idx" class="flex gap-2">
    <span class="font-bold">{{ idx + 1 }}.</span>
    <div data-text="list[idx]" placeholder="Item..." class="flex-1"></div>
</div>

class="no-render"

Editor-Only Controls

Add the no-render class to any UI element (like "+ Add Item" or position slider buttons). They will be visible in the editor but automatically hidden when exporting image files.

<!-- Button hidden on image export -->
<button @click="(slide.list = slide.list || []).push('Item baru...')" 
        class="no-render text-xs text-blue-500">
    + Tambah Item
</button>

Recommended Starter Boilerplate

Copy & paste to create new blueprints

<div class="h-full flex flex-col bg-white text-black w-full relative overflow-hidden">
    <!-- Header with Organization Logo & Location (data-setting) -->
    <div class="p-4 border-b border-gray-100 flex gap-2 items-center shrink-0 z-10 bg-white">
        <div class="w-8 h-8 flex items-center justify-center">
            <img data-setting="logo" class="w-full h-full object-contain" />
        </div>
        <div class="flex flex-col justify-center">
            <div class="text-[9px] font-bold text-gray-900 leading-tight whitespace-pre-line" data-setting="organization"></div>
            <div class="text-[8px] text-gray-500 leading-tight" data-setting="location"></div>
        </div>
    </div>

    <!-- Image Slot (data-asset) -->
    <div class="flex-1 relative bg-gray-100 overflow-hidden">
        <div data-asset="default" label="Gambar Utama" icon="ph-image-square" class="absolute inset-0"></div>
    </div>

    <!-- Content Area with Editable Text Fields (data-text) -->
    <div class="p-5 flex flex-col gap-1.5 shrink-0 bg-white z-10">
        <div class="text-[9px] font-mono font-bold text-blue-600 tracking-wider" data-text="date" data-char-limit="35" placeholder="Tanggal Kegiatan..."></div>
        <h1 class="text-base font-bold text-gray-900 leading-tight" data-text="title" data-char-limit="50" placeholder="Judul Utama Template Baru..."></h1>
        <p class="text-xs text-gray-600 leading-relaxed" data-text="subtitle" data-char-limit="120" placeholder="Sub-judul atau deskripsi singkat kegiatan..."></p>
    </div>
</div>