In this article, we'll talk about two ways to use HTML, and you'll both find them in the Top panel under HTML.
HTML import and export
At Ycode, we especially love the first option, as it's a groundbreaking feature!
With the HTML import option, you can import custom HTML code that's converted into layers and design settings. You can then adjust it visually in the canvas, using no code at all.
Similarly, you can export elements and reuse the code in other Ycode projects or anywhere on the web.
Though this feature is great to extend a project’s functionality, keep in mind that Ycode’s support team cannot help you troubleshoot issues with third-party or external code.
Go to the Top panel in the canvas and choose the HTM icon. Click on Import and you’ll see a window pop-up where you can add your code.
Once added, click on the Import button to add the code to your canvas.
To export HTML code, first select the Ycode element you want to export.
With the element selected, right-click and choose Export as HTML.
You’ll now see a pop-up with the HTML code of that specific element. Then click Copy to clipboard on the top right to copy the entire piece of code.
We want you to be able to flexibly build with Ycode. That’s why you can add any piece of code via HTML embed. This gives you the power to use custom functionality on your web apps and websites.
Adding HTML embed elements
Before you start, it’s good to know that there’s a maximum of 10,000 characters for embedded code.
Adding any <html></html>, <body></body> or <head></head> tags will break your web project.
And lastly, if your embed code has opening and closing tags, make sure to add them in there.
Here’s how to embed custom code:
Copy the embeddable code to your clipboard
Add an Embed element from the Top panel
Paste your copied custom code
Done! Your custom code will be automatically saved
Editing HTML embed elements
Though there’s probably not much to edit in your custom HTML embed code, you can add your own dimensions (in case there are none set). Add [height="100%" width="100%"] and change the percentages accordingly.
If your HTML has the tags <iframe></iframe> or <style></style>, you can preview the embedded code directly in your canvas. However, some code can only be seen in the live version of your web project. Once your project is published, the custom code will render where you placed it.