FAQ

Can I convert components used within my selection?

Yes, you can configure this in the settings under "Nested Components." Enabling this option will convert all components inside your selection.

Does AutoHTML generate functional code?

Yes, it does. The code generated within the Plugin Panel or Window is functional. You can verify this through the preview, which displays the generated HTML code.

Why is my converted design looking different after copying the code it into my project?

Sometimes browser default stylings can be a reason for that: To have a consistent appearance of the different html tags a basic and minimal css reset is included in the preview. If you do not have your own solution to reset browser default stylings you can add the following snippet to your project. But keep in mind that this may not be sufficient for a larger project.

a, button, input, select, h1, h2, h3, h4, h5, * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    appearance: none;
    background: none;
 
    -webkit-font-smoothing: antialiased;
}

Why does my design appear distorted (inside preview)?

While AutoHTML strives to match designs accurately, it may produce incorrect results, particularly when applying transforms like rotations to nested elements. Additionally, some CSS properties are not yet supported. If you encounter such issues, consider raising a GitHub issue (opens in a new tab) or discussing them on Slack. CSS style conflicts may also cause design discrepancies with default CSS settings.

Does the plugin handle accessibility (A11y)?

No, the plugin does not optimize for accessibility. While it aids in selecting semantically correct HTML tags, additional optimization is usually required. Utilizing libraries like Radix primitives for React can help replace divs with more accessible primitives while preserving styling.