Visual Editor

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

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

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

toolbar में Visual mode पर switch करें (Preview, Code, और Dashboard के साथ)
preview में elements पर hover करें — वे एक overlay के साथ highlight होते हैं
किसी element को select करने के लिए उस पर क्लिक करें
sidebar panel में properties एडिट करें: टेक्स्ट, रंग, स्पेसिंग, फ़ॉन्ट, borders, images, effects

बदलाव preview में तुरंत apply होते हैं और आपकी source files में लिखे जाते हैं। किसी property के पिछले बदलाव को वापस करने के लिए 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 color
Background color — कोई भी Tailwind color
Spacing — सभी sides पर Padding और margin
Border — Width, color, और radius (टेक्स्ट content के बिना container elements पर उपलब्ध)
Image — stock photo search से बदलें या अपनी खुद की image upload करें (img elements और background images पर apply होता है)
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 color और CSS custom property को सामने लाता है। जब आप selected element के लिए color picker खोलते हैं, तो आप hex codes का अंदाज़ा लगाने के बजाय अपने मौजूदा design system के साथ consistent रहने के लिए इस page palette से pick कर सकते हैं।

किसी selected element के बारे में AI से पूछें

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

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 छोटे, तेज़ बदलावों के लिए सबसे अच्छा है:

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

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

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

जब आप कोई property एडिट करते हैं तो बदलाव अपने आप save हो जाते हैं। फ़ाइल आपके runtime में लिखी जाती है और AI या आप commit create करने पर committed हो जाती है।

FAQ

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

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

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

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

Visual Editor और Code Editor में क्या अंतर है?

Tool	सबसे अच्छा किसके लिए
Visual Editor	क्लिक करके त्वरित property बदलाव (टेक्स्ट, रंग, स्पेसिंग)
Code Editor	VS Code के साथ पूरा source code editing
AI Chat	जटिल बदलाव, नए features, debugging