Skip to main content
Unlayer Docs

AI Template Importer

Paid Feature

This feature is only available in paid plans. Learn More

The AI Template Importer turns an existing design into an editable Unlayer template in one click. Bring an HTML email or a screenshot of the page you want to recreate, and the importer rebuilds the layout — rows, columns, text, buttons, images, colors, and links — as a fully editable template, ready to refine in the builder.

It's available in the Unlayer Console, inside any project's Templates area. Partners can also offer it inside the embedded builder as an opt-in action in the AI Assistant.

Included in your AI credits

The AI Template Importer is part of your plan's AI features and uses your existing AI credit allowance — the same pool that powers the AI Assistant and other AI tools. No separate add-on required.

What you can import​

The importer accepts two kinds of input and produces a complete, editable template:

  • HTML email. Bring an existing email — exported from another tool, hand-coded, or pulled from your inbox. The importer reads the layout, preserves your copy, links, fonts, and colors, and quietly skips elements like tracking pixels and "View in browser" links that don't belong in your editable template.
  • Screenshot or image. Have a design in mind but no source HTML? Upload a screenshot of any email or page you'd like to recreate. The importer reads the visual layout and rebuilds it from scratch so you can take it from there.

Once imported, the template behaves like any other — rearrange rows, edit copy, swap images, and adjust styles directly in the builder.

Embedded builder access​

Embedded access is disabled by default. Set features.ai.templateImporter to true when initializing the editor to add Import from HTML or image to the full-template AI Assistant conversation:

Editor version

The embedded action requires an editor release that includes features.ai.templateImporter. An embed pinned to an earlier editor version will ignore this option and will not show the action. Use the latest channel while evaluating the feature, or pin a release published with Template Importer support. This does not affect imports started from the Console.

unlayer.init({
  features: {
    ai: {
      enabled: true,
      assistant: true,
      fullTemplateGeneration: true,
      templateImporter: true,
    },
  },
});

The action also follows the AI Assistant and full-template generation requirements. features.ai.fullTemplateGeneration defaults to true and is shown explicitly above because the importer depends on it. Setting it to false hides the importer even when features.ai.templateImporter is true. Registering ai:assistant:generate also hides the importer because that host-owned, single-result generation contract does not support imports. End-users can open the + menu in the prompt composer and choose Import from HTML or image, or drag a supported file anywhere over the Assistant panel.

The importer is available only while Full Template is the active Assistant target. Selecting an individual row or content tool hides the import action and clears any selected file or import currently in progress. Returning to Full Template restores the action without restoring the discarded attachment.

Imports run on the model the end-user picked in the Assistant's model selector, or on features.ai.model when the init config pins one; otherwise the service uses its importer default.

AI Assistant composer with an HTML file labeled as a Design import and an optional instructions fieldAI Assistant composer with an HTML file labeled as a Design import and an optional instructions field

The flag is an editor UI control, not an Unlayer-managed end-user entitlement or quota. Set it independently for each editor session using your own plan, role, onboarding, or allowance logic. For example:

// Fetch this server-authoritative decision before initializing the editor.
const canImportTemplates = currentUser.features.canImportTemplates;

unlayer.init({
  features: {
    ai: {
      fullTemplateGeneration: true,
      templateImporter: canImportTemplates,
    },
  },
});

Your application is responsible for storing and enforcing any per-user allowance in its backend before it enables the importer. The AI Assistant lifecycle callbacks can identify HTML and image import activity for analytics and reconciliation, but they fire after the editor accepts the action and cannot block a request. Unlayer's normal workspace AI-credit requirements still apply.

The uploaded HTML or image is sent to Unlayer's AI service and the selected model provider so the design can be reconstructed. Source bytes are omitted from lifecycle callback payloads and lifecycle logs; optional text instructions are included in the request callback. See AI Assistant privacy and data for the broader data-handling policy.

How to import from the Console​

  1. In the console, open the Templates tab for your project (available for Emails, Pages, and Documents).
  2. Click AI Template Importer in the top-right corner.
  3. Drag and drop your file, or click to choose one:
    • HTML files: .html, .htm
    • Images: .png, .jpg, .jpeg, .webp, .gif
    • Max file size: 5 MB
  4. Give your template a name and, if you'd like, choose a folder to save it in.
  5. Click Import and let the importer work — you'll see progress updates as it goes. A typical import takes under a minute; longer or more detailed designs may take a bit more time.

When it's done, you'll land directly in the editor with your new template open, ready to edit, polish, and use.

Importing inside the embedded builder​

  1. Open the AI Assistant at the full-template level.
  2. Open the + menu and select Import from HTML or image, or drag a file over the Assistant panel.
  3. Choose a supported HTML or image file up to 5 MB. The file appears as a Design import attachment in the prompt composer, labeled with its source type and size.
  4. Optionally describe how the Assistant should recreate or adapt the source, then send the attachment. If the canvas already contains content, confirm the replacement in the conversation.
  5. The Assistant reports progress in the chat and lets the end-user stop or retry the import. A successful import replaces the canvas in one undoable change.

Choosing Cancel at the replacement confirmation keeps the current design and records that no import was started. This pre-request choice does not emit any AI Assistant lifecycle callback; callback guarantees, including ai:assistant:on:cancel, begin only after the end-user clicks Replace design and ai:assistant:on:request fires.

Credits & limits​

Each import uses the workspace's AI credit allowance, shared by every project and AI feature in that workspace. You don't need separate importer credits.

What an import costs​

Because the importer builds a complete template, an HTML or image import usually uses hundreds to a couple thousand credits. The exact amount depends on:

  • How large the source is. Longer emails and denser screenshots take more work to rebuild.
  • Whether you import HTML or an image. Image imports tend to cost a bit more, since the importer reads the design visually.

For your plan's included credits, available credit packs, and pricing details, see the pricing page.

If you run out of credits​

If the workspace has used its AI credits for the current monthly window, the importer will let you know before running. From there you can:

  • Wait for your credits to reset at the start of your next billing period.
  • Add a credit pack anytime from Console → Billing → Add-ons to keep going right away.
  • Upgrade your plan for a larger built-in allowance.

If your plan doesn't include AI features at all, the AI Template Importer button won't appear — upgrade your plan to enable AI tools.

Where to see your usage​

All AI activity — imports, the AI Assistant, and other AI features — shows up together in your project's Usage Insights view in the console as a single AI credits total, so you always know where you stand against your allowance. This workspace-level accounting is separate from any importer allowance maintained by your application.

Help us make it better​

After each import from the Console, you'll have a chance to rate how the result turned out. Ratings are not currently shown for imports started inside the embedded builder. Console ratings and comments go straight to our team and directly shape how the importer improves over time — it's the fastest way to flag a layout that didn't quite work, a color that came out off, or something missing entirely.

For broader feedback or recurring quality issues across many templates, reach out to your account manager or Unlayer support.

Tips & things to know​

A few things that help you get the best results:

  • Imports always create a full template. If you'd like to edit just one section of an existing design, the AI Assistant inside the builder is a better fit.
  • 5 MB file limit. If your HTML or screenshot is too large, try compressing the image or removing inline base64 attachments from the HTML.
  • Image imports use placeholders. Since screenshots don't carry the original image files, the importer fills image spots with placeholders — you can swap in your real images right in the editor.
  • Expect small adjustments. Especially with screenshot imports, the importer gets you most of the way there, but final polish — exact colors, spacing, fonts — is best done with a quick pass in the builder.
  • One file at a time. Import templates one at a time. For a larger library, run the importer for each file in turn.

If an import doesn't come out the way you expected, try importing again or with a slightly different source file. Console users can also leave a rating so we can keep improving.