From the start, we envisioned Ycode as an open platform where builders can create, share and reuse components and data from different sources. Today, we got one step closer to this goal by launching a feature that you’ll love: HTML import and export.
Import code and edit it visually in Ycode
You might have seen the HTML embed feature that’s available in the Ycode editor. While this also allows you to embed external code, the HTML import feature goes a step further. It allows you to alter code directly in the canvas!
You can find the HTML import feature in the top panel of the editor.
With HTML import, the code is transformed into layers that you can visually control. After importing, simply select a layer in the Ycode canvas and customize it just like any other layer.
This feature works best with Tailwind CSS, where Ycode recognizes the classes and turns them into design settings.
And it works both ways! You can import HTML, customize it and export it again afterwards. Just select the layers that you need and export them to get clean HTML code with Tailwind CSS classes.
To export HTML, right-click on selected layer and choose Export as HTML.
The HTML import and export feature will speed up your work tremendously and opens up many new opportunities! Here are a few practical scenarios on when to use it.
2 ways to use this exciting feature
Reuse design elements in other Ycode projects
Maybe you’ve built a design system or UI library that you want to reuse in other Ycode projects, so you can work faster and more efficiently? Now it's possible!
Exporting HTML from one Ycode project and importing into another.
Just export HTML from one project and import to the other. Thanks to the clean HTML and Tailwind CSS, this approach guarantees that design elements will look exactly the same.
Use Tailwind CSS components from the web
Tailwind CSS is one of the most popular and progressive CSS frameworks. We use it in the Ycode editor to allow you to create custom design web projects.
Now that we’ve launched the HTML import feature, you’re able to use hundreds of online resources that offer Tailwind CSS examples, templates, UI kits and components. Just grab the HTML code and import it into your Ycode project to gain full visual control.
Example of importing Tailwind UI component into a Ycode project.
We personally recommend:
Tailwind UI: A very high-quality UI component library developed by the creators of Tailwind CSS. It contains over 500 components, and each one of them can be imported into Ycode to customize. There are free examples to try, but you’ll need a paid plan to access to the full library.
Tailwind Components: A free resource with hundreds of components created by the community. The collection includes dropdowns, logins, modals, tabs, inputs, selects and much more.
Meraki UI: A growing collection of more than 50 beautiful Tailwind CSS components that supports right-to-left (RTL) language and dark mode. The collection consists of alerts, login forms, buttons, cards, dropdowns, navbar, pagination and footers.
It’s your turn to try it out!
Our mission is to make building for the Web accessible to everyone, as well as to make it faster and more efficient to visually develop web projects. This feature aligns with our mission, and we can’t wait for you to experience how much more productive building your next project will be!
Try the HTML import and export feature and let us know your feedback in the comments or via email.
We appreciate all of your feedback and feature requests. This helps us prioritize and build features you really need!