In this article, we'll talk about two ways to use HTML, and you'll both find them in the Top panel under HTML.

  1. HTML import and export

  2. HTML embed

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.

Importing HTML

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.

Exporting HTML

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.

HTML embed

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.

If your code happens to be longer, it’s best to store it on an external server and embed it as a script file. Alternatively, you can use multiple embed code elements (if the Javascript functions allow it).

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:

  1. Copy the embeddable code to your clipboard

  2. Add an Embed element from the Top panel

  3. Paste your copied custom code

  4. 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.