Visual Editor

एलिमेंट पर क्लिक करके टेक्स्ट, रंग, spacing, फ़ॉन्ट और बहुत कुछ एडिट करें। छोटे बदलावों के लिए सबसे अच्छा; बड़े बदलावों के लिए chat का उपयोग करें।

Visual Editor तुम्हें एलिमेंट्स पर क्लिक करके और उनकी properties को सीधे एडिट करके अपने app का UI बदलने देता है। इसे activate करने के लिए builder toolbar में Visual mode पर switch करो।

यह कैसे काम करता है

1. Visual mode पर switch करो — यह toolbar में Preview का एक sub-mode है (toolbar के दो segments हैं: Preview और Admin)
2. preview में एलिमेंट्स पर hover करो — वे एक overlay के साथ highlight होते हैं
3. एलिमेंट को select करने के लिए उस पर क्लिक करो
4. sidebar panel में properties एडिट करो: टेक्स्ट, रंग, spacing, फ़ॉन्ट, borders, इमेज, effects

बदलाव preview में तुरंत apply होते हैं और तुम्हारी source files में लिखे जाते हैं। आखिरी property बदलाव को revert करने के लिए sidebar में Reset last edit बटन का उपयोग करो।

मैं क्या एडिट कर सकता/सकती हूँ?

• Text — copy को सीधे एडिट करो
• 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 toggle
• Text alignment — left, center, right, justify
• Text color — कोई भी Tailwind रंग
• Background color — कोई भी Tailwind रंग
• Spacing — सभी sides पर Padding और margin
• Border — Width, रंग, और radius (टेक्स्ट content के बिना container elements पर उपलब्ध)
• Image — stock photo search से बदलो या अपनी खुद की इमेज upload करो (img elements और background images पर लागू होता है)
• Effects — Shadow और opacity

Undo / Redo

बदलावों को undo करने के लिए Cmd+Z (Mac) या Ctrl+Z (Windows) का उपयोग करो। Redo के लिए Cmd+Shift+Z / Ctrl+Shift+Z।

Page palette

Visual Editor तुम्हारे page का निरीक्षण करता है और हर वो Tailwind रंग और CSS custom property सामने लाता है जो पहले से उपयोग में है। जब तुम selected एलिमेंट के लिए color picker खोलते हो, तो तुम hex codes का अंदाज़ा लगाने की बजाय अपने मौजूदा design system के साथ consistent रहने के लिए इस page palette से चुन सकते हो।

Selected एलिमेंट के बारे में AI से पूछो

उन tweaks के लिए जिन्हें property editor express नहीं कर सकता, sidebar के नीचे Ask AI input में एक छोटा prompt टाइप करो। Selected एलिमेंट context के रूप में pass होता है, इसलिए “make this card more compact” या “add a hover state with a subtle lift” जैसे prompts बिना यह बताए काम करते हैं कि तुम्हारा मतलब किस एलिमेंट से है।

Static बनाम Dynamic Elements

Visual Editor static elements पर सबसे अच्छा काम करता है जहाँ className और टेक्स्ट content JSX में string literals हैं। Dynamic elements (computed classNames, conditional rendering, expressions) के लिए, editor स्वचालित रूप से एक structured prompt के साथ AI chat पर fall back करता है।

मुझे Visual Editor कब उपयोग करना चाहिए?

Visual Editor छोटे, तेज़ tweaks के लिए सबसे अच्छा है:

• कोई typo ठीक करना
• Spacing adjust करना
• कोई रंग बदलना
• Button टेक्स्ट update करना

बड़े बदलावों (नए sections, layout restructures, नए features) के लिए, इसके बजाय AI chat का उपयोग करो।

मैं बदलाव कैसे save करूँ?

जब तुम कोई property एडिट करते हो तो बदलाव automatically save हो जाते हैं। फ़ाइल तुम्हारे runtime में लिखी जाती है, और बदलाव अगले builder turn पर तुम्हारे version history में commit हो जाता है।

FAQ

क्या मैं visual edits undo कर सकता/सकती हूँ?

हाँ। Undo करने के लिए Cmd+Z / Ctrl+Z का उपयोग करो। Visual Editor अपना खुद का undo/redo stack maintain करता है।

मैं कुछ एलिमेंट्स एडिट क्यों कर सकता/सकती हूँ लेकिन दूसरों को नहीं?

Static टेक्स्ट और className attributes को सीधे एडिट किया जा सकता है। Dynamic या computed values (template literals, ternary expressions, function calls) स्वचालित रूप से AI chat पर fall back होती हैं।

मुझे AI chat की बजाय Visual Editor कब उपयोग करना चाहिए?

Tool	किसके लिए सबसे अच्छा
Visual Editor	क्लिक करके quick property बदलाव (टेक्स्ट, रंग, spacing)
AI Chat	Complex बदलाव, नए features, debugging

तुम्हारा app बदलने के ये केवल दो तरीके हैं — कोई code editor नहीं है। देखो Editing and Accessing Your Code।