Pengenalan, Struktur & Workflow Import

Alus Builder menyimpan setiap layout dalam bentuk JSON Schema. Saat kamu drag-drop element di canvas, builder menyusun struktur JSON di balik layar. Kamu juga bisa membuat JSON sendiri (Notepad, VS Code, atau dibantu Claude/ChatGPT) lalu Import ke builder — instant layout jadi.

Use case

• AI-generated layout: prompt ke ChatGPT/Claude → JSON → paste ke builder. Lebih cepat dari drag-drop manual.
• Template sharing: copy JSON dari satu page, paste ke page lain (atau site lain — global classes ikut).
• Bulk edit: ganti 50 instance teks/warna sekaligus via find-replace di JSON.
• Version control: simpan JSON di Git untuk track perubahan layout.
• Backup: export JSON sebelum eksperimen besar, import balik kalau perlu rollback.

Root: BuilderSchema

{
  "elements": [
    /* AlusElement[] di sini */
  ]
}

Hanya 1 field wajib: elements (array AlusElement). Versioning ada di envelope Flat Alus File (version, otomatis ambil dari Alusio changelog terbaru saat Export — lihat di bawah).

AlusElement — bentuk umum

Setiap element punya shape umum yang sama, beda hanya di props:

{
  // ── WAJIB ──
  "id": string,            // 8-char unique, e.g. "0jv1rmtf"
  "type": string,          // discriminator: "heading" | "button" | "section" | ...
  "props": object,         // shape per-type (lihat halaman element)

  // ── OPSIONAL ──
  "label": string,         // label custom di Structure panel
  "classes": string[],     // shortIds yang refer ke globalClasses
  "style": {               // styling responsif
    "desktop": { ... },
    "tablet": { ... },
    "mobile": { ... },
    "selectorStyles": [ ... ]   // hover/active/class state
  },
  "displayConditions": { ... },
  "interactions": [ ... ],
  "animation": { ... },

  // ── HANYA UNTUK LAYOUT type ──
  "children": AlusElement[]
}

Field id — single short ID

String unik 8-char alphanumeric (mis. 0jv1rmtf). Tanpa prefix di JSON. Renderer otomatis prefix alsbldr- saat output ke DOM/CSS:

// JSON:  { "id": "0jv1rmtf", ... }
// DOM:   <div id="alsbldr-0jv1rmtf">
// CSS:   #alsbldr-0jv1rmtf { ... }

ID harus unik di seluruh schema (bukan cuma di parent). Validator reject duplicate.

Field type

Basic Element category: heading, basicText, richText, button, textLink, image, video, icon. Layout wrappers: section, container, block. Daftar lengkap per kategori ada di halaman element masing-masing.

Field classes — global class refs

Array shortIds yang refer ke entry di globalClasses (di Alus File) atau ke pool DB site. Detail di halaman Global Classes.

Field style — responsif

"style": {
  "desktop": { "fontSize": "64px", "fontWeight": "800", "color": "#0f172a" },
  "tablet":  { "fontSize": "48px" },
  "mobile":  { "fontSize": "32px" }
}

Properti CSS standar: fontSize, fontWeight, color, backgroundColor, padding, margin, textAlign, width, maxWidth, borderRadius, display, flexDirection, justifyContent, alignItems, gap. Drop seluruh style kalau pakai default theme.

Field children — layout-only

Wajib untuk: section, container, block, sidebarLayout (+ sidebarMain, sidebarAside), tabs (+ tab), twoColLayout (+ col1, col2). Boleh [] kosong. DILARANG untuk leaf types.

Contoh minimal valid schema

{
  "elements": [
    {
      "id": "sec001x9",
      "type": "section",
      "props": {},
      "children": [
        {
          "id": "con002y8",
          "type": "container",
          "props": {},
          "children": [
            {
              "id": "h003z7w6",
              "type": "heading",
              "props": { "text": "Halo Dunia", "level": "h1", "alignment": "center" }
            }
          ]
        }
      ]
    }
  ]
}

Hierarki standar: section > container > element-element. Section pembungkus full-width, container memberi max-width. props: {} di section/container valid (layout schema punya defaults internal).

Cara Import JSON ke Builder

1. Buka editor builder: /dashboard/[siteSlug]/pages/[pageId]/builder
2. Di panel kanan (Structure), klik tombol menu (⋯) di header
3. Klik Import Schema
4. Modal muncul → paste JSON ke textarea (atau klik Pilih File JSON untuk upload .json)
5. Pilih mode:
   • Ganti semua (replace) — schema lama di-overwrite
   • Tambahkan (append) — element baru di-append ke layout existing
6. Klik Import. Kalau ada konflik global class, modal pilihan muncul (skip / replace / rename per class).
7. Klik Save di topbar untuk persist.

Cara Export JSON dari Builder

Builder punya 2 cara export — keduanya hasilkan flat self-describing format:

• Copy All (Structure → menu ⋯ → Copy All) — JSON ke clipboard. Cocok untuk paste ke ChatGPT/Claude untuk diedit lalu paste balik.
• Export File (Structure → menu ⋯ → Export) — download .json file untuk backup atau Git.

Output:

{
  "source": "alusioCopiedElements",
  "version": "1.4.0",
  "exportedAt": "2026-05-09T10:00:00.000Z",
  "sourceUrl": "https://your-site.alusio.com",
  "elements": [...],
  "globalClasses": [...]
}

Empat shape JSON yang diterima Import

Import modal pintar — terima 4 shape input, otomatis di-normalize:

1. Flat Alus File (format Export utama) — lihat di atas.
2. Raw BuilderSchema (rekomendasi untuk hand-craft & AI):

   { "elements": [...] }

3. Array elements (paste banyak element sekaligus):

   [
     { "id": "0jv1rmtf", "type": "heading", "props": {...} },
     { "id": "btn001ax", "type": "button", "props": {...} }
   ]

   Builder auto-wrap.
4. Single element snippet (paste satu element saja):

   {
     "id": "0jv1rmtf",
     "type": "heading",
     "props": { "text": "Halo", "level": "h1", "alignment": "center" }
   }

   Builder auto-wrap jadi array berisi 1 element.

Berarti contoh JSON di halaman element-element berikutnya bisa langsung di-import as-is.

Validasi sebelum Import

Setelah auto-wrap, builder validasi schema. Pastikan:

• Setiap element punya id (string unik di seluruh schema), type (valid AlusElementType), dan props (object — boleh kosong {}).
• Layout element (section, container, block, dll) wajib punya children array — boleh kosong.
• Leaf element (heading, button, image, dll) tidak boleh punya children.
• Format ID: 8-char alphanumeric (mis. 0jv1rmtf). Bebas asal unik. Renderer otomatis prefix alsbldr- saat output ke DOM/CSS.

Kalau gagal, builder tampilkan pesan error spesifik (field invalid + path-nya).