I have my premade HTML template , i want to convert into json design , How can i do that ?

manthan-sf commented 4 years ago

I have my premade HTML template , i want to convert into json design as unlayer does , how can i convert my html to JSON design compatible to unlayer ?

dev-hitesh-gupta commented 4 years ago

I also need this anyone?

hazemKrimi commented 4 years ago

When you call the exportHTML method you can deconstruct the design JSON with the html from the data paramater provided by the callback function. Here is an example:

     emailEditorRef.current.exportHtml(data => {
         const { html, design } = data;
         console.log('exportHtml', html, design);
     });

codingleo commented 3 years ago

Also interested on this subject. @hazemKrimi yeah, it's documented. But what abou the inverse?

Converting html into json data that could be used by the library.

I'll give this a 2 days for an answer, otherwise I'll try to work on a solution/workaround and let you know.

Thanks!

StebanDev commented 3 years ago

Hi @codingleo I'm also looking for a solution for this problem. Please let me know if you have found one.

hazemKrimi commented 3 years ago

You need to convert html to json manually @codingleo @StebanDev

Nanle21 commented 3 years ago

Any solutions yet?

ffjanhoeck commented 3 years ago

I am also looking for something like this

alikuru commented 2 years ago

Any progress on this issue? Couldn't find anything on the docs.

gjphilander commented 2 years ago

I decided to tackle this issue and made good progress so far. My script can already convert 50% of unlayer html templates to unlayer json and I can successfully load it in the editor. Will see if I'm successful. I would guess that my script would at least convert the html 90%, but 100% is not improbable. As soon as I finish this project, I would like to convert any html template to unlayer.

Mallesh-Nagothi commented 2 years ago

I decided to tackle this issue and made good progress so far. My script can already convert 50% of unlayer html templates to unlayer json and I can successfully load it in the editor. Will see if I'm successful. I would guess that my script would at least convert the html 90%, but 100% is not improbable. As soon as I finish this project, I would like to convert any html template to unlayer.

Fantastic!! I'm also looking for this

gjphilander commented 2 years ago

I have now incorporated the script into the demo version of Unlayer. I have it online, but am not sure if i should post the link here.

I am attaching a screen grab of an imported Unlayer template. I would say that the script can do the job approximately 80% now. Some templates are imported 100%, but I suppose it all comes down to the complexity of the template. converted

All the buttons you see in the menu are operational and doing what they are supposed to do. Please let me know your thoughts.

gjphilander commented 2 years ago

Oh, I almost forgot!! I am working on a module to import the downloaded zip files of the Unlayer templates for conversion :) Chat soon.

charlesmudy commented 2 years ago

@gjphilander are you push this live to test ? Good stuff ... Really need this badly.

Came across this https://github.com/barakaally/unLayer2be but not working well ...

gjphilander commented 2 years ago

you can test mine here: https://oneclickmobi.com/email-editor/#/ Just click on Import Unlayer Html button. From there you will know what to do..

charlesmudy commented 2 years ago

Super solid start @gjphilander ... great work! Do you want to open this so the community can support and perfect this or whats your plan? I notice it doesn't really work with with external html files ... just sample templates from unlayer

gjphilander commented 2 years ago

Super solid start @gjphilander ... great work! Do you want to open this so the community can support and perfect this or whats your plan? I notice it doesn't really work with with external html files ... just sample templates from unlayer

Thank you @charlesmudy .

I would like to perfect it myself. It was a steep learning curve, but now that I have a better understanding of how it actually works, I am going to rewrite the library from scratch based on my findings. The reason why I do not want to open this specific library to the public, is because it can be utilized to scrape Unlayer's premium templates as well and that would not be in their best interest.

QUOTE: just sample templates from unlayer<--- Yes, that's correct. It is/was the best way to start, otherwise I wouldn't have a clue as where to start :)

I will most probably open source the new library with which one will be able to convert other html templates to Unlayer project files.

charlesmudy commented 2 years ago

Any update on this yet @gjphilander ?

gjphilander commented 2 years ago

@charlesmudy I am suoer busy with it :)

william0795 commented 1 year ago

Please, I would like to know if you were able to deal with this issue, since I am currently having the same problem

harmoney-franck commented 1 year ago

Hey @gjphilander, any update on your project? I have a tonnes of templates I'd like to migrate to unlayer and that would be super useful, thanks

kaliljoao commented 1 year ago

you can test mine here: https://oneclickmobi.com/email-editor/#/ Just click on Import Unlayer Html button. From there you will know what to do..

can you explain the code? I trying to do the same but using vue.js

akash-badiyani commented 1 year ago

Hey @gjphilander, any update on this part of the project? The editor is super useful, just this part is missing.

Anubhavgarg1910 commented 5 months ago

Hey @gjphilander @alikuru @charlesmudy @codingleo @ffjanhoeck @Nanle21 any update for this issue? Really stuck with this part.

Shrey-Raj commented 1 month ago

Hey everyone! 🙌 I was facing the same issue, until I came across this below method :

1. Go to unlayer's dashboard > create a project > Make it live(3 dots) > Create a template
1. Drag and drop an HTML element from the Tools section, into the editing area.
1. Click on the HTML(in the editing area) and you willl have a small window popup in the right hand side, where you can edit you HTML. Simply copy and paste the HTML for your template which you want.
1. Save the Template. You can either go to the JSON tab in the same horizontal panel to get the JSON or you can use the API offered by unlayer, which returns the JSON of all the templates that you have created in ur project.
Get you api key from the ur unlayer project's dashboard, then hit the below API : username : Your API KEY , password: Yes, you need not to pass anything in the password field.

The value of the `design` field in the response is the required JSON for your template.

YashwanthVeesarapu commented 1 month ago

Hey everyone! 🙌

I was struggling with the same issue, and @Shrey-Raj solution worked like a charm!

One stop solution:

Go to editor, remove all content
Drag and drop you HTML from content
Paste you HTML document in editor

Shrey-Raj commented 1 month ago

Thanks man! Happy to help

unlayer / react-email-editor