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

​
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.