We’re making fantastic progress on the AI Assistant in Elements, and every week I’m amazed by how much more capable it’s becoming…
In today’s video, I show how the Elements AI Assistant can take a screenshot of an Apple website and recreate it as a fully editable section inside Elements. We then push things even further by turning a simple hand-drawn sketch into a complete, functional website layout. To top it all off, the AI automatically generates a matching dark mode colour scheme.
This is an in-development version of Elements and is not yet available publicly.
Elements AI will ship in a future of build of Elements 3.
We’d love to hear what you think of this week’s new AI feature. All feedback is greatly appreciated and helps shape the future of Elements
I do have a question regarding the HTML Component. In the current (non-beta) version, it’s rather awkward to implement as you have to keep “adding” new HTML Components if you want variations on different pages. And each iteration says “HTML” with no other identification. Has that feature been embellished in the beta?
Thanks!
Scott
P.S. I’m absolutely thrilled with Elements so far.
You can point it as an existing website and ask it to re-build it in Elements, keep in mind that will cost A LOT of AI credits… and the results may be mixed.
It’s often better to take a more considered, piecemeal approach when using AI.
This! Yes please. I struggle to see which HTML component I am using if you have more then two. Yes you can rename the heading within the code, but that’s not ideal if you adding new ones - and when you add them, you lose control over the order they’re added in in the component list.I wish we can rename the component as soon as you add one to the component list.
Hi @dan ,
Will everything you showed today be able to be driven by Claude externally to Elements (via MCP)? I noticed you optionally selected Claude’s Fable 5 model.
Thanks for confirming, Mike. I’m new to Elements and thought I might be missing something.
The reality is that the HTML “Component” is not reuseable… unless you want the same exact HTML in every instance used. That is a different functionality than virtually every other ‘Component’ (from what I see). All of the others allow you to create “instances” and each instance can be totally different. Was pretty shocked when I applied the same interaction using HTML. Added to a second page and “boom”, the first page is now the same as the second page. And so on. Not a show-stopper IF you could ’name’ the HTML component “when” you create it. As it is, you don’t know which is which (if more than one) when you go to drag it into a page.
I am totally confused by what your saying, I have over 30 HTML Code snippets (e commerce site and made up ones by me) on my site there is no problem at all. If you name your HTML component as you do it then the “name” you called it appears on that section on page. If you want to pu it into a container and make it a global you can use it all over the place but remember if you change it it will change “Globally”. I have over 10 in one container and it works without a problem. I made a few to show images, Download PDF”s and show videos in an accordion and they are all working. Have a look here ezyasabc.co.uk if you need help post your project here and you’ll get help.
The problem is not the use of the HTML on the tree, there you can re-name it. as you rightly point out.
I think Scott and I are experiencing the same issue when adding multiple HTML components.
When you click the + button under Custom and choose HTML, it is added next to your other custom elements or HTML components. But when you add another one, the components may be reordered, so it becomes difficult to tell which component is new and which one you have already used.
Because existing HTML components cannot simply be duplicated for new code, you must add a new HTML component each time. This makes it easy to lose track of which icon relates to which HTML component.
I use TradingView widgets and have around six HTML components, each containing different code. When adding a new one, I have to drag HTML icon into the tree to check the code just to confirm that the component is new. Double-clicking or Ctrl-clicking the HTML icon does not provide any useful information.
It would be very helpful if HTML components could be named directly within the Custom Components window or at least have index number so you can see which one is new.
Here is a little video showing the issue. The order of elements shuffles. Last + of the HTML moves Charts to the very end and you have no idea which HTML you just added.
Did not really want to hijack the announcement, but the topic came up. So delete or move if necessary.
I agree that this could be improved. When an HTML element is added, it should be sequenced e.g. HTML-1, HTML-2 etc. So at least you know what order they were created in before you rename them.
It would also be extremely useful if you could right click on them in the Components panel and rename them there. They are a special case compared to normal components as you create then by pressing the Custom component + button.
This is confusing, as you CAN rename an HTML component when you create it. Just click on the HTML editor title and change it to whatever name you want. This will then change the name in the custom component section.
Now when you create the next NEW component, simply repeat the process. Each component will be uniquely identifiable by the name you assigned to it.
Once you drag one of these components into your page, you can also click on it in the Node Browser and change the name there to anything you like.
If your components have certain properties that distinguish them from others, just create properties for those values. Then the component becomes easily reusable without the need to duplicate the code every time. Simply enter the values into the properties for each unique instance.
As others have mentioned here, we do this all the time, and it really streamlines development so much compared to building everything from scratch every single time you need a new instance.
As @handshaper says, once you get the workflow down, it’s not confusing. Create, rename.
Anyway, I have seen this issue/confusion come up a few times in the past… We’re now working on improving the renaming options and workflow for Custom Components. We hope to ship this soon
Well, first of all (Robin and Paul)… thank you for your input. As I said in the beginning, I am new to Elements. That said, I also was not planning on posting to the ‘forum’. I was just replying to an update email sent out by Elements.
Now, regarding my issue. I am using v2.4.4 (Base Plan). When I clicked the ‘+’ button (in the Components Column)… there was no ability to ’name’ the component. None. I currently have 3 HTML Components. All named ‘HTML’. I cannot click to rename them, either. Again… unless I’m missing something (which I could be!), but I have clicked and looked everywhere and see no way to name these 3 HTML components individually. I can only rename the instance… when I drag them into a Page; but, that is not my goal. I simply want to create named HTML Components, to use where I desire.
NOTE: I also just noticed that I am not able to create more than 3 HTML Components. Evidently tied to my Base Plan.
This is not a deal-breaker for me. I love Elements so far. I was just replying to the AI Demo Email sent out this morning (loved it) and thought I would send along a question.
This is the editor when visible. You can see that this custom component has the name “PayPal Donate”. If you click on this title you can enter whatever name you like, and it will update in the custom component list.
Once instances of the component have been dragged onto the page, you can then change their name in the node browser, to help differentiate them from each other.
