Auto-detect selectors

You can style any Illustrator object with a CSS selector using ai2svelte. Objects with custom names become CSS IDs automatically; default names (like <Rectangle>) need manual styling.

ai2svelte can auto-detect selectors for your elements if you install AiHostAdapter (an Adobe plugin for CEP extensions). AiHostAdapter connects the plugin to Illustrator’s event system, enabling automatic selector detection.

Installing AiHostAdapter

Adobe Github

1. Download the latest version of AiHostAdapter from Adobe’s GitHub repository.
2. Copy the .aip file to your Adobe Illustrator plugins directory.
3. For Windows users, C:\Program Files\Adobe\Adobe Illustrator 2022\Plug-ins\Extensions For MacOS users, /Applications/Adobe Illustrator 2024/Plug-ins.localized/
4. Restart Adobe Illustrator to activate the AiHostAdapter plugin.

Once AiHostAdapter is successfully installed, the ai2svelte plugin will automatically detect selectors for your elements. To verify this functionality, open the CSS tab in the plugin and select any named element in your Illustrator document—the corresponding selector should automatically appear in the Identifier field.