Custom App Design in Softr - Vibe Coding Block Overview
With Softr, we can build custom apps without code. Using the native Softr blocks limits the options in terms of design and functionalities when compared to custom-coded apps. But the fast development cycle and drag-and-drop interface of Softr make it a very appealing tool for people building minimum viable products, portals, internal tools, and other web apps.
The design limitations are now decreased thanks to the Vibe Coding Block in Softr. This is a block that allows building any app component with AI, which generates editable code connected with the underlying data source and the rest of your app. You can describe what you want, and AI generates it, with unlimited iterations included via the chat. You can also edit the generated code directly, which I find a very valuable feature for developers who want to retain control over the code while increasing the speed of development.
The Vibe Coding Block in Softr follows the recent trends in the democratization of code and app development carried forward by tools such as Claude Code, Replit, v0, Bolt, Lovable, and more. Some envision an imminent future where we are all empowered with software development tools to build custom tools that fit our specific situations and needs. It is certainly an interesting time to tinker and experiment with these innovations. Regardless, this essay and video delve into the Softr Vibe Coding Block, providing an overview of how to use it.
Features
Watch the video for a use case and visual explanation. The Vibe Coding Block in Softr is available on the right sidebar when you add a block, under Dynamic > AI. There are five main tabs in the Vibe Coding Block:
Chat: this is where you chat with AI to generate the code for implementing your envisioned design. You must always start from the Chat.
Source: this is where you select the data source of the Vibe Coding Block. This is optional, and you use it only if you want dynamic data from your database (e.g., Softr Databases, Airtable, Supabase, Notion, etc.) used and/or displayed in the block. When you select a Source, you can filter it like in any other dynamic block (e.g., filtering by current user to only show relevant data to the logged-in user). Only one source table per Vibe Coding Block can be selected currently.
Actions: this is where user actions included in the code are displayed for easy reference—but can't be edited here, only in the code—since the Vibe Coding Block can include actions to write, update, or delete the connected source data.
Content: this is where you see and can make edits to the code generated by AI, view and restore previous versions of the code. Each change you or AI makes to the code counts as a new version, and the version history menu allows you to navigate across versions and easily restore them.
Visibility: this is where you define which group of users can see this block in the app (only logged-in users, only external visitors, or everyone)—just like in any other block in Softr apps. You can also toggle device visibility if, say, you want to only show the block on large screens and hide it on mobile.
You can also share the Vibe Coding Block to the public via the dedicated Share menu at the top right corner. This overrides the Visibility settings mentioned above. It makes it easy to share a specific app block to the public for troubleshooting or testing purposes; otherwise, I don't see much value in it, especially if you are building gated apps that require login.
The Vibe Coding Block settings panel
FAQs
How does this compare to native Softr blocks?
Native blocks are faster to set up but more limited in design/functionality. The Vibe Coding Block offers great customization and flexibility with AI-generated code.
Is the generated code editable?
Yes, you can edit it directly in the Content tab.
What Softr plan includes the Vibe Coding Block?
Currently, the Vibe Coding Block is available on all plans without limits during Beta. It’s priced based on AI credits consumption, which you can monitor here in your Softr workspace. You can find out how many AI credits are included in your Softr workspace (depending on the plan) on the official pricing page.
Vibe Coding in Softr is an interesting application of AI-assisted coding in a fundamentally no-code tool. We would once see the two paradigms clearly distinct—there is coding, and there are no-code tools. But this is no longer the case, especially because of the push for LLMs to generate well-working code. The line between code and no-code blurs in favor of a more method-agnostic approach to building tech. This opens up many opportunities for an ever-increasing number of people to build tools for their own and other people's work and life.
