also please allow to cancel the procesing/building:) this is when you got a typo or something wrong
1 Like
#1 - Tip to vibe code better (at least works for me) When you want to optimise a component in your vibe coded block. Ask first the name of the component. In this way you can work much more targeted!
#Tip2 - If you are having a bunch of seperate metric cards, ask the ai to combine them into a new component, so that your setup will be more modular
1 Like
Another tip! store you final amazing vibe blocks in a draft page to great your new library of new blocks. @Jjenglert would be great if softr could create a vibe code block section in the block menu so that you can reuse your blocks easily
2 Likes
Love this idea =)
1 Like
Little fix that would be nice –
Sometimes when I’m typing my prompt I need to click away to get information about another block or something. It would be nice if what I had started to type remains in the chat! For now I just remember to copy my message before clicking away.
1 Like
We are working on that! Hopefully 1-2 weeks and it will be able to save your prompt / complete your build even when you click away!
2 Likes
Any timeline for Softr native button functionality for the vibe coding blocks please @Jjenglert ?
Aiming for something by end of year but it might go into early Q1…
You know you can direct the buttons to send the payload to a Softr webhook for CRUD, right?
Also, can tell AI to program buttons to navigate to specific URLs / scroll to sections, etc.
2 Likes
Not tried the Softr webhook approach yet … anything published on this yet to speed me along?
2 Likes
I would love to hear how you guys are getting this to actually work because I was so super excited for this and asked if it could build a course layout for me which it swore it absolutely could do. Now we’re halfway through it and it’s like it has no idea where to go from here. So I have half of a new LMS system built and got rid of the patchwork system I had just to now have absolutely nothing. At least before, the patchwork system I had I could offer courses through. Now I can’t do anything because I have half a system built and the vibe coding block can’t seem to figure out how to do the rest… So, I effectively lost the entire course system I spent hours putting together.
Not 100% sure this is what you’re looking for (and it’s very hacky) but this worked for me.
I had some native Softr buttons that I wanted the AI to replicate. These are Top Bar Action items. I made them on tables and then hid those tables with custom code on the page. (Interestingly the Vibe Code block couldn’t figure out how to write that stuff, ChatGPT did that part for me).
Then the Vibe Coding block searches for that table and triggers the Action button.
I was unable to replicate this on individual item actions, but it works well on the Top Bar Actions!
1 Like
@Jjenglert Will there be an option to paste/upload images/screenshots into the Vibe coding chat to help provide examples of the outcome we’re going for? Currently I do this in ChatGPT to then paste code into Custom Code blocks which really helps with execution. It works great to navigate to specific URLs / scroll to sections etc but would be nice to capitalize on the CRUD features and base data. Im finding vibe code block alot more accurate when I use Chatgpt to give my prompts.
2 Likes
Any idea how to get it maintain a proper list format from Airtable? I need a list of objectives in bullets or numbered list and it just keep giving me a paragraph no matter what I try.
Another Idea: would it be possible to integrate a highlight function like the inspect function in chrome, so that when your browse the generated code, you can pinpoint the name of the element that you want to optimise easier.
I hate to say it but, for me, this vibe block has been absolute garbage. If half builds things then tells me it can fix something, only to then delete it. I start over and then it runs into a completely new issue. It’s completely destroyed what I already had built.
I had some real success recreating some existing blocks that I was applying custom code to for styling.
Previously, it had been a real effort to find stable, or the most stable, selectors to apply the styling to, and there is always the concern they will break at any point.
Now, I ask the vibe coding block to style things how I want them, without that worry. Once the styling is right, I ask it to tell me what the styling details are (React code) so that I can copy and paste to other VC blocks for consistent styling. Works really well 
2 Likes
@jkasman This was really helpful, thanks so much for sharing. Here’s why:
Vibe Coding blocks are cool, but there are some limitations. One is that it is not possible to save field content edits to RTF text, they are saved back to the source as plain text. I needed this functionality and it is best provided by Softr native editing actions. I used an Item Details Button (update record) in an Item Details block on the same page, hid all the fields, and used CSS to minimise it on-page. Then I had the Vibe Coding block enable its own button, on-click, to trigger this native button being activated and the native update record modal opens.
<style>
#item-details-block {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
Good stuff @MarkSchofield
Thanks for sharing your success stories here. 
A quality of life thing – It would be great if the Vibe Coding by default respected some of Softr’s default styling. For example, the Vibe Coding block seems to have less padding on the left and right of the window than a native softr block.
One nice trick I’ve been using though when I have multiple Vibe Coded blocks on a page is I ask it to describe it’s styling in detail in a way that another AI block will understand, and then I just feed all that styling information from one to the other.
2 Likes