Web Editor Pro

<div class="container">
  <h1>Welcome to Web Editor Pro</h1>
  <p>Edit the code to see changes immediately.</p>
  <button onclick="sayHello()">Click Me</button>
</div>

body { 
    font-family: 'Inter', sans-serif; 
    text-align: center; 
    margin-top: 50px; 
    background: #0d1117;
    color: #e6edf3;
}
h1 { color: #58a6ff; font-size: 3rem; margin-bottom: 10px; }
p { color: #8b949e; font-size: 1.2rem; }
button { padding: 10px 20px; background: #238636; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; margin-top: 20px; transition: 0.2s; }
button:hover { background: #2ea043; }
.container { padding: 40px; border: 1px solid #30363d; border-radius: 10px; background: #161b22; display: inline-block; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }

console.log("Welcome to the integrated console!");
function sayHello() {
    console.info("Button clicked! Greetings from the iframe.");
    alert("Hello World! Editor is working properly.");
}

{
  "project": "Webitor Pro",
  "version": "1.2.0",
  "features": [
    "HTML/CSS/JS Editor",
    "Live Preview",
    "JSON Viewer",
    "Console Integration"
  ],
  "settings": {
    "theme": "dark",
    "fontSize": 15
  }
}

Live Preview

Console window

>

🔑 API Key Information

To use external services (Maps, Weather, etc.), you need an API Key. Store it in a variable in your JS tab. Never share your keys publicly!

📱 How to Convert to APK (Android Studio)

Export your project as a ZIP from this editor.
Open Android Studio and create a new "Empty Activity" project.
Add a WebView to your activity_main.xml.
Create an assets folder in src/main/ and paste your project files there.
In MainActivity.java, load the file:
webView.loadUrl("file:///android_asset/index.html");
Go to Build > Build APK(s) to generate your mobile app!

💡 Pro Tips

Use Inspect Element to find exactly where your code is in the editor.
Hover over colors in the editor to see a quick preview bubble.
Resize the Console window by dragging the handle above it.
Use the Mobile App button to start with a professional, responsive template.

❓ FAQ (Frequently Asked Questions)

Q: How do I run my code?
A: Code runs automatically as you type, or you can click the Run button manually.

Q: How do I add images?
A: Use the Import button to upload images, or use online URLs in your <img> tags.

Q: Can I save my project?
A: Yes! Use Save ZIP to download all your files for later use.

🔑 API की (Key) जानकारी

बाहरी सेवाओं (Maps, Weather आदि) का उपयोग करने के लिए, आपको एक API की आवश्यकता होती है। इसे अपने JS टैब में एक वेरिएबल में रखें। अपनी की (Keys) को कभी भी सार्वजनिक रूप से साझा न करें!

📱 APK में कैसे बदलें (Android Studio)

इस एडिटर से अपने प्रोजेक्ट को ZIP के रूप में डाउनलोड करें।
Android Studio खोलें और एक नया "Empty Activity" प्रोजेक्ट बनाएं।
अपने activity_main.xml में WebView जोड़ें।
src/main/ में एक assets फ़ोल्डर बनाएं और अपनी प्रोजेक्ट फाइलें वहां पेस्ट करें।
MainActivity.java में, फाइल लोड करें:
webView.loadUrl("file:///android_asset/index.html");
अपनी मोबाइल ऐप बनाने के लिए Build > Build APK(s) पर जाएं!

💡 प्रो टिप्स (Tips)

एडिटर में आपका कोड बिल्कुल कहां है, यह जानने के लिए Inspect Element का उपयोग करें।
कलर कोड पर माउस ले जाकर उसका तुरंत प्रीव्यू देखें।
कंसोल विंडो के ऊपर के हैंडल को खींचकर उसका आकार बदलें।
प्रोफेशनल और रिस्पॉन्सिव टेम्पलेट के लिए Mobile App बटन का उपयोग करें।

❓ अक्सर पूछे जाने वाले प्रश्न (FAQ)

प्रश्न: मैं अपना कोड कैसे रन करूं?
उत्तर: टाइप करते समय कोड अपने आप रन होता है, या आप Run बटन पर क्लिक कर सकते हैं।

प्रश्न: मैं इमेज कैसे जोड़ूं?
उत्तर: इमेज अपलोड करने के लिए Import बटन का उपयोग करें, या <img> टैग में ऑनलाइन URL का उपयोग करें।

प्रश्न: क्या मैं अपना प्रोजेक्ट सेव कर सकता हूं?
उत्तर: हाँ! बाद में उपयोग के लिए अपनी सभी फाइलों को डाउनलोड करने के लिए Save ZIP का उपयोग करें।

Element Properties

Edit Text Content

Font Family

Size 16px

Color

Background

No Background

Text Shadow

Contrast

Brightness

Hue

Blur (Sharpness)

Frames

None

Rounded

Circle

Border

Shadow

Artistic

Polaroid

Neon

Opacity

Border Radius

Margin