Visual Editor

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

Visual Editor memungkinkan kamu mengubah tampilan UI aplikasimu dengan mengklik elemen dan mengedit propertinya secara langsung. Beralih ke mode Visual di toolbar builder untuk mengaktifkannya.

Cara kerjanya

Beralih ke mode Visual di toolbar (bersama Preview, Code, dan Dashboard)
Arahkan kursor ke elemen di preview — elemen akan ditandai 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 sumbermu. Gunakan tombol Reset last edit di sidebar untuk membatalkan perubahan properti terakhir.

Apa yang bisa saya edit?

Teks — Edit konten teks 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 — left, center, right, justify
Warna teks — Warna Tailwind apa saja
Warna latar belakang — Warna Tailwind apa saja
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 gambarmu 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 mengulanginya.

Palet halaman

Visual Editor memeriksa halamanmu dan menampilkan setiap warna Tailwind serta CSS custom property yang sudah digunakan. Saat kamu membuka color picker untuk elemen yang dipilih, kamu bisa memilih dari palet halaman ini agar tetap konsisten dengan sistem desain yang sudah ada, tanpa perlu menebak kode hex.

Tanyakan ke AI tentang elemen yang dipilih

Untuk perubahan yang tidak bisa dilakukan melalui editor properti, ketik prompt singkat di input Ask AI di bagian bawah sidebar. Elemen yang dipilih diteruskan sebagai konteks, sehingga prompt seperti “make this card more compact” atau “add a hover state with a subtle lift” bisa langsung dipahami tanpa perlu menjelaskan elemen mana yang kamu maksud.

Elemen Statis vs Dinamis

Visual Editor bekerja paling baik pada elemen statis di mana className dan konten teks berupa 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 yang cepat:

Memperbaiki typo
Menyesuaikan spasi
Mengubah warna
Memperbarui teks tombol

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

Bagaimana cara menyimpan perubahan?

Perubahan disimpan secara otomatis saat kamu mengedit properti. File ditulis ke runtime-mu dan di-commit ketika AI atau kamu membuat sebuah commit.

FAQ

Apakah saya bisa membatalkan perubahan visual?

Bisa. Gunakan Cmd+Z / Ctrl+Z untuk membatalkan. Visual Editor memiliki undo/redo stack-nya sendiri.

Mengapa ada elemen yang bisa diedit dan ada yang tidak?

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

Apa perbedaan antara Visual Editor dan Code Editor?

Alat	Paling cocok untuk
Visual Editor	Perubahan properti cepat (teks, warna, spasi) dengan cara mengklik
Code Editor	Pengeditan source code penuh dengan VS Code
AI Chat	Perubahan kompleks, fitur baru, debugging