How DragDrop blocks work under the hood
A deep dive into the block architecture, schemas, defaults, hot-publish, and how we compile your TSX to runtime React.
A block in DragDrop is a React component with a schema. The schema describes its props, text, image, repeater, color, link, etc. The schema drives:
- The editor inspector (which fields show up where)
- The TypeScript types for the component
- The default content when the block is inserted into a page
- The validation rules
When you publish a block, we compile its TSX to JS using esbuild, fingerprint it, and store the result. Pages reference blocks by version, so old pages keep rendering with the block they were authored against.
This versioning matters because once a block is in production, you can't silently change its API. New columns? Optional. New required fields? Bump the major version. The CMS records compatibility, so editors know when they need to upgrade.
It's a pattern we borrowed from package managers. Surprisingly few CMSs do this, most just edit the schema and hope nothing breaks. We picked the boring, predictable approach instead.