diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 97901b9..43bf465 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,28 +1,463 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import EditorCanvas from './components/editor/EditorCanvas.vue'
-import ToolboxPanel from './components/panels/ToolboxPanel.vue'
-import PropertiesPanel from './components/panels/PropertiesPanel.vue'
-import { useTemplateStore } from './stores/template'
-import { useEditorStore } from './stores/editor'
+import { ref, watch } from 'vue'
+import { DreportEditor } from './lib'
+import type { Template, JsonSchema } from './lib'
 
-const templateStore = useTemplateStore()
-const editorStore = useEditorStore()
+// --- Full Invoice Schema ---
 
+const invoiceSchema: JsonSchema = {
+  $id: 'fatura-schema',
+  type: 'object',
+  properties: {
+    firma: {
+      type: 'object',
+      title: 'Firma',
+      properties: {
+        unvan: { type: 'string', title: 'Firma Unvani' },
+        vergiDairesi: { type: 'string', title: 'Vergi Dairesi' },
+        vergiNo: { type: 'string', title: 'Vergi No' },
+        adres: { type: 'string', title: 'Adres' },
+        il: { type: 'string', title: 'Il' },
+        telefon: { type: 'string', title: 'Telefon' },
+        email: { type: 'string', title: 'E-posta' },
+        logo: { type: 'string', title: 'Logo', format: 'image' },
+      },
+    },
+    fatura: {
+      type: 'object',
+      title: 'Fatura',
+      properties: {
+        no: { type: 'string', title: 'Fatura No' },
+        seri: { type: 'string', title: 'Seri' },
+        tarih: { type: 'string', title: 'Duzenleme Tarihi', format: 'date' },
+        vadeTarihi: { type: 'string', title: 'Vade Tarihi', format: 'date' },
+      },
+    },
+    musteri: {
+      type: 'object',
+      title: 'Musteri',
+      properties: {
+        unvan: { type: 'string', title: 'Musteri Unvani' },
+        vergiDairesi: { type: 'string', title: 'Vergi Dairesi' },
+        vergiNo: { type: 'string', title: 'Vergi No' },
+        adres: { type: 'string', title: 'Adres' },
+        il: { type: 'string', title: 'Il' },
+        telefon: { type: 'string', title: 'Telefon' },
+      },
+    },
+    kalemler: {
+      type: 'array',
+      title: 'Fatura Kalemleri',
+      items: {
+        type: 'object',
+        properties: {
+          siraNo: { type: 'integer', title: 'Sira No' },
+          adi: { type: 'string', title: 'Urun / Hizmet Adi' },
+          miktar: { type: 'number', title: 'Miktar' },
+          birim: { type: 'string', title: 'Birim' },
+          birimFiyat: { type: 'number', title: 'Birim Fiyat', format: 'currency' },
+          tutar: { type: 'number', title: 'Tutar', format: 'currency' },
+        },
+      },
+    },
+    toplamlar: {
+      type: 'object',
+      title: 'Toplamlar',
+      properties: {
+        araToplam: { type: 'number', title: 'Ara Toplam', format: 'currency' },
+        kdvOrani: { type: 'number', title: 'KDV Orani', format: 'percentage' },
+        kdv: { type: 'number', title: 'KDV', format: 'currency' },
+        genelToplam: { type: 'number', title: 'Genel Toplam', format: 'currency' },
+      },
+    },
+  },
+}
+
+// --- Sample Invoice Data ---
+
+const sampleData: Record<string, unknown> = {
+  firma: {
+    unvan: 'Teknova Yazilim A.S.',
+    vergiDairesi: 'Besiktas',
+    vergiNo: '1234567890',
+    adres: 'Levent Mah. Inovasyon Sk. No:42 Kat:5',
+    il: 'Istanbul',
+    telefon: '+90 212 555 0042',
+    email: 'info@teknova.com.tr',
+  },
+  fatura: {
+    no: 'FTR-2026-001547',
+    seri: 'A',
+    tarih: '2026-03-29',
+    vadeTarihi: '2026-04-28',
+  },
+  musteri: {
+    unvan: 'Anadolu Lojistik Ltd. Sti.',
+    vergiDairesi: 'Kadikoy',
+    vergiNo: '9876543210',
+    adres: 'Caferaga Mah. Moda Cd. No:18',
+    il: 'Istanbul',
+    telefon: '+90 216 444 0018',
+  },
+  kalemler: [
+    { siraNo: 1, adi: 'Web Uygulama Gelistirme', miktar: 1, birim: 'Adet', birimFiyat: 45000, tutar: 45000 },
+    { siraNo: 2, adi: 'Mobil Uygulama Gelistirme', miktar: 1, birim: 'Adet', birimFiyat: 35000, tutar: 35000 },
+    { siraNo: 3, adi: 'UI/UX Tasarim Hizmeti', miktar: 40, birim: 'Saat', birimFiyat: 750, tutar: 30000 },
+    { siraNo: 4, adi: 'Sunucu Bakim Sozlesmesi (Yillik)', miktar: 1, birim: 'Adet', birimFiyat: 12000, tutar: 12000 },
+    { siraNo: 5, adi: 'SSL Sertifikasi', miktar: 3, birim: 'Adet', birimFiyat: 500, tutar: 1500 },
+  ],
+  toplamlar: {
+    araToplam: 123500,
+    kdvOrani: 20,
+    kdv: 24700,
+    genelToplam: 148200,
+  },
+}
+
+// --- Default Invoice Template ---
+
+const sz = {
+  fixed: (v: number) => ({ type: 'fixed' as const, value: v }),
+  auto: () => ({ type: 'auto' as const }),
+  fr: (v = 1) => ({ type: 'fr' as const, value: v }),
+}
+
+const defaultInvoiceTemplate: Template = {
+  id: 'tpl_fatura_demo',
+  name: 'Standart Fatura',
+  page: { width: 210, height: 297 },
+  fonts: ['Noto Sans'],
+  root: {
+    id: 'root',
+    type: 'container',
+    position: { type: 'flow' },
+    size: { width: sz.auto(), height: sz.auto() },
+    direction: 'column',
+    gap: 5,
+    padding: { top: 15, right: 15, bottom: 15, left: 15 },
+    align: 'stretch',
+    justify: 'start',
+    style: {},
+    children: [
+      // --- Header Row ---
+      {
+        id: 'c_header',
+        type: 'container',
+        position: { type: 'flow' },
+        size: { width: sz.fr(), height: sz.auto() },
+        direction: 'row',
+        gap: 5,
+        padding: { top: 0, right: 0, bottom: 0, left: 0 },
+        align: 'start',
+        justify: 'space-between',
+        style: {},
+        children: [
+          // Firma bilgileri (sol)
+          {
+            id: 'c_firma',
+            type: 'container',
+            position: { type: 'flow' },
+            size: { width: sz.fr(), height: sz.auto() },
+            direction: 'column',
+            gap: 1,
+            padding: { top: 0, right: 0, bottom: 0, left: 0 },
+            align: 'start',
+            justify: 'start',
+            style: {},
+            children: [
+              {
+                id: 'el_firma_unvan',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 14, fontWeight: 'bold', color: '#1a1a1a' },
+                binding: { type: 'scalar', path: 'firma.unvan' },
+              },
+              {
+                id: 'el_firma_adres',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 9, color: '#555555' },
+                binding: { type: 'scalar', path: 'firma.adres' },
+              },
+              {
+                id: 'el_firma_il',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 9, color: '#555555' },
+                binding: { type: 'scalar', path: 'firma.il' },
+              },
+              {
+                id: 'el_firma_telefon',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 9, color: '#555555' },
+                content: 'Tel: ',
+                binding: { type: 'scalar', path: 'firma.telefon' },
+              },
+              {
+                id: 'el_firma_vd',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 9, color: '#555555' },
+                content: 'VD: ',
+                binding: { type: 'scalar', path: 'firma.vergiDairesi' },
+              },
+              {
+                id: 'el_firma_vn',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 9, color: '#555555' },
+                content: 'VN: ',
+                binding: { type: 'scalar', path: 'firma.vergiNo' },
+              },
+            ],
+          },
+          // Fatura basligi (sag)
+          {
+            id: 'c_fatura_baslik',
+            type: 'container',
+            position: { type: 'flow' },
+            size: { width: sz.auto(), height: sz.auto() },
+            direction: 'column',
+            gap: 2,
+            padding: { top: 0, right: 0, bottom: 0, left: 0 },
+            align: 'end',
+            justify: 'start',
+            style: {},
+            children: [
+              {
+                id: 'el_fatura_baslik',
+                type: 'static_text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 18, fontWeight: 'bold', color: '#1a1a1a', align: 'right' },
+                content: 'FATURA',
+              },
+              {
+                id: 'el_fatura_no',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 10, color: '#333333', align: 'right' },
+                content: 'No: ',
+                binding: { type: 'scalar', path: 'fatura.no' },
+              },
+              {
+                id: 'el_fatura_tarih',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 10, color: '#333333', align: 'right' },
+                content: 'Tarih: ',
+                binding: { type: 'scalar', path: 'fatura.tarih' },
+              },
+              {
+                id: 'el_fatura_vade',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 10, color: '#333333', align: 'right' },
+                content: 'Vade: ',
+                binding: { type: 'scalar', path: 'fatura.vadeTarihi' },
+              },
+            ],
+          },
+        ],
+      },
+      // --- Separator ---
+      {
+        id: 'el_cizgi_1',
+        type: 'line',
+        position: { type: 'flow' },
+        size: { width: sz.fr(), height: sz.auto() },
+        style: { strokeColor: '#cccccc', strokeWidth: 0.5 },
+      },
+      // --- Musteri Bilgileri ---
+      {
+        id: 'c_musteri',
+        type: 'container',
+        position: { type: 'flow' },
+        size: { width: sz.fr(), height: sz.auto() },
+        direction: 'column',
+        gap: 1,
+        padding: { top: 3, right: 5, bottom: 3, left: 5 },
+        align: 'start',
+        justify: 'start',
+        style: { backgroundColor: '#f8f9fa', borderColor: '#e9ecef', borderWidth: 0.5 },
+        children: [
+          {
+            id: 'el_musteri_baslik',
+            type: 'static_text',
+            position: { type: 'flow' },
+            size: { width: sz.auto(), height: sz.auto() },
+            style: { fontSize: 9, fontWeight: 'bold', color: '#666666' },
+            content: 'MUSTERI BILGILERI',
+          },
+          {
+            id: 'el_musteri_unvan',
+            type: 'text',
+            position: { type: 'flow' },
+            size: { width: sz.auto(), height: sz.auto() },
+            style: { fontSize: 11, fontWeight: 'bold', color: '#1a1a1a' },
+            binding: { type: 'scalar', path: 'musteri.unvan' },
+          },
+          {
+            id: 'el_musteri_adres',
+            type: 'text',
+            position: { type: 'flow' },
+            size: { width: sz.auto(), height: sz.auto() },
+            style: { fontSize: 9, color: '#555555' },
+            binding: { type: 'scalar', path: 'musteri.adres' },
+          },
+          {
+            id: 'el_musteri_vd',
+            type: 'text',
+            position: { type: 'flow' },
+            size: { width: sz.auto(), height: sz.auto() },
+            style: { fontSize: 9, color: '#555555' },
+            content: 'VD: ',
+            binding: { type: 'scalar', path: 'musteri.vergiDairesi' },
+          },
+          {
+            id: 'el_musteri_vn',
+            type: 'text',
+            position: { type: 'flow' },
+            size: { width: sz.auto(), height: sz.auto() },
+            style: { fontSize: 9, color: '#555555' },
+            content: 'VN: ',
+            binding: { type: 'scalar', path: 'musteri.vergiNo' },
+          },
+        ],
+      },
+      // --- Kalemler Tablosu ---
+      {
+        id: 'el_tablo',
+        type: 'repeating_table',
+        position: { type: 'flow' },
+        size: { width: sz.fr(), height: sz.auto() },
+        dataSource: { type: 'array', path: 'kalemler' },
+        columns: [
+          { id: 'col_sira', field: 'siraNo', title: '#', width: sz.fixed(10), align: 'center' },
+          { id: 'col_adi', field: 'adi', title: 'Urun / Hizmet', width: sz.fr(), align: 'left' },
+          { id: 'col_miktar', field: 'miktar', title: 'Miktar', width: sz.fixed(18), align: 'right' },
+          { id: 'col_birim', field: 'birim', title: 'Birim', width: sz.fixed(18), align: 'center' },
+          { id: 'col_fiyat', field: 'birimFiyat', title: 'Birim Fiyat', width: sz.fixed(28), align: 'right', format: 'currency' as const },
+          { id: 'col_tutar', field: 'tutar', title: 'Tutar', width: sz.fixed(28), align: 'right', format: 'currency' as const },
+        ],
+        style: {
+          fontSize: 9,
+          headerFontSize: 9,
+          headerBg: '#1e293b',
+          headerColor: '#ffffff',
+          zebraOdd: '#ffffff',
+          zebraEven: '#f8fafc',
+          borderColor: '#e2e8f0',
+          borderWidth: 0.5,
+        },
+      },
+      // --- Toplamlar ---
+      {
+        id: 'c_toplamlar_row',
+        type: 'container',
+        position: { type: 'flow' },
+        size: { width: sz.fr(), height: sz.auto() },
+        direction: 'row',
+        gap: 0,
+        padding: { top: 3, right: 0, bottom: 0, left: 0 },
+        align: 'start',
+        justify: 'end',
+        style: {},
+        children: [
+          {
+            id: 'c_toplamlar',
+            type: 'container',
+            position: { type: 'flow' },
+            size: { width: sz.fixed(80), height: sz.auto() },
+            direction: 'column',
+            gap: 2,
+            padding: { top: 3, right: 5, bottom: 3, left: 5 },
+            align: 'stretch',
+            justify: 'start',
+            style: { borderColor: '#e2e8f0', borderWidth: 0.5 },
+            children: [
+              {
+                id: 'el_ara_toplam',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 10, color: '#333333', align: 'right' },
+                content: 'Ara Toplam: ',
+                binding: { type: 'scalar', path: 'toplamlar.araToplam' },
+              },
+              {
+                id: 'el_kdv',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 10, color: '#333333', align: 'right' },
+                content: 'KDV (%20): ',
+                binding: { type: 'scalar', path: 'toplamlar.kdv' },
+              },
+              {
+                id: 'el_cizgi_2',
+                type: 'line',
+                position: { type: 'flow' },
+                size: { width: sz.fr(), height: sz.auto() },
+                style: { strokeColor: '#1e293b', strokeWidth: 1 },
+              },
+              {
+                id: 'el_genel_toplam',
+                type: 'text',
+                position: { type: 'flow' },
+                size: { width: sz.auto(), height: sz.auto() },
+                style: { fontSize: 12, fontWeight: 'bold', color: '#1a1a1a', align: 'right' },
+                content: 'GENEL TOPLAM: ',
+                binding: { type: 'scalar', path: 'toplamlar.genelToplam' },
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}
+
+// --- LocalStorage persistence ---
+
+const STORAGE_KEY = 'dreport-template'
+
+function loadFromLocalStorage(): Template | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return null
+    return JSON.parse(raw) as Template
+  } catch {
+    return null
+  }
+}
+
+const template = ref<Template>(loadFromLocalStorage() ?? structuredClone(defaultInvoiceTemplate))
+
+let saveTimeout: ReturnType<typeof setTimeout> | null = null
+watch(template, (val) => {
+  if (saveTimeout) clearTimeout(saveTimeout)
+  saveTimeout = setTimeout(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(val))
+  }, 500)
+}, { deep: true })
+
+// --- Editor ref ---
+
+const editorRef = ref<InstanceType<typeof DreportEditor> | null>(null)
 const pdfLoading = ref(false)
 const fileInputRef = ref<HTMLInputElement | null>(null)
 
-function exportTemplate() {
-  const json = templateStore.exportTemplate()
-  const blob = new Blob([json], { type: 'application/json' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `${templateStore.template.name || 'sablon'}.json`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
 function triggerImport() {
   fileInputRef.value?.click()
 }
@@ -34,7 +469,7 @@ function onImportFile(e: Event) {
   const reader = new FileReader()
   reader.onload = () => {
     try {
-      templateStore.importTemplate(reader.result as string)
+      editorRef.value?.importTemplate(reader.result as string)
     } catch {
       alert('Gecersiz sablon dosyasi')
     }
@@ -43,71 +478,40 @@ function onImportFile(e: Event) {
   input.value = ''
 }
 
+function exportTemplate() {
+  const json = editorRef.value?.exportTemplate()
+  if (!json) return
+  const blob = new Blob([json], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `${template.value.name || 'sablon'}.json`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
 async function downloadPdf() {
   pdfLoading.value = true
   try {
-    const res = await fetch('http://localhost:3001/api/render', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        template: templateStore.template,
-        data: templateStore.mockData,
-      }),
-    })
-    if (!res.ok) {
-      const text = await res.text()
-      alert('PDF olusturulamadi: ' + text)
-      return
-    }
-    const blob = await res.blob()
+    const blob = await editorRef.value?.exportPdf()
+    if (!blob) return
     const url = URL.createObjectURL(blob)
     const a = document.createElement('a')
     a.href = url
-    a.download = `${templateStore.template.name || 'belge'}.pdf`
+    a.download = `${template.value.name || 'belge'}.pdf`
     a.click()
     URL.revokeObjectURL(url)
   } catch (err) {
-    alert('Backend baglantisi kurulamadi. Sunucu calisiyor mu?')
+    alert(err instanceof Error ? err.message : 'PDF olusturulamadi')
   } finally {
     pdfLoading.value = false
   }
 }
 
-function onKeyDown(e: KeyboardEvent) {
-  // Delete / Backspace — seçili elemanı sil
-  if ((e.key === 'Delete' || e.key === 'Backspace') && editorStore.selectedElementId) {
-    // Input/textarea içindeyse yoksay
-    const tag = (e.target as HTMLElement)?.tagName
-    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
-
-    e.preventDefault()
-    const id = editorStore.selectedElementId
-    if (id && id !== 'root') {
-      editorStore.clearSelection()
-      templateStore.removeElement(id)
-    }
-  }
-
-  // Escape — seçimi temizle
-  if (e.key === 'Escape') {
-    editorStore.clearSelection()
-  }
-
-  // Ctrl+Z — undo
-  if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
-    e.preventDefault()
-    templateStore.undo()
-  }
-
-  // Ctrl+Shift+Z — redo
-  if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) {
-    e.preventDefault()
-    templateStore.redo()
-  }
+function resetTemplate() {
+  template.value = structuredClone(defaultInvoiceTemplate)
+  localStorage.removeItem(STORAGE_KEY)
 }
-
-onMounted(() => window.addEventListener('keydown', onKeyDown))
-onBeforeUnmount(() => window.removeEventListener('keydown', onKeyDown))
 </script>
 
 <template>
@@ -117,21 +521,20 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeyDown))
       <span class="app-header__subtitle">Belge Tasarim Araci</span>
       <div style="flex: 1"></div>
       <input ref="fileInputRef" type="file" accept=".json" style="display: none" @change="onImportFile" />
+      <button class="header-btn header-btn--secondary" @click="resetTemplate">Sifirla</button>
       <button class="header-btn header-btn--secondary" @click="triggerImport">Yukle</button>
       <button class="header-btn header-btn--secondary" @click="exportTemplate">Kaydet</button>
       <button class="header-btn" :disabled="pdfLoading" @click="downloadPdf">
         {{ pdfLoading ? 'Hazirlaniyor...' : 'PDF Indir' }}
       </button>
     </header>
-    <main class="app-main">
-      <aside class="app-sidebar app-sidebar--left">
-        <ToolboxPanel />
-      </aside>
-      <EditorCanvas />
-      <aside class="app-sidebar app-sidebar--right">
-        <PropertiesPanel />
-      </aside>
-    </main>
+    <DreportEditor
+      ref="editorRef"
+      v-model="template"
+      :schema="invoiceSchema"
+      :data="sampleData"
+      :config="{ apiBaseUrl: 'http://localhost:3001/api' }"
+    />
   </div>
 </template>
 
@@ -196,23 +599,4 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKeyDown))
   background: #334155;
   color: white;
 }
-
-.app-main {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.app-sidebar {
-  width: 260px;
-  background: #f8fafc;
-  border-right: 1px solid #e2e8f0;
-  flex-shrink: 0;
-  overflow-y: auto;
-}
-
-.app-sidebar--right {
-  border-right: none;
-  border-left: 1px solid #e2e8f0;
-}
 </style>
diff --git a/frontend/src/components/editor/EditorCanvas.vue b/frontend/src/components/editor/EditorCanvas.vue
index 33429ec..8bfbeba 100644
--- a/frontend/src/components/editor/EditorCanvas.vue
+++ b/frontend/src/components/editor/EditorCanvas.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useTemplateStore } from '../../stores/template'
 import { useEditorStore } from '../../stores/editor'
@@ -7,6 +7,12 @@ import { useTypstCompiler } from '../../composables/useTypstCompiler'
 import TypstSvgLayer from './TypstSvgLayer.vue'
 import InteractionOverlay from './InteractionOverlay.vue'
 
+const props = withDefaults(defineProps<{
+  handleErrors?: boolean
+}>(), {
+  handleErrors: true,
+})
+
 const templateStore = useTemplateStore()
 const editorStore = useEditorStore()
 const { template, mockData } = storeToRefs(templateStore)
@@ -14,9 +20,15 @@ const { template, mockData } = storeToRefs(templateStore)
 const containerRef = ref<HTMLElement | null>(null)
 const containerWidth = ref(800)
 
+const emit = defineEmits<{
+  'compile-error': [error: string | null]
+}>()
+
 // Typst compiler — template + data'yı worker'a gönderir, WASM ile derlenir
 const { svg, error, compiling, layout, dispose } = useTypstCompiler(template, mockData)
 
+watch(error, (val) => emit('compile-error', val))
+
 // mm → px dönüşüm katsayısı
 const scale = computed(() => {
   return (containerWidth.value / templateStore.template.page.width) * editorStore.zoom
@@ -141,7 +153,7 @@ function onPointerUp(e: PointerEvent) {
     </div>
 
     <!-- Sabit overlay'ler — scroll dışında -->
-    <div v-if="error" class="editor-canvas__error">
+    <div v-if="props.handleErrors && error" class="editor-canvas__error">
       {{ error }}
     </div>
     <div v-if="compiling" class="editor-canvas__compiling">
diff --git a/frontend/src/lib/DreportEditor.vue b/frontend/src/lib/DreportEditor.vue
new file mode 100644
index 0000000..3a56d9e
--- /dev/null
+++ b/frontend/src/lib/DreportEditor.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import type { Template } from '../core/types'
+import type { JsonSchema } from '../core/schema-parser'
+import { useTemplateStore } from '../stores/template'
+import { useSchemaStore } from '../stores/schema'
+import { useEditorStore } from '../stores/editor'
+import EditorCanvas from '../components/editor/EditorCanvas.vue'
+import ToolboxPanel from '../components/panels/ToolboxPanel.vue'
+import PropertiesPanel from '../components/panels/PropertiesPanel.vue'
+
+export interface DreportEditorConfig {
+  apiBaseUrl?: string
+}
+
+const props = withDefaults(defineProps<{
+  schema: JsonSchema
+  modelValue: Template
+  data?: Record<string, unknown>
+  config?: DreportEditorConfig
+  handleErrors?: boolean
+}>(), {
+  handleErrors: true,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Template]
+  'compile-error': [error: string | null]
+}>()
+
+const templateStore = useTemplateStore()
+const schemaStore = useSchemaStore()
+const editorStore = useEditorStore()
+
+// --- Prop ↔ Store sync ---
+
+let syncing = false
+
+// Schema sync
+onMounted(() => {
+  schemaStore.setSchema(props.schema)
+  syncing = true
+  templateStore.template = JSON.parse(JSON.stringify(props.modelValue))
+  nextTick(() => { syncing = false })
+  templateStore.setOverrideData(props.data ?? null)
+})
+
+watch(() => props.schema, (val) => {
+  schemaStore.setSchema(val)
+}, { deep: true })
+
+watch(() => props.data, (val) => {
+  templateStore.setOverrideData(val ?? null)
+}, { deep: true })
+
+// Template: prop → store (only on reference change from parent)
+watch(() => props.modelValue, (val) => {
+  if (syncing) return
+  syncing = true
+  templateStore.template = JSON.parse(JSON.stringify(val))
+  nextTick(() => { syncing = false })
+})
+
+// Template: store → emit
+watch(() => templateStore.template, (val) => {
+  if (syncing) return
+  syncing = true
+  emit('update:modelValue', JSON.parse(JSON.stringify(val)))
+  nextTick(() => { syncing = false })
+}, { deep: true })
+
+// --- Error forwarding ---
+
+function onCompileError(error: string | null) {
+  emit('compile-error', error)
+}
+
+// --- Keyboard shortcuts ---
+
+function onKeyDown(e: KeyboardEvent) {
+  const tag = (e.target as HTMLElement)?.tagName
+  const isInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'
+
+  // Delete / Backspace
+  if ((e.key === 'Delete' || e.key === 'Backspace') && editorStore.selectedElementId) {
+    if (isInput) return
+    e.preventDefault()
+    const id = editorStore.selectedElementId
+    if (id && id !== 'root') {
+      editorStore.clearSelection()
+      templateStore.removeElement(id)
+    }
+  }
+
+  // Escape
+  if (e.key === 'Escape') {
+    editorStore.clearSelection()
+  }
+
+  // Ctrl+Z — undo
+  if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+    e.preventDefault()
+    templateStore.undo()
+  }
+
+  // Ctrl+Shift+Z — redo
+  if ((e.ctrlKey || e.metaKey) && e.key === 'z' && e.shiftKey) {
+    e.preventDefault()
+    templateStore.redo()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onKeyDown))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeyDown))
+
+// --- Exposed API ---
+
+function getTemplate(): Template {
+  return JSON.parse(JSON.stringify(templateStore.template))
+}
+
+function setTemplate(tpl: Template) {
+  templateStore.template = JSON.parse(JSON.stringify(tpl))
+}
+
+function exportTemplate(): string {
+  return templateStore.exportTemplate()
+}
+
+function importTemplate(json: string) {
+  templateStore.importTemplate(json)
+}
+
+async function exportPdf(): Promise<Blob> {
+  const baseUrl = props.config?.apiBaseUrl ?? '/api'
+  const res = await fetch(`${baseUrl}/render`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      template: templateStore.template,
+      data: templateStore.mockData,
+    }),
+  })
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`PDF olusturulamadi: ${text}`)
+  }
+  return res.blob()
+}
+
+defineExpose({
+  getTemplate,
+  setTemplate,
+  exportTemplate,
+  importTemplate,
+  exportPdf,
+  undo: () => templateStore.undo(),
+  redo: () => templateStore.redo(),
+  canUndo: templateStore.canUndo,
+  canRedo: templateStore.canRedo,
+})
+</script>
+
+<template>
+  <div class="dreport-editor">
+    <aside class="dreport-editor__sidebar dreport-editor__sidebar--left">
+      <ToolboxPanel />
+    </aside>
+    <EditorCanvas :handle-errors="handleErrors" @compile-error="onCompileError" />
+    <aside class="dreport-editor__sidebar dreport-editor__sidebar--right">
+      <PropertiesPanel />
+    </aside>
+  </div>
+</template>
+
+<style scoped>
+.dreport-editor {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.dreport-editor__sidebar {
+  width: 260px;
+  background: #f8fafc;
+  border-right: 1px solid #e2e8f0;
+  flex-shrink: 0;
+  overflow-y: auto;
+}
+
+.dreport-editor__sidebar--right {
+  border-right: none;
+  border-left: 1px solid #e2e8f0;
+}
+</style>
diff --git a/frontend/src/lib/index.ts b/frontend/src/lib/index.ts
new file mode 100644
index 0000000..ad28f37
--- /dev/null
+++ b/frontend/src/lib/index.ts
@@ -0,0 +1,35 @@
+export { default as DreportEditor } from './DreportEditor.vue'
+export type { DreportEditorConfig } from './DreportEditor.vue'
+
+// Core types
+export type {
+  Template,
+  TemplateElement,
+  ContainerElement,
+  LeafElement,
+  StaticTextElement,
+  TextElement,
+  LineElement,
+  ImageElement,
+  PageNumberElement,
+  BarcodeElement,
+  RepeatingTableElement,
+  SizeValue,
+  SizeConstraint,
+  PositionMode,
+  ScalarBinding,
+  ArrayBinding,
+  ElementBinding,
+  TextStyle,
+  LineStyle,
+  ContainerStyle,
+  ImageStyle,
+  BarcodeStyle,
+  BarcodeFormat,
+  TableColumn,
+  TableStyle,
+  FormatType,
+} from '../core/types'
+
+// Schema types
+export type { JsonSchema, SchemaNode } from '../core/schema-parser'
diff --git a/frontend/src/stores/schema.ts b/frontend/src/stores/schema.ts
index c7496b8..833cc7f 100644
--- a/frontend/src/stores/schema.ts
+++ b/frontend/src/stores/schema.ts
@@ -3,68 +3,14 @@ import { ref, computed } from 'vue'
 import type { JsonSchema, SchemaNode } from '../core/schema-parser'
 import { parseSchema, findArrayFields, findScalarFields } from '../core/schema-parser'
 
-/** Varsayılan fatura schema'sı */
-const defaultSchema: JsonSchema = {
-  $id: 'fatura-schema',
+/** Minimal boş schema — gerçek schema dışarıdan (DreportEditor prop) gelir */
+const emptySchema: JsonSchema = {
   type: 'object',
-  properties: {
-    firma: {
-      type: 'object',
-      title: 'Firma',
-      properties: {
-        unvan: { type: 'string', title: 'Firma Unvani' },
-        vergiNo: { type: 'string', title: 'Vergi No' },
-        logo: { type: 'string', title: 'Logo', format: 'image' },
-        adres: { type: 'string', title: 'Adres' },
-        telefon: { type: 'string', title: 'Telefon' },
-      },
-    },
-    fatura: {
-      type: 'object',
-      title: 'Fatura',
-      properties: {
-        no: { type: 'string', title: 'Fatura No' },
-        tarih: { type: 'string', title: 'Tarih', format: 'date' },
-      },
-    },
-    musteri: {
-      type: 'object',
-      title: 'Musteri',
-      properties: {
-        unvan: { type: 'string', title: 'Musteri Unvani' },
-        vergiNo: { type: 'string', title: 'Vergi No' },
-        adres: { type: 'string', title: 'Adres' },
-      },
-    },
-    kalemler: {
-      type: 'array',
-      title: 'Fatura Kalemleri',
-      items: {
-        type: 'object',
-        properties: {
-          siraNo: { type: 'integer', title: 'Sira No' },
-          adi: { type: 'string', title: 'Urun / Hizmet Adi' },
-          miktar: { type: 'number', title: 'Miktar' },
-          birim: { type: 'string', title: 'Birim' },
-          birimFiyat: { type: 'number', title: 'Birim Fiyat', format: 'currency' },
-          tutar: { type: 'number', title: 'Tutar', format: 'currency' },
-        },
-      },
-    },
-    toplamlar: {
-      type: 'object',
-      title: 'Toplamlar',
-      properties: {
-        araToplam: { type: 'number', title: 'Ara Toplam', format: 'currency' },
-        kdv: { type: 'number', title: 'KDV', format: 'currency' },
-        genelToplam: { type: 'number', title: 'Genel Toplam', format: 'currency' },
-      },
-    },
-  },
+  properties: {},
 }
 
 export const useSchemaStore = defineStore('schema', () => {
-  const rawSchema = ref<JsonSchema>(defaultSchema)
+  const rawSchema = ref<JsonSchema>(emptySchema)
 
   const schemaTree = computed<SchemaNode>(() => parseSchema(rawSchema.value))
 
diff --git a/frontend/src/stores/template.ts b/frontend/src/stores/template.ts
index 59efd57..112ea40 100644
--- a/frontend/src/stores/template.ts
+++ b/frontend/src/stores/template.ts
@@ -47,7 +47,14 @@ function createDefaultTemplate(): Template {
 export const useTemplateStore = defineStore('template', () => {
   const template = ref<Template>(createDefaultTemplate())
 
-  const mockData = computed(() => generateMockData(template.value))
+  /** Dışarıdan verilen önizleme verisi (null ise mock data üretilir) */
+  const overrideData = ref<Record<string, unknown> | null>(null)
+
+  const mockData = computed(() => overrideData.value ?? generateMockData(template.value))
+
+  function setOverrideData(data: Record<string, unknown> | null) {
+    overrideData.value = data
+  }
 
   // Undo / Redo
   const { undo, redo, canUndo, canRedo } = useUndoRedo(template)
@@ -148,6 +155,7 @@ export const useTemplateStore = defineStore('template', () => {
     exportTemplate,
     importTemplate,
     resetTemplate,
+    setOverrideData,
     undo,
     redo,
     canUndo,