Visual Editor

টেক্সট, রং, স্পেসিং, ফন্ট এবং আরও অনেক কিছু সম্পাদনা করতে উপাদানগুলোতে ক্লিক করো। ছোট পরিবর্তনের জন্য সবচেয়ে ভালো; বড় পরিবর্তনের জন্য chat ব্যবহার করো।

Visual Editor তোমাকে উপাদানগুলোতে ক্লিক করে এবং সরাসরি তাদের properties সম্পাদনা করে অ্যাপের UI পরিবর্তন করতে দেয়। এটি সক্রিয় করতে builder toolbar-এ Visual মোডে স্যুইচ করো।

এটি কীভাবে কাজ করে

1. Visual মোডে স্যুইচ করো — এটি toolbar-এ Preview-এর একটি sub-mode (toolbar-এর দুটি অংশ হলো Preview এবং Admin)
2. preview-তে উপাদানগুলোর উপর হোভার করো — সেগুলো overlay সহ হাইলাইট হবে
3. একটি উপাদান নির্বাচন করতে তাতে ক্লিক করো
4. sidebar panel-এ properties সম্পাদনা করো: টেক্সট, রং, স্পেসিং, ফন্ট, border, ছবি, effects

পরিবর্তনগুলো তাৎক্ষণিকভাবে preview-তে প্রয়োগ হয় এবং তোমার source ফাইলে লেখা হয়। সর্বশেষ property পরিবর্তন পূর্বাবস্থায় ফেরাতে sidebar-এ Reset last edit বাটন ব্যবহার করো।

আমি কী কী সম্পাদনা করতে পারি?

• Text — সরাসরি কপি সম্পাদনা করো
• Font size — xs, sm, base, lg, xl ইত্যাদি
• Font weight — thin, light, normal, medium, semibold, bold, extrabold
• Font family — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
• Font style — Italic টগল
• Text alignment — left, center, right, justify
• Text color — যেকোনো Tailwind রং
• Background color — যেকোনো Tailwind রং
• Spacing — সব দিকে Padding এবং margin
• Border — Width, রং এবং radius (টেক্সট কন্টেন্ট ছাড়া container উপাদানে পাওয়া যায়)
• Image — stock photo সার্চ দিয়ে প্রতিস্থাপন করো বা নিজের ছবি আপলোড করো (img উপাদান এবং background image-এ প্রযোজ্য)
• Effects — Shadow এবং opacity

Undo / Redo

পরিবর্তন পূর্বাবস্থায় ফেরাতে Cmd+Z (Mac) বা Ctrl+Z (Windows) ব্যবহার করো। Redo করতে Cmd+Shift+Z / Ctrl+Shift+Z ব্যবহার করো।

পেজ palette

Visual Editor তোমার পেজ পরীক্ষা করে এবং ইতোমধ্যে ব্যবহৃত প্রতিটি Tailwind রং ও CSS custom property সামনে তুলে ধরে। নির্বাচিত উপাদানের জন্য color picker খুললে, hex code অনুমান না করে বিদ্যমান design system-এর সাথে সামঞ্জস্য রাখতে এই page palette থেকে বেছে নিতে পারো।

নির্বাচিত উপাদান সম্পর্কে AI-কে জিজ্ঞেস করো

property editor দিয়ে প্রকাশ করা যায় না এমন পরিবর্তনের জন্য, sidebar-এর নিচে Ask AI ইনপুটে একটি ছোট prompt টাইপ করো। নির্বাচিত উপাদানটি context হিসেবে পাঠানো হয়, তাই “make this card more compact” বা “add a hover state with a subtle lift”-এর মতো prompt-এ তোমাকে কোন উপাদানটি বোঝাচ্ছ তা আলাদাভাবে বলতে হবে না।

Static বনাম Dynamic উপাদান

Visual Editor সবচেয়ে ভালো কাজ করে static উপাদানে যেখানে JSX-এ className এবং টেক্সট কন্টেন্ট string literal। Dynamic উপাদানের ক্ষেত্রে (computed className, conditional rendering, expression), editor স্বয়ংক্রিয়ভাবে structured prompt সহ AI chat-এ ফিরে যায়।

আমি কখন Visual Editor ব্যবহার করব?

Visual Editor ছোট, দ্রুত পরিবর্তনের জন্য সবচেয়ে ভালো:

• টাইপো ঠিক করা
• স্পেসিং সামঞ্জস্য করা
• রং পরিবর্তন করা
• বাটনের টেক্সট আপডেট করা

বড় পরিবর্তনের জন্য (নতুন section, layout পুনর্গঠন, নতুন feature), পরিবর্তে AI chat ব্যবহার করো।

আমি পরিবর্তন কীভাবে সংরক্ষণ করব?

property সম্পাদনা করলে পরিবর্তন স্বয়ংক্রিয়ভাবে সংরক্ষিত হয়। ফাইলটি তোমার runtime-এ লেখা হয় এবং পরবর্তী builder turn-এ commit হলে পরিবর্তনটি তোমার version history-তে যুক্ত হয়।

সচরাচর জিজ্ঞাসা

আমি কি visual edit পূর্বাবস্থায় ফেরাতে পারি?

হ্যাঁ। পূর্বাবস্থায় ফেরাতে Cmd+Z / Ctrl+Z ব্যবহার করো। Visual Editor নিজস্ব undo/redo stack বজায় রাখে।

কেন কিছু উপাদান সম্পাদনা করা যায়, কিছু যায় না?

Static টেক্সট এবং className attribute সরাসরি সম্পাদনা করা যায়। Dynamic বা computed value (template literal, ternary expression, function call) স্বয়ংক্রিয়ভাবে AI chat-এ ফিরে যায়।

আমি কখন AI chat-এর পরিবর্তে Visual Editor ব্যবহার করব?

টুল	সবচেয়ে ভালো
Visual Editor	ক্লিক করে দ্রুত property পরিবর্তন (টেক্সট, রং, স্পেসিং)
AI Chat	জটিল পরিবর্তন, নতুন feature, debugging

অ্যাপ পরিবর্তনের এই দুটিই একমাত্র উপায় — কোনো code editor নেই। দেখো Editing and Accessing Your Code।