Title: codeSelector.
Author: marketincode
Published: <strong>12 de noviembre de 2026</strong>
Last modified: 12 de noviembre de 2026

---

Buscar plugins

![](https://ps.w.org/codeselector/assets/banner-772x250.png?rev=3797626)

![](https://ps.w.org/codeselector/assets/icon.svg?rev=3797626)

# codeSelector.

 Por [marketincode](https://profiles.wordpress.org/marketincode/)

[Descargar](https://downloads.wordpress.org/plugin/codeselector.1.4.2.zip)

 * [Detalles](https://es-mx.wordpress.org/plugins/codeselector/#description)
 * [Opiniones](https://es-mx.wordpress.org/plugins/codeselector/#reviews)
 *  [Instalación](https://es-mx.wordpress.org/plugins/codeselector/#installation)
 * [Desarrollo](https://es-mx.wordpress.org/plugins/codeselector/#developers)

 [Soporte](https://wordpress.org/support/plugin/codeselector/)

## Descripción

**Generating UI components with AI takes 30 seconds. Editing them inside Elementor
used to take 30 minutes.**

When you generate a hero section, pricing table, or bento grid in **ChatGPT, Claude,
v0, Bolt, Lovable, or Cursor**, pasting 1,500 lines of raw HTML and CSS into a standard
custom HTML widget creates a maintenance nightmare. Finding a single heading to 
fix a typo or swapping an image URL requires endless `Ctrl+F` scrolling—and generic
AI CSS classes (`h1`, `button`, `.card`, `.container`) often break your WordPress
theme layout.

**codeSelector.** by [Marketincode](https://marketincode.com/codeselector/) solves
this forever. It is the missing **bidirectional Visual-to-Code Bridge** built specifically
for Elementor designers, developers, and AI builders.

### How It Works in 3 Simple Steps

 1. **Paste Your AI Code:** Drag the **codeSelector.** widget onto any Elementor page
    and paste your HTML/CSS snippet.
 2. **1-Click Visual-to-Code Jump:** Click any element on the visual canvas—a badge,
    button, paragraph, or card—and the Ace code editor jumps in `< 5 ms` to its exact
    HTML line, highlighting the block. You can also **double-click any line in the 
    code editor** to scroll the visual preview straight to that element.
 3. **Double-Click Live Inline Editing:** Double-click any text or image directly on
    the Elementor preview canvas to rewrite copy in place or select a new photo from
    the WordPress Media Library. Your changes are automatically encoded and synced 
    back into the exact line of HTML code.

### Free Features (Included in WordPress.org Edition)

 * **Bidirectional Visual ⟷ Code Sync:** Click any visual element to highlight its
   exact HTML line in Ace Editor, or double-click a code line to locate it visually
   on the canvas.
 * **Live Inline Text Editing (2x Click):** Double-click headings, paragraphs, buttons,
   list items, or badges to edit text directly on screen with exact character caret
   placement (`caretRangeFromPoint`) and multiline preservation.
 * **1-Click & 2x-Click Image Replacement:** Click any `<img>` on canvas to open
   the floating Image Inspector. Pick a replacement photo directly from the **WordPress
   Media Library**, paste a custom URL, and edit SEO `alt` text with instant code
   synchronization.
 * **Enhanced Ace Code Editor:** Syntax-highlighted editor with active line pills,
   automatic scrolling, and real-time preview rendering.
 * **0 KB Frontend Overhead:** All bridge scripts and editor styles load **exclusively
   inside the Elementor editor**. Your public website visitors receive pure, clean
   HTML/CSS with zero extra JavaScript or performance penalty on Core Web Vitals.
 * **Hardened Native Security (`wp_kses`):** Custom extended whitelist supporting
   modern HTML5 semantics, SVG icons, Flexbox, CSS Grid, CSS custom properties (`--
   var`), `clamp()`, and `calc()` while stripping unauthorized scripts, iframes,
   and XSS event handlers.
 * **Multilingual Ready (i18n):** Fully localized interface available in English,
   Spanish (`es_ES`, `es_MX`), French (`fr_FR`), German (`de_DE`), Brazilian Portuguese(`
   pt_BR`), and Italian (`it_IT`).

### Pro Features (For Agencies, Freelancers & Power Users)

Unlock the full professional workflow with [codeSelector. Pro](https://marketincode.com/codeselector/):

 * **Recursive CSS Auto-Scoping:** Automatically prefixes all `<style>` rules under
   the unique widget container (`[data-codeselector-id]`), intelligently handling`:
   root`, `body`, `html`, nested `@media` queries, `@supports`, and preserving `@
   keyframes` names. Generic AI styles never bleed into your header, footer, or 
   other Elementor sections.
 * **Alt + Click Direct CSS Rule Jump:** Hold `Alt` and click any element on the
   canvas to jump directly to the CSS selector that styles it inside your `<style
   >` block.
 * **Ctrl / Cmd + Click JavaScript Jump:** Hold `Ctrl` (or `Cmd` on Mac) and click
   an interactive element to jump straight to its event listener or animation logic
   inside `<script>`.
 * **Safe Inline `<script>` Execution:** Enable interactive JavaScript for custom
   sliders, tabs, accordions, countdowns, and micro-animations (strictly validated
   against the content author’s `unfiltered_html` capability while blocking external`
   src` scripts).
 * **Carousel & Gallery Slide Inspector:** Automatically detects multi-slide carousels
   and image grids, allowing you to switch between hidden slides and replace individual
   slide images from a unified thumbnail strip.
 * **Live Link (`href`) Editing:** When editing a link or button inline, a floating`
   href` input appears so you can update destination URLs or anchor tags on the 
   fly.
 * **Quick Section Navigator:** A smart dropdown in the Elementor panel that indexes
   your `<style>` blocks, HTML comments (`<!-- 01. Hero -->`), `<h1>`/`<h2>` headings,
   and `<script>` sections for 1-click navigation in large files.

Learn more and see the interactive live demo at [marketincode.com/codeselector](https://marketincode.com/codeselector/).

## Instalación

 1. In your WordPress admin dashboard, go to **Plugins > Add New** and search for **
    codeSelector**, or upload the `codeselector.zip` file via **Upload Plugin**.
 2. Click **Install Now** and then **Activate**.
 3. Open any page or template with **Elementor** (compatible with Elementor Free 3.5
    + and Elementor Pro 4.x).
 4. In the Elementor widgets panel, find **codeSelector.** under the **Marketincode**
    category (or search for `codeSelector` / `AI`) and drag it onto your canvas.
 5. Click any element in the starter template to test the 1-Click HTML Jump, or double-
    click any heading to edit text live!

## Preguntas frecuentes

### Does codeSelector. require Elementor Pro?

No! **codeSelector.** works seamlessly with the free version of Elementor (version
3.5.0 and above) as well as Elementor Pro.

### Will this plugin slow down my website or affect Core Web Vitals?

Not at all. The visual-to-code bridge, inline editor, and synchronization scripts
are only enqueued inside the Elementor editor screen. On the public frontend, **
codeSelector. adds 0 KB of JavaScript and 0 extra HTTP requests**, rendering only
your sanitized HTML and CSS.

### Can I use code generated by ChatGPT, Claude, v0, Bolt, or Lovable?

Yes! That is the exact use case **codeSelector.** was built for. You can paste complete
HTML + `<style>` components generated by any AI assistant and immediately edit text,
swap images, and inspect lines visually.

### How does CSS Auto-Scoping work in Pro?

AI tools frequently output generic selectors like `body`, `section`, `.container`,
or `.btn` that accidentally override your WordPress theme styles. In **codeSelector.
Pro**, our recursive CSS parser automatically scopes every rule to `[data-codeselector-
id="..."]`—even inside `@media` queries—while remapping `body`/`html`/:root variables
to the widget wrapper.

### Is it safe against XSS and malicious code?

Yes. All output passes through `CodeSelector_Sanitizer::sanitize()`, built on WordPress’s
native `wp_kses()` engine. Inline `on*` event attributes (`onclick`, `onerror`),`
<iframe/object/embed>` tags, and external `<script src="...">` tags are strictly
stripped. In the Pro version, inline `<script>` blocks only execute if the post 
author and last editor hold the WordPress `unfiltered_html` capability.

### Which languages are supported?

**codeSelector.** is fully internationalized (`i18n`) with English as the base language
and ships with complete translations for **Spanish** (`es_ES`, `es_MX`), **French**(`
fr_FR`), **German** (`de_DE`), **Portuguese** (`pt_BR`), and **Italian** (`it_IT`).

### What happens if I deactivate Pro or downgrade to Free?

Your HTML and CSS content remains safely stored in your Elementor page. Pro-only
features (such as automatic CSS scoping, inline `<script>` execution, and `Alt+Click`
CSS jumping) simply deactivate gracefully without deleting your code.

### Do you offer a refund guarantee on the Pro version?

Yes. Every **codeSelector. Pro** license (Monthly, Annual, or Lifetime) is backed
by a **14-day 100% money-back guarantee** processed securely through Freemius.

## Reseñas

No hay reseñas para este plugin.

## Colaboradores y desarrolladores

Este software es de código abierto. Las siguientes personas han contribuido a este
plugin.

Colaboradores

 *   [ marketincode ](https://profiles.wordpress.org/marketincode/)

“codeSelector.” ha sido traducido a 1 idioma local. Gracias a [los traductores](https://translate.wordpress.org/projects/wp-plugins/codeselector/contributors)
por sus contribuciones.

[Traduce “codeSelector.” a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/codeselector)

### ¿Interesado en el desarrollo?

[Revisa el código](https://plugins.trac.wordpress.org/browser/codeselector/), echa
un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/codeselector/)
o suscríbete al [registro de desarrollo](https://plugins.trac.wordpress.org/log/codeselector/)
por [RSS](https://plugins.trac.wordpress.org/log/codeselector/?limit=100&mode=stop_on_copy&format=rss).

## Registro de cambios

#### 1.4.2

 * Added full internationalization (i18n) across PHP and JavaScript editor bridge(`
   codeselector` text domain).
 * Added bundled translations for Spanish (`es_ES`, `es_MX`), French (`fr_FR`), 
   German (`de_DE`), Brazilian Portuguese (`pt_BR`), and Italian (`it_IT`).
 * Added master `languages/codeselector.pot` translation template.
 * Replaced external offloaded placeholder URLs with bundled local SVG assets for
   WordPress.org compliance.
 * Verified compatibility with WordPress 7.1 and Elementor 4.x.
 * Removed trialware features and ensured 100% compliance with WordPress.org Guideline
   5.
 * Migrated starter code templates to static assets and enqueued styles via native
   WordPress APIs.

#### 1.4.1

 * Resolved WordPress.org header URI guidelines.
 * Integrated Freemius SDK for seamless Free/Pro licensing.

#### 1.4.0

 * Initial public release of codeSelector. Visual-to-Code Bridge for Elementor.

## Meta

 *  Versión **1.4.2**
 *  Última actualización **hace 3 días**
 *  Instalaciones activas **Menos de 10**
 *  Versión de WordPress ** 6.0 o superior **
 *  Probado hasta **7.1.4**
 *  Versión de PHP ** 7.4 o superior **
 *  Idiomas
 * [English (US)](https://wordpress.org/plugins/codeselector/) y .[Spanish (Mexico)](https://es-mx.wordpress.org/plugins/codeselector/).
 *  [Traducir a tu idioma](https://translate.wordpress.org/projects/wp-plugins/codeselector)
 * Etiquetas:
 * [AI](https://es-mx.wordpress.org/plugins/tags/ai/)[ChatGPT](https://es-mx.wordpress.org/plugins/tags/chatgpt/)
   [code editor](https://es-mx.wordpress.org/plugins/tags/code-editor/)[custom html](https://es-mx.wordpress.org/plugins/tags/custom-html/)
   [elementor](https://es-mx.wordpress.org/plugins/tags/elementor/)
 *  [Vista avanzada](https://es-mx.wordpress.org/plugins/codeselector/advanced/)

## Valoraciones

Aún no se han enviado valoraciones.

[Tu valoración](https://wordpress.org/support/plugin/codeselector/reviews/#new-post)

[Ver todas las reseñas](https://wordpress.org/support/plugin/codeselector/reviews/)

## Colaboradores

 *   [ marketincode ](https://profiles.wordpress.org/marketincode/)

## Soporte

¿Tienes algo que decir? ¿Necesitas ayuda?

 [Ver el foro de soporte](https://wordpress.org/support/plugin/codeselector/)

## Donar

¿Te gustaría apoyar el progreso de este plugin?

 [ Dona a este plugin ](https://marketincode.com/codeselector/)