AutoHTML | Components to Code

React, Vue, Svelte, Angular, Tailwind, HTML & CSS Converter

svelteautohtmlcsshtmltailwindvueauto htmlreactdevelopercodefrontendcomponentscode-generators

Plugin Preview

New: Styled Components!

Works in Dev Mode & Design Mode. No registration required - simply run the plugin and select a frame!

Check out the Demo File.

Have any questions?

Join Slack for support, questions or feedback.

Report Issues and Bugs here.

Tipps:

Use Auto layout and constraints.
Color styles, text styles, and effect styles will be transferred as CSS variables or Tailwind config.
The CSS classes are named after the layers in Figma.
To maximize the plugin's potential, avoid using groups and keep the layers as simple as possible.

Advanced Tipps for React/Vue/Svelte/Angular:

Boolean, text and instance swap component properties will be exported if you select a component.
Enable the "Nested Components" option in the settings to create components from all instances within your current selection.
Variants can be exported as well.
Receive a Zip folder containing all component files and a package.json.
Install the dependencies (Node.js required) using npm i and start coding.

Please note: The generated code is not production-ready but serves as a starting point for developers.

API:1.0.0
UI:dist/ui.html
main:dist/plugin.js
Network Access:
My Plugin needs access to the network to be able to render tailwind in the html preview
Editor Types:
dev
Allowed Domains:
- *
Codegen Languages:
- Angular(angular)
- HTML(html)
- React(react)
- Svelte(svelte)
- Vue(vue)