Visual Editor
উপাদানে ক্লিক করে টেক্সট, রং, স্পেসিং, ফন্ট এবং আরও অনেক কিছু সম্পাদনা করো। ছোট পরিবর্তনের জন্য সেরা; বড় পরিবর্তনের জন্য চ্যাট ব্যবহার করো।
Visual Editor তোমাকে সরাসরি উপাদানে ক্লিক করে এবং তাদের প্রপার্টি সম্পাদনা করে অ্যাপের UI পরিবর্তন করতে দেয়। এটি সক্রিয় করতে builder টুলবারে Visual মোডে সুইচ করো।
এটি কীভাবে কাজ করে
Section titled “এটি কীভাবে কাজ করে”- টুলবারে Visual মোডে সুইচ করো (Preview, Code এবং Dashboard-এর পাশে)
- preview-তে উপাদানগুলোর উপর হোভার করো — সেগুলো একটি overlay দিয়ে হাইলাইট হয়
- একটি উপাদান সিলেক্ট করতে তাতে ক্লিক করো
- সাইডবার প্যানেলে প্রপার্টি সম্পাদনা করো: টেক্সট, রং, স্পেসিং, ফন্ট, বর্ডার, ইমেজ, ইফেক্ট
পরিবর্তনগুলো তাৎক্ষণিকভাবে preview-তে প্রয়োগ হয় এবং তোমার সোর্স ফাইলে লেখা হয়। সর্বশেষ প্রপার্টি পরিবর্তন পূর্বাবস্থায় ফেরাতে সাইডবারে Reset last edit বাটন ব্যবহার করো।
আমি কী কী সম্পাদনা করতে পারি?
Section titled “আমি কী কী সম্পাদনা করতে পারি?”- 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, color এবং radius (টেক্সট কন্টেন্ট ছাড়া container উপাদানে উপলব্ধ)
- Image — স্টক ফটো সার্চ দিয়ে প্রতিস্থাপন করো বা নিজের ইমেজ আপলোড করো (img উপাদান এবং background image-এ প্রযোজ্য)
- Effects — Shadow এবং opacity
Undo / Redo
Section titled “Undo / Redo”পরিবর্তন পূর্বাবস্থায় ফেরাতে Cmd+Z (Mac) বা Ctrl+Z (Windows) ব্যবহার করো। Redo করতে Cmd+Shift+Z / Ctrl+Shift+Z।
পেজ প্যালেট
Section titled “পেজ প্যালেট”Visual Editor তোমার পেজ পরীক্ষা করে এবং ইতিমধ্যে ব্যবহৃত প্রতিটি Tailwind রং ও CSS কাস্টম প্রপার্টি সামনে তুলে ধরে। সিলেক্ট করা উপাদানের জন্য কালার পিকার খুললে, hex কোড অনুমান না করে বিদ্যমান ডিজাইন সিস্টেমের সাথে সামঞ্জস্য রাখতে এই page palette থেকে বেছে নিতে পারো।
সিলেক্ট করা উপাদান সম্পর্কে AI-কে জিজ্ঞেস করো
Section titled “সিলেক্ট করা উপাদান সম্পর্কে AI-কে জিজ্ঞেস করো”প্রপার্টি এডিটর যেসব পরিবর্তন প্রকাশ করতে পারে না, তার জন্য সাইডবারের নিচে Ask AI ইনপুটে একটি সংক্ষিপ্ত প্রম্পট টাইপ করো। সিলেক্ট করা উপাদানটি context হিসেবে পাস হয়, তাই “make this card more compact” বা “add a hover state with a subtle lift”-এর মতো প্রম্পট কাজ করে — কোন উপাদানটি বোঝাচ্ছো তা বর্ণনা করতে হয় না।
স্ট্যাটিক বনাম ডায়নামিক উপাদান
Section titled “স্ট্যাটিক বনাম ডায়নামিক উপাদান”Visual Editor স্ট্যাটিক উপাদানে সবচেয়ে ভালো কাজ করে, যেখানে className এবং টেক্সট কন্টেন্ট JSX-এ string literal। ডায়নামিক উপাদানের ক্ষেত্রে (computed className, conditional rendering, expression), এডিটর স্বয়ংক্রিয়ভাবে একটি structured প্রম্পট সহ AI চ্যাটে ফলব্যাক করে।
Visual Editor কখন ব্যবহার করব?
Section titled “Visual Editor কখন ব্যবহার করব?”Visual Editor ছোট, দ্রুত পরিবর্তনের জন্য সেরা:
- টাইপো ঠিক করা
- স্পেসিং সামঞ্জস্য করা
- রং পরিবর্তন করা
- বাটনের টেক্সট আপডেট করা
বড় পরিবর্তনের জন্য (নতুন সেকশন, লেআউট পুনর্গঠন, নতুন ফিচার), পরিবর্তে AI চ্যাট ব্যবহার করো।
পরিবর্তন কীভাবে সেভ করব?
Section titled “পরিবর্তন কীভাবে সেভ করব?”প্রপার্টি সম্পাদনা করলে পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে সেভ হয়। ফাইলটি তোমার runtime-এ লেখা হয় এবং AI বা তুমি একটি commit তৈরি করলে সেটি committed হয়।
সচরাচর জিজ্ঞাসা
Section titled “সচরাচর জিজ্ঞাসা”ভিজ্যুয়াল এডিটরের পরিবর্তন কি পূর্বাবস্থায় ফেরানো যাবে?
হ্যাঁ। Undo করতে Cmd+Z / Ctrl+Z ব্যবহার করো। Visual Editor নিজস্ব undo/redo stack বজায় রাখে।
কিছু উপাদান সম্পাদনা করতে পারি, কিছু পারি না — কেন?
স্ট্যাটিক টেক্সট এবং className অ্যাট্রিবিউট সরাসরি সম্পাদনা করা যায়। ডায়নামিক বা computed মান (template literal, ternary expression, function call) স্বয়ংক্রিয়ভাবে AI চ্যাটে ফলব্যাক করে।
Visual Editor এবং Code Editor-এর মধ্যে পার্থক্য কী?
| টুল | সেরা ব্যবহার |
|---|---|
| Visual Editor | ক্লিক করে দ্রুত প্রপার্টি পরিবর্তন (টেক্সট, রং, স্পেসিং) |
| Code Editor | VS Code দিয়ে পূর্ণ সোর্স কোড সম্পাদনা |
| AI Chat | জটিল পরিবর্তন, নতুন ফিচার, debugging |