Visual Editor

Klik elemen untuk mengedit teks, warna, spasi, font, dan lainnya. Paling baik untuk perubahan kecil; gunakan chat untuk perubahan yang lebih besar.

Visual Editor memungkinkan kamu mengubah tampilan UI aplikasi dengan mengklik elemen dan mengedit propertinya secara langsung. Aktifkan dengan beralih ke mode Visual di toolbar builder.

Cara kerjanya

Beralih ke mode Visual — ini adalah sub-mode dari Preview di toolbar (toolbar memiliki dua segmen: Preview dan Admin)
Arahkan kursor ke elemen di preview — elemen akan disorot dengan overlay
Klik elemen untuk memilihnya
Edit properti di panel sidebar: teks, warna, spasi, font, border, gambar, efek

Perubahan langsung diterapkan ke preview dan ditulis ke file sumber kamu. Gunakan tombol Reset last edit di sidebar untuk membatalkan perubahan properti terakhir.

Apa saja yang bisa diedit?

Teks — Edit konten secara langsung
Ukuran font — xs, sm, base, lg, xl, dll.
Ketebalan font — thin, light, normal, medium, semibold, bold, extrabold
Jenis font — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Gaya font — Toggle italic
Perataan teks — kiri, tengah, kanan, justify
Warna teks — Warna Tailwind apa pun
Warna latar belakang — Warna Tailwind apa pun
Spasi — Padding dan margin di semua sisi
Border — Lebar, warna, dan radius (tersedia pada elemen container tanpa konten teks)
Gambar — Ganti dengan pencarian foto stok atau unggah gambar sendiri (berlaku untuk elemen img dan background image)
Efek — Shadow dan opacity

Undo / Redo

Gunakan Cmd+Z (Mac) atau Ctrl+Z (Windows) untuk membatalkan perubahan. Cmd+Shift+Z / Ctrl+Shift+Z untuk mengulang kembali.

Palet halaman

Visual Editor memeriksa halamanmu dan menampilkan setiap warna Tailwind serta properti kustom CSS yang sudah digunakan. Saat kamu membuka color picker untuk elemen yang dipilih, kamu dapat memilih dari palet halaman ini agar tetap konsisten dengan design system yang sudah ada, tanpa harus menebak-nebak kode hex.

Tanyakan ke AI tentang elemen yang dipilih

Untuk perubahan yang tidak bisa diekspresikan melalui editor properti, ketik prompt singkat di input Ask AI di bagian bawah sidebar. Elemen yang dipilih dikirimkan sebagai konteks, sehingga prompt seperti “buat kartu ini lebih ringkas” atau “tambahkan hover state dengan efek lift yang halus” bisa langsung dipahami tanpa kamu perlu menjelaskan elemen mana yang dimaksud.

Elemen Statis vs Dinamis

Visual Editor paling efektif pada elemen statis di mana className dan konten teks merupakan string literal dalam JSX. Untuk elemen dinamis (className yang dihitung, conditional rendering, ekspresi), editor secara otomatis beralih ke AI chat dengan prompt yang terstruktur.

Kapan sebaiknya menggunakan Visual Editor?

Visual Editor paling cocok untuk perubahan kecil dan cepat:

Memperbaiki typo
Menyesuaikan spasi
Mengubah warna
Memperbarui teks tombol

Untuk perubahan yang lebih besar (seksi baru, restrukturisasi layout, fitur baru), gunakan AI chat sebagai gantinya.

Bagaimana cara menyimpan perubahan?

Perubahan disimpan secara otomatis saat kamu mengedit properti. File langsung ditulis ke runtime kamu, dan perubahan tersebut di-commit ke riwayat versi pada giliran builder berikutnya yang melakukan commit.

FAQ

Bisakah saya membatalkan pengeditan visual?

Bisa. Gunakan Cmd+Z / Ctrl+Z untuk undo. Visual Editor memiliki undo/redo stack tersendiri.

Mengapa saya bisa mengedit beberapa elemen tapi tidak yang lain?

Atribut teks statis dan className dapat diedit langsung. Nilai dinamis atau yang dihitung (template literal, ekspresi ternary, pemanggilan fungsi) secara otomatis beralih ke AI chat.

Kapan sebaiknya menggunakan Visual Editor daripada AI chat?

Alat	Paling baik untuk
Visual Editor	Perubahan properti cepat (teks, warna, spasi) dengan cara mengklik
AI Chat	Perubahan kompleks, fitur baru, debugging

Keduanya adalah satu-satunya cara untuk mengubah aplikasimu — tidak ada code editor. Lihat Mengedit dan Mengakses Kode Kamu.