---
title: "Ikhtisar Interface Builder"
description: "Interface Builder NocoBase: mode konfigurasi WYSIWYG, template layout, halaman, Block, Action, konfigurasi kolom Table, kustomisasi UI tanpa coding, mendukung perpindahan antara mode konfigurasi dan mode penggunaan."
keywords: "interface builder, WYSIWYG, Block, konfigurasi halaman, template layout, konfigurasi Action, kolom Table, NocoBase"
---

# Interface Builder

## WYSIWYG (What You See Is What You Get)

NocoBase menggunakan mode interface builder WYSIWYG. Klik tombol interface builder untuk berpindah antara mode konfigurasi dan mode penggunaan.

Mode penggunaan:

![20251023215845](https://static-docs.nocobase.com/20251023215845.png)

Mode konfigurasi:

![20251023215951](https://static-docs.nocobase.com/20251023215951.png)

## Template Layout

NocoBase memiliki template layout bawaan, dengan area navigasi di bagian atas dan kiri, serta area konten di sebelah kanan.

![Tanpa Judul.002](https://static-docs.nocobase.com/未命名.002.jpeg)

## Item Konfigurasi

Setelah memasuki mode interface builder, item yang dapat dikonfigurasi akan muncul dalam warna oranye di antarmuka. Biasanya, entri konfigurasi untuk setiap elemen yang dapat dikonfigurasi terletak di sudut kanan atas elemen tersebut. Hampir semua elemen dapat dikonfigurasi secara real-time dan dilihat hasilnya langsung di antarmuka. Berikut adalah beberapa contohnya:

Konfigurasi menu:

![20251023221617](https://static-docs.nocobase.com/20251023221617.png)

Konfigurasi Page:

![20251023221649](https://static-docs.nocobase.com/20251023221649.png)

Konfigurasi Block:

![20251023221748](https://static-docs.nocobase.com/20251023221748.png)

Konfigurasi Action:

![20251023222109](https://static-docs.nocobase.com/20251023222109.png)

Konfigurasi kolom Table:

![20251023221814](https://static-docs.nocobase.com/20251023221814.png)
