Right click in your browser and go to inspect mode, in the “Elements” tab, you can click the top-left arrow, click the Custom Component element on the screen, and the code is there.
1 Like
And with a simple custom component , Glide changes the game again! This makes so much sense as the implementation.
Within the last 5 mins , the craziest workflow example that came to mind first was a newly designed calendar component. So i google calendar design , take a screenshot and give to Claude to create the HTML , then copy/paste into Glide.
Come on guys , when this gets polished and released fully its a whole new world. Now add on the same functionality for the backend tables , prompt to data structure and its…i don’t even know what stage to call that!
Absolutely AMAZING work here @david and the team! Cannot wait to play around with this more!
13 Likes
Hey @david,
in the future you think that we will have the HTML component with minimal loading times? Because, as it is currently set up, the component is generated every time it is viewed, unlike the others (like tables, rich text ecc). Therefore, there are quite long loading times between when the page containing the component is clicked and when the component actually loads.
Maybe add a “lock” action to mantain the same html pre-saved? Just a suggestion 
5 Likes
The component is actually saved locally after the first time it’s loaded. We’ll investigate the slow startup time.
7 Likes
Thank you! Also i have a question about Push Notifications. Will they become Free for everyone after they leave Early Acces or will they stay a paid feature?
Please keep the discussion to the main topic and create a new thread for that if you need to discuss further. Thank you.
4 Likes
It looks like Glide is currently restricting the use of the YouTube Player and fullscreen features in this component. Could you please provide guidance on how we can lift these restrictions to fully utilize YouTube Player, including fullscreen mode?
Is Glide working on this? Looks broken or different than it did a few days ago. Quick screen shot of the custom code component.
This model prompt offers a more stable condition, waiting for you to press the enter key for processing.
Seems like the Code component doesn’t have that problem. At least I would expect the ability to add actions.
We’ve separated the Code and AI components.
2 Likes
About the component shrinking, chat GPT says that:
The shrinking of the component after a refresh in your Alpine.js Tailwind component could be due to several factors, but the
viewportsetting in the<meta>tag is generally not the cause. The viewport meta tag you’ve used (width=device-width, initial-scale=1) is standard and typically ensures the page scales appropriately across different devices.
A few potential issues to consider:
- CSS Flexbox and Width Settings: The use of
flexandwidth: 100%;along withmax-widthon the.card-containermight be causing the component to adjust its size dynamically. The combination of these styles could lead to shrinking if the parent container’s width changes or if the content inside changes and causes a reflow.- Overflow and Scroll Handling: The
overflow-x: autoon.swiper-containerand the manual handling of scrolling via JavaScript can sometimes lead to unexpected layout changes, especially when the content’s width is not stable or dynamically changes.- Responsive Design: If the parent container or the surrounding layout adapts responsively and affects the size or positioning of the
.swiper-container, this can lead to the components appearing to shrink or resize unexpectedly.
Should i do something or its because the component is not fully "stable?
Thanks
I’m testing the AI custom components and I’m already loving it! But do you guys know how to make it change dinamically from the score in a column in the database. Any time I enter new score it doesn’t update in the right way and it shows inaccurate scores. Can I make a component like this with a custom code component? How can make the custom component dynamic?
The best way to control it is using it with a Code component. That way, you can edit the code directly and not relying on the model to do it.
Starting with the AI chat is good though, then you can extract the code using inspect element > point at the component.
1 Like
Thank you Thinh! How can I extract the code to paste it in the custom code component? Can you please explain to me the steps?
Here, basically just turn the Inspect mode on (right click in the builder, choose Inspect, Elements tab), point to the component, and you’ll find the underlying code.
2 Likes
Works fantastic now Thinh!!! Thank you!!!
On top is the AI component and on the bottom is the new custom code component!
<!-- Container with standard height -->
<div class="relative w-64 h-32">
<!-- Adjusted height to be 64 units -->
<div class="absolute bottom-0 left-0 w-full h-full">
<div
class="w-full h-full bg-gradient-to-r from-red-400 via-yellow-300 to-green-400 rounded-t-full"
></div>
</div>
<!-- Scale Labels -->
<div class="absolute bottom-1 left-2 text-xs">-1.00</div>
<div
class="absolute top-1 left-1/2 transform -translate-x-1/2 text-xs"
>
Zero
</div>
<div class="absolute bottom-1 right-2 text-xs">+1.00</div>
<!-- Short/Long Labels -->
<div
class="absolute bottom-4 left-6 text-sm font-bold text-red-700"
>
Short
</div>
<div
class="absolute bottom-4 right-6 text-sm font-bold text-green-700"
>
Long
</div>
<!-- Needle -->
<div
class="absolute bottom-0 left-1/2 w-1 h-24 bg-black origin-bottom transform"
x-bind:style="'transform: rotate(' + (mtpi * 90) + 'deg);'"
style="transform: rotate(-90deg);"
data-iframe-overflow=""
>
<div
class="w-0 h-0 border-l-4 border-r-4 border-b-8 border-l-transparent border-r-transparent border-b-black absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full"
data-iframe-overflow=""
></div>
</div>
<!-- MTPI Value Display -->
<div
class="absolute bottom-1 left-1/2 transform -translate-x-1/2 text-sm font-bold"
>
MTPI:
<span x-text="parseFloat(mtpi).toFixed(2)"></span>
</div>
</div>
1 Like