Transform your coding experience with AI-powered code editor *

AI features can literally write & edit code for you

The built-in integration with AI engine allows you to generate, modify and optimize code automatically, find answers and solve coding challenges right within the comfort of your code editor. The AI functions as an intelligent assistant, significantly reducing your workload.

How can AI integration help?

  • Generate small or large code fragments
  • Extend your existing code
  • Avoid manual work
  • Simplify or optimize code
  • Rewrite code in different language, framework or style
  • Use as a documentation or help
  • Use as a problem-solving tool
  • Find possible issues in your code
  • And many more use cases...


See Examples   Download

Give me CSS code that makes this table responsive.
Create a regex that matches valid e-mail addresses.
Rewrite this to use plain JavaScript instead of jQuery.
Convert this table to a div-based structure.
Simplify this code.
Am I allowed to have button tag inside link tag?



AI-integration benefits

  • Access AI with a single click or shortcut
    Code faster. No need to switch between code editor and web browser
  • AI already knows your context
    Skip typing in your programming language and document context
  • AI sees your selected code
    Ask direct questions about the selected code. No need to copy and paste
  • Favorites and prompt history
    Avoid extra typing, build your favorite AI prompt library and re-use them again

Huge performance benefits

  • Effortless coding
    Using AI is like having an expert coder by your side, guiding you through every step.
  • Instant problem-solving
    Stuck on a bug or a tricky piece of logic? Just ask! AI assistant provides possible solutions and explanations.
  • Enhanced productivity
    Avoid boring manual work. Spend less time on routine tasks and more on creativity.
  • Stay ahead of the curve
    Stay at the forefront with the latest tools and technologies.

Easy and affordable

  • Extremely affordable
    Every code editor license includes free credits valid for 100+ prompts. Need more? Get thousands of prompts for just a few dollars or euros.
  • Easy to use
    AI is available right out of the box in every code editor. No need for complex setups or third party plugins.
  • Supports all programming languages
    AI engine is language-independent. It can understand and generate HTML, CSS, JavaScript, PHP, SQL or any other language.

Generate code fragments

You can ask AI to generate a fragment of code for you, e.g.:

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

                        .button {
                            transition: transform 0.3s ease;
                        }

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

The AI knows the language of your currently open document, so you can just ask whatever you need directly. In this case, user is editing 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.

Here is a prompt that genertes a whole web page template:

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>
                

You can quickly produce general knowledge data, such as EU countries list, in the format that you require automatically.

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());
                        }
                    

Modify and upgrade your code

You can use AI to optimize and modify your code, e.g.:

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;
                        }
                    

You can modernize old code, e.g.:

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);
                    

You can use AI to optimize and simplify your code, e.g.:

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);
                        }
                    

Works for PHP as well:

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);
                        }
                    

Get help, ideas and gudance

You can ask AI engine anything, e.g.:

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.

You can ask for general guidance about your code:

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.

You ask AI to explain code and what it does, e.g.:

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.

You can also ask about server configuration and web administration.

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.


Avoid repetitive manual work

You can use AI just to avoid annoying and time-consuming manual work.

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>
                    

Re-structuring HTML code is easy with AI.

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>
                    

* Notice regarding experimental technology and usage costs

While AI is a powerful tool, it sometimes can make mistakes just like human beings. Often AI will produce slightly different (but correct) answers for the same question. The currently used AI engine is ChatGPT by OpenAI. Version 4.0 is slower, but produces slightly better results and less errors in complex situations, while version 3.5 is faster and more cost-efficient. Our code editors support both versions and you can choose which one to use. Editors come with plenty of free credits for most applications, but for more extensive usage you can get extra credits.

Free Download

Download HTMLPad

Purchase Now

One-time fee of just $49.95