FAQs

Troubleshooting

Why isn’t the Identifier field updating when I select elements?

If the Identifier field in the ai2svelte panel doesn’t change when you select different elements in your Illustrator document, the issue is likely with the AiHostAdapter plugin installation.

Solution: Verify that you’ve correctly installed the AiHostAdapter.aip file in the proper location. Check our Auto-detect selectors guide for detailed installation instructions and troubleshooting steps.

Why does the Identifier only show the parent layer instead of child elements?

This is a limitation of how Illustrator handles single-element layers. When a layer contains only one element, Illustrator treats the element and its parent layer as the same object.

Solution: To correctly identify child elements, ensure you have more than one element within the layer. Illustrator can’t distinguish between a single element and its parent layer. Always rename the elements that you want to stylise to identify them correctly.

How to export artboard wider than breakpoint?

With the conventional approach, ai2svelte exports artboards based on their defined dimensions in Illustrator.

Solution: To export artboards wider than the breakpoint, you can use artboard tags to specify custom breakpoint width. For example, you can have your artboard with a width of 2000px but tag it with :1200 to set it’s visibility breakpoint at 1200px. Make sure to use allow_overflow: true and include_resizer_css: false in your ai2svelte settings to prevent clipping and to rely on svelte screen bindings (instead of container queries).

Why does the backdrop capture feature not work on my system?

The backdrop capture feature is currently only supported on macOS due to the specific APIs it utilizes for screen capturing.

Solution: However, you’ll need to grant the necessary permissions for the plugin to access screen recording features. On macOS, this typically involves going to System Preferences > Privacy & Security > Screen & System Audio Recording, and ensuring that Adobe Illustrator is toggled on.

Which platforms are supported?

Although ai2svelte is supported on both Windows and macOS, it is not tested yet on Windows. We welcome contributions from the community to help test and improve Windows compatibility.

Layer organization

Why can’t I style elements in non-tagged layers?

ai2svelte only exports and makes available elements that are within tagged layers. Elements in non-tagged layers are treated as background content and aren’t individually accessible for styling.

Solution: Move any elements you want to style into a properly tagged layer:

• :svg for vector graphics that need to scale and be styled with CSS
• :png or :png24 for raster images and complex graphics that should remain as images

This tagging system ensures optimal performance and gives you precise control over which elements can be customized.

Do I need separate tagged layers for each artboard?

No! ai2svelte is smart enough to handle multiple artboards within a single tagged layer, which can significantly simplify your workflow.

Best practices:

• Use one tagged layer that spans across all artboards you want to export
• Organize elements logically within the layer structure for easier identification
• This approach reduces complexity while maintaining full styling control

Performance optimization

How can I optimize loading speed for above-the-fold hero graphics?

For critical graphics that users see immediately (like hero images), you can prioritize their loading to improve perceived performance.

Solution: Add priority_fetch: true to your ai2svelte configuration:

// ... other settings
priority_fetch: true

⚠️ Important: Only use priority_fetch for truly critical, above-the-fold content. Overusing this setting can actually slow down your overall page performance by competing for bandwidth with other essential resources.

Best for: Hero images, key visual elements, essential UI components visible on initial page load.