Verändern Sie Ihr Codierungserlebnis mit dem KI-gesteuerten Code-Editor *

Die KI-Funktionen können buchstäblich Code für Sie schreiben und bearbeiten.

Die eingebaute Integration mit der KI-Engine ermöglicht es Ihnen, Code automatisch zu generieren, zu modifizieren und zu optimieren, direkt in Ihrem Code-Editor Antworten zu finden und Codierungsprobleme zu lösen. Die KI fungiert als intelligenter Assistent, der Ihre Arbeitslast erheblich reduziert.

Wie kann die KI-Integration helfen?

  • Generieren Sie kleine oder große Codefragmente.
  • Erweitern Sie Ihren vorhandenen Code.
  • Vermeiden Sie manuelle Arbeit.
  • Vereinfachen oder Optimieren Sie den Code.
  • Schreiben Sie den Code in einer anderen Sprache, einem anderen Rahmen oder Stil um.
  • Nutzung als Dokumentation oder Hilfe
  • Nutzung als Problemlösungsinstrument
  • Finden Sie mögliche Probleme in Ihrem Code.
  • Und viele weitere Anwendungsfälle...


Beispiele ansehen   Herunterladen

Geben Sie mir CSS-Code, der diese Tabelle reaktionsfähig macht.
Erstellen Sie eine Regex, die mit gültigen E-Mail-Adressen übereinstimmt.
Schreiben Sie dies um, um einfaches JavaScript anstelle von jQuery zu nutzen.
Konvertieren Sie diese Tabelle in eine div-basierte Struktur.
Vereinfachen Sie diesen Code.
Darf ich einen Button-Tag innerhalb eines Link-Tags haben?



Vorteile der KI-Integration

  • KI-Zugriff mit einem einzigen Klick oder einer Tastenkombination
    Schneller kodieren. Sie müssen nicht zwischen Code-Editor und Webbrowser wechseln.
  • Die KI kennt bereits Ihren Kontext.
    Überspringen Sie das Eintippen Ihrer Programmiersprache und dokumentieren Sie den Kontext.
  • Die KI sieht Ihren ausgewählten Code.
    Stellen Sie direkte Fragen zum ausgewählten Code. Kopieren und Einfügen unnötig.
  • Favoriten und Prompt-Verlauf
    Vermeiden Sie zusätzliches Tippen, erstellen Sie Ihre bevorzugte KI-Prompt-Bibliothek und nutzen Sie sie wieder.

Enorme Leistungsvorteile

  • Müheloses Kodieren
    Die Nutzung von KI ist so, als hätten Sie einen erfahrenen Programmierer an Ihrer Seite, der Sie durch jeden Schritt führt.
  • Sofortige Problemlösung
    Stecken Sie bei einem Fehler oder einer kniffligen logischen Aufgabe fest? Fragen Sie einfach! Der KI-Assistent liefert mögliche Lösungen und Erklärungen.
  • Erhöhte Produktivität
    Vermeiden Sie langweilige manuelle Arbeit. Verbringen Sie weniger Zeit mit Routineaufgaben und mehr mit Kreativität.
  • Immer einen Schritt voraus
    Bleiben Sie mit den neuesten Werkzeugen und Technologien an der Spitze.

Einfach und kostengünstig

  • Extrem günstig
    Jede Code-Editor-Lizenz enthält kostenlose Credits, die für bis zu 300 Prompts gültig sind. Sie brauchen mehr? Holen Sie sich Tausende von Prompts für nur ein paar Dollar oder Euro.
  • Einfach zu benutzen
    Die KI ist in jedem Code-Editor sofort verfügbar. Komplexe Einrichtungen oder Plugins von Drittanbietern sind nicht erforderlich.
  • Unterstützt alle Programmiersprachen
    Die KI-Engine ist sprachunabhängig. Sie versteht und generiert HTML, CSS, JavaScript, PHP, SQL oder jede andere Sprache.

Codefragmente generieren

Sie können die KI bitten, ein Codefragment für Sie zu generieren, z. B.:

Write CSS code that smoothly enlarges .button elements upon hover.

                        .button {
                            transition: transform 0.3s ease;
                        }

                        .button:hover {
                            transform: scale(1.1);
                        }
                    

Die KI kennt die Sprache des aktuell geöffneten Dokuments, so dass Sie einfach direkt fragen können, was Sie brauchen. In diesem Fall bearbeitet der Benutzer PHP-Code.

Write a function that returns client IP address, it must work also if Cloudflare or other proxy is in use.

                        function getClientIPAddress() {
                            $ipKeys = [
                                'HTTP_CF_CONNECTING_IP', // For Cloudflare
                                'HTTP_CLIENT_IP',
                                'HTTP_X_FORWARDED_FOR',
                                'HTTP_X_FORWARDED',
                                'HTTP_X_CLUSTER_CLIENT_IP',
                                'HTTP_FORWARDED_FOR',
                                'HTTP_FORWARDED',
                                'REMOTE_ADDR'
                            ];

                            foreach ($ipKeys as $key) {
                                if (array_key_exists($key, $_SERVER) === true) {
                                    foreach (explode(',', $_SERVER[$key]) as $ip) {
                                        $ip = trim($ip); // just to be safe

                                        if (filter_var($ip, FILTER_VALIDATE_IP, FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE) !== false) {
                                            return $ip;
                                        }
                                    }
                                }
                            }

                            return 'UNKNOWN';
                        }
                    

This function checks for various server variables that may contain the client IP address. It gives precedence to HTTP_CF_CONNECTING_IP, which is the header set by Cloudflare to pass the original client IP. It then checks other common headers used by proxies and load balancers. If none of these headers contain a valid IP, it falls back to REMOTE_ADDR, which is the IP address from where the request was directly made to the server.

Hier ist eine Abfrage, die eine ganze Webseitenvorlage generiert:

Give me some boilerplate HTML for a cosmetics company landing page.

                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Beauty Cosmetics</title>
                            <link rel="stylesheet" href="styles.css">
                            <script src="script.js" defer></script>
                        </head>
                        <body>
                            <header>
                                <nav>
                                    <div class="logo">
                                        <h1>Beauty Cosmetics</h1>
                                    </div>
                                    <ul class="nav-links">
                                        <li><a href="#products">Products</a></li>
                                        <li><a href="#about">About Us</a></li>
                                        <li><a href="#contact">Contact</a></li>
                                    </ul>
                                </nav>
                            </header>

                            <main>
                                <section id="hero">
                                    <h2>Enhance Your Natural Beauty</h2>
                                    <p>Discover our range of high-quality cosmetics.</p>
                                    <a href="#products" class="btn">Shop Now</a>
                                </section>

                                <section id="products">
                                    <h2>Our Products</h2>
                                    <div class="product-list">
                                        <!-- Product items will be inserted here -->
                                    </div>
                                </section>

                                <section id="about">
                                    <h2>About Us</h2>
                                    <p>Welcome to Beauty Cosmetics. We believe in beauty with a conscience. We have been providing high-quality cosmetic products for over a decade, committed to sustainability and natural ingredients.</p>
                                </section>

                                <section id="contact">
                                    <h2>Contact Us</h2>
                                    <form>
                                        <input type="text" placeholder="Your Name" required>
                                        <input type="email" placeholder="Your Email" required>
                                        <textarea placeholder="Your Message" required></textarea>
                                        <button type="submit">Send Message</button>
                                    </form>
                                </section>
                            </main>

                            <footer>
                                <p>&copy; 2023 Beauty Cosmetics</p>
                            </footer>
                        </body>
                        </html>
                

Sie können schnell allgemeine Wissensdaten, wie z. B. eine EU-Länderliste, in dem von Ihnen gewünschten Format automatisch erstellen.

Create function isInEU(country_short_code), case insensitive.

                        function isInEU(country_short_code) {
                            const euCountries = [
                                'AT', 'BE', 'BG', 'CY', 'CZ', 'DE', 'DK', 'EE', 'ES', 'FI',
                                'FR', 'GR', 'HR', 'HU', 'IE', 'IT', 'LT', 'LU', 'LV', 'MT',
                                'NL', 'PL', 'PT', 'RO', 'SE', 'SI', 'SK',
                            ];

                            return euCountries.includes(country_short_code.toUpperCase());
                        }
                    

Ändern und aktualisieren Sie Ihren Code.

Sie können die KI nutzen, um Ihren Code zu optimieren und zu ändern, z. B.:

Modify to not use regex.

                        function isMobileDevice() {
                            if (navigator.userAgent.match(/Android/i) ||
                                navigator.userAgent.match(/webOS/i) ||
                                navigator.userAgent.match(/iPhone/i) ||
                                navigator.userAgent.match(/iPad/i) ||
                                navigator.userAgent.match(/iPod/i) ||
                                navigator.userAgent.match(/IEMobile/i)) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    

                        function isMobileDevice() {
                            var userAgent = navigator.userAgent;
                            var platforms = ['Android', 'webOS', 'iPhone', 'iPad', 'iPod', 'IEMobile'];
                            for (var i = 0; i < platforms.length; i++) {
                                if (userAgent.indexOf(platforms[i]) > -1) {
                                    return true;
                                }
                            }
                            return false;
                        }
                    

Sie können alten Code modernisieren, z. B.:

Refactor selected function to use ES6 arrow functions and make it more concise.

                        function squareNumbers(numbers) {
                            var squaredNumbers = [];
                            for (var i = 0; i < numbers.length; i++) {
                                squaredNumbers.push(numbers[i] * numbers[i]);
                            }
                            return squaredNumbers;
                        }
                    

                        const squareNumbers = numbers => numbers.map(number => number * number);
                    

Sie können die KI nutzen, um Ihren Code zu optimieren und zu vereinfachen, z. B.:

Simplify the selected code.

                        function isMobileDevice() {
                            if (navigator.userAgent.match(/Android/i) ||
                                navigator.userAgent.match(/webOS/i) ||
                                navigator.userAgent.match(/iPhone/i) ||
                                navigator.userAgent.match(/iPad/i) ||
                                navigator.userAgent.match(/iPod/i) ||
                                navigator.userAgent.match(/IEMobile/i)) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    

                        function isMobileDevice() {
                            return /Android|webOS|iPhone|iPad|iPod|IEMobile/i.test(navigator.userAgent);
                        }
                    

Funktioniert auch für PHP:

Simplify the selected function.

                        function capitalizeFirstLetters($strings) {
                            $capitalizedStrings = [];
                            foreach ($strings as $string) {
                                $capitalizedStrings[] = ucfirst($string);
                            }
                            return $capitalizedStrings;
                        }
                    

                        function capitalizeFirstLetters($strings) {
                            return array_map('ucfirst', $strings);
                        }
                    

Holen Sie sich Hilfe, Ideen und Ratschläge.

Sie können die KI-Engine alles fragen, z. B.:

Am I allowed to nest button tag inside a tag?

No, according to the HTML5 specification, you cannot nest a <button> element inside an <a> (anchor) element. Both <button> and <a> are interactive content, and the content model for <a> elements disallows interactive content as descendants. This means that placing a <button> inside an <a> would result in invalid HTML and could lead to unpredictable behavior across different web browsers.

Sie können um allgemeine Hinweise zu Ihrem Code bitten:

Is there a better way to achieve what this function does?

                        function isMobileDevice() {
                            if (navigator.userAgent.match(/Android/i) ||
                                navigator.userAgent.match(/webOS/i) ||
                                navigator.userAgent.match(/iPhone/i) ||
                                navigator.userAgent.match(/iPad/i) ||
                                navigator.userAgent.match(/iPod/i) ||
                                navigator.userAgent.match(/IEMobile/i)) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    

Yes, there is a more concise and modern way to determine if the user is on a mobile device using JavaScript. You can use the navigator.userAgentData API if it's available, or use window.matchMedia to check for a mobile viewport. Here's an example using window.matchMedia:


                        function isMobileDevice() {
                            return window.matchMedia("only screen and (max-width: 760px)").matches;
                        }
                    

This function will return true if the viewport width is 760 pixels or less, which is a common breakpoint for mobile devices. However, keep in mind that viewport width is not a foolproof way to detect mobile devices, especially with the increasing variety of device sizes.

If you want to use the navigator.userAgentData API, which is more modern but not as widely supported, you can do something like this:


                        function isMobileDevice() {
                            if (navigator.userAgentData) {
                                return navigator.userAgentData.mobile;
                            }
                            // Fallback for browsers that do not support navigator.userAgentData
                            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
                        }
                    

This function first checks if navigator.userAgentData is available and uses it to determine if the device is mobile. If not available, it falls back to a regular expression test on the navigator.userAgent string.

Sie bitten die KI, den Code zu erklären und zu erläutern, was er tut, z. B.:

Explain the selected code.
/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/i

This code is a regular expression pattern used to validate email addresses. Here's a breakdown of the pattern:

  • ^ and $: These anchors match the start and end of the string, respectively, ensuring that the entire string conforms to the pattern.
  • [_a-z0-9-]+: This part matches one or more characters that are either an underscore, a lowercase letter, a number, or a hyphen.
  • (\.[_a-z0-9-]+)*: This is a group that matches a period followed by one or more of the allowed characters (_, lowercase letters, numbers, or hyphens). The asterisk * means this group can be repeated zero or more times, allowing for multiple subdomains in the email address.
  • @: This character is a literal match for the at symbol, which is a required part of email addresses.
  • [a-z0-9-]+: After the @ symbol, this matches one or more lowercase letters, numbers, or hyphens, which would be part of the domain name.
  • (\.[a-z0-9-]+)*: Similar to the earlier group, this matches a period followed by one or more allowed characters, and can be repeated, allowing for multiple domain levels (e.g., example.co.uk).
  • (\.[a-z]{2,15}): This group matches a period followed by 2 to 15 lowercase letters, which is intended to match the top-level domain (e.g., .com, .org, .info).
  • The i at the end of the pattern is a flag that makes the regular expression case-insensitive, allowing for uppercase letters in the email address even though they are not explicitly included in the character sets.

This regular expression is a common, albeit not RFC 5322-compliant, way to validate the general format of email addresses. However, it does not account for all valid email address characters and formats, and may not match all valid email addresses defined by the specification.

Sie können auch Fragen zur Serverkonfiguration und Webadministration stellen.

What do I put in .htaccess to redirect all root domain requests to www subdomain?

To redirect all root domain requests to the www subdomain using .htaccess, you can use the following code snippet:


                        RewriteEngine On
                        RewriteCond %{HTTP_HOST} ^yourdomain\.com [NC]
                        RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]
                    

Replace yourdomain.com with your actual domain name. This code checks if the HTTP_HOST is your root domain and then rewrites the request to the same path but with the www subdomain, using a 301 redirect for permanent redirection.


Vermeiden Sie wiederholte manuelle Arbeiten.

Sie können die KI nutzen, um lästige und zeitraubende manuelle Arbeit zu vermeiden.

Order countries by name.

                        <select>
                            <option value="DE">Germany</option>
                            <option value="FR">France</option>
                            <option value="HR">Croatia</option>
                            <option value="LV">Latvia</option>
                            <option value="GR">Greece</option>
                            <option value="LT">Lithuania</option>
                            <option value="AT">Austria</option>
                            <option value="EE">Estonia</option>
                            <option value="IE">Ireland</option>
                            <option value="PL">Poland</option>
                            <option value="SK">Slovakia</option>
                            <option value="PT">Portugal</option>
                            <option value="BG">Bulgaria</option>
                            <option value="SI">Slovenia</option>
                            <option value="RO">Romania</option>
                            <option value="LU">Luxembourg</option>
                            <option value="ES">Spain</option>
                            <option value="FI">Finland</option>
                            <option value="BE">Belgium</option>
                            <option value="NL">Netherlands</option>
                            <option value="CZ">Czech Republic</option>
                            <option value="DK">Denmark</option>
                            <option value="CY">Cyprus</option>
                            <option value="MT">Malta</option>
                            <option value="HU">Hungary</option>
                            <option value="SE">Sweden</option>
                            <option value="IT">Italy</option>
                        </select>
                    

                        <select>
                            <option value="AT">Austria</option>
                            <option value="BE">Belgium</option>
                            <option value="BG">Bulgaria</option>
                            <option value="HR">Croatia</option>
                            <option value="CY">Cyprus</option>
                            <option value="CZ">Czech Republic</option>
                            <option value="DK">Denmark</option>
                            <option value="EE">Estonia</option>
                            <option value="FI">Finland</option>
                            <option value="FR">France</option>
                            <option value="DE">Germany</option>
                            <option value="GR">Greece</option>
                            <option value="HU">Hungary</option>
                            <option value="IE">Ireland</option>
                            <option value="IT">Italy</option>
                            <option value="LV">Latvia</option>
                            <option value="LT">Lithuania</option>
                            <option value="LU">Luxembourg</option>
                            <option value="MT">Malta</option>
                            <option value="NL">Netherlands</option>
                            <option value="PL">Poland</option>
                            <option value="PT">Portugal</option>
                            <option value="RO">Romania</option>
                            <option value="SK">Slovakia</option>
                            <option value="SI">Slovenia</option>
                            <option value="ES">Spain</option>
                            <option value="SE">Sweden</option>
                        </select>
                    

Die Umstrukturierung von HTML-Code ist mit der KI einfach.

Wrap each menu caption in <span class="menuitem">.

                        <ul class="menu">
                            <li><a href="/" class="selected">Home</a></li>
                            <li><a href="/create-online-store/">E-commerce</a></li>
                            <li><a href="/examples/">Examples</a></li>
                            <li><a href="/pricing/">Plans</a></li>
                            <li><a href="/support/">Support</a></li>
                            <li><a href="/blog/">Blog</a></li>
                        </ul>
                       

                        <ul class="menu">
                            <li><a href="/" class="selected"><span class="menuitem">Home</span></a></li>
                            <li><a href="/create-online-store/"><span class="menuitem">E-commerce</span></a></li>
                            <li><a href="/examples/"><span class="menuitem">Examples</span></a></li>
                            <li><a href="/pricing/"><span class="menuitem">Plans</span></a></li>
                            <li><a href="/support/"><span class="menuitem">Support</span></a></li>
                            <li><a href="/blog/"><span class="menuitem">Blog</span></a></li>
                        </ul>
                    

* Hinweis auf experimentelle Technologie und Nutzungskosten

Die KI ist zwar ein leistungsfähiges Werkzeug, kann aber manchmal auch Fehler machen, genau wie der Mensch. Häufig gibt die KI leicht unterschiedliche (aber richtige) Antworten auf dieselbe Frage. Die derzeit genutzte KI-Engine ist ChatGPT von OpenAI. Die Version 4.0 ist langsamer, liefert aber etwas bessere Ergebnisse und weniger Fehler in komplexen Situationen, während die Version 3.5 schneller und kostengünstiger ist. Unsere Code-Editoren unterstützen beide Versionen und Sie können wählen, welche Sie nutzen möchten. Die Editoren werden mit reichlich kostenlosen Credits für die meisten Anwendungen geliefert, aber für eine umfangreichere Nutzung können Sie zusätzliche Credits erhalten.

Kostenlos herunterladen

Rapid CSS editor herunterladen

Jetzt kaufen

Von nur $49.95