Back to Plugins
AutoHTML | Components to Code

AutoHTML | Components to Code

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

svelteautohtmlcsshtmltailwindvueauto htmlreactdevelopercodefrontendcomponentscode-generators

Plugin Preview

AutoHTML | Components to Code preview

About this plugin

New: Styled Components!


Export React, Vue, Svelte, Angular or HTML with Tailwind or CSS Styling.


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:

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


Advanced Tipps for React/Vue/Svelte/Angular:

  1. Boolean, text and instance swap component properties will be exported if you select a component.
  2. Enable the "Nested Components" option in the settings to create components from all instances within your current selection.
  3. Variants can be exported as well.
  4. Receive a Zip folder containing all component files and a package.json.
  5. 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.

Plugin Details

Version87
CreatedFebruary 20, 2022
Last UpdatedJune 23, 2025
CategorySoftware development
CreatorThomas Deser
Stats16865 installs, 830 likes
PricingPaid

Technical Details

  • 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)