Skip to main content
Vibe coding blocks are custom React components you add to a page when the built-in blocks don’t do what you need. These tools let an assistant write and maintain them from outside Softr Studio — so you can ask for a block in the same conversation where you explored the data it should show. The framework reference is in the Vibe Coding Developer Guide. The assistant reads the current version of it with get_vibe_coding_docs before writing code.

​
Good to know

A broken block can’t be saved. Code is checked before it is stored, so if something is wrong the block keeps working as it did and nothing is lost. A version is a snapshot of the whole block. One is saved each time the code changes, capturing the block as it stands at that moment — its code, but also its settings, visibility, and connected data sources. Changing only a setting doesn’t create a version of its own.
Rolling back reverts more than the code. Restoring a version also restores the settings, visibility, and data source connections as they were at that point, so anything changed since goes back with it.
Changing the code resets action permissions. Any code change rebuilds the block’s record actions from scratch, at their default visibility. If you had restricted one to certain user groups, that restriction is gone and needs setting again.

​
Creating and reading blocks

​
Deleting a block

Only vibe coding blocks can be deleted this way. Every other block — headers, lists, forms, navigation — is removed in the builder; the assistant will tell you so rather than finding a way around it. Deleting takes the block’s data source connections with it, so there is nothing to disconnect first. The workspace integration stays connected, and no other block on the page is touched.
Deleting cannot be undone from the assistant. Version history goes with the block, and neither restoring nor duplicating a version can bring a deleted block back. If what you want is the block as it was a few edits ago, ask for a rollback instead — that keeps the block. If you might still want it, ask for a copy with duplicate_vibe_coding_block_from_version, or just hide it.
The block disappears from the builder straight away, but the live app keeps showing it until the app is published.

​
Editing code

​
Settings and visibility

Editable settings are the fields you would fill in on the block’s panel in the builder — a title, a label, a threshold. Changing one doesn’t touch the code.

​
Version history

Duplicating from a version is the safe way to try an alternative: you keep the working block and get a second one to experiment on.

​
Connecting data

A block that shows data needs a data source connected to it. The source is an integration belonging to the workspace, so this starts by browsing the workspace’s integrations to find the table you want. Sort order and record filters are the same settings as the Source tab in the builder.
A block whose data source isn’t connected will still save without complaint, then show an error when someone opens the page. If a new block looks broken but the code seems right, check its data source first.