Seeking Documentation for Bricks JSON Schema

Developers
1

Hi everyone,

I’ve been deep-diving into the “vibe coding” workflow lately—using AI to generate HTML/CSS/JS and then attempting to port it into Bricks. I’ve tried the new native HTML/CSS/JS to Bricks tool as well as third-party options like Code2Bricks, but I’m finding the “last mile” to be a significant hurdle.

The main issues I’m running into are:

  • The Tweak Factor: Constant manual adjustments are needed after the import to get things “Bricks-perfect.” or remove unnecessary div soups and, honestly, it takes me more time than just build the elements from scratch.

  • Responsive Breakdowns: Media queries often require a total rework otherwise would result in a mess of custom CSS flying around rather than utilizing native Bricks controls.

  • Maintainability: It often feels like I’m fighting the tool rather than building a clean, scalable structure.

Because of this, I’ve decided to build my own custom translator specifically designed to handle these edge cases. I know it’s a risky project, but given the amount of time it could save me and my agency, it’s a high reward project. To do it right, I need to move beyond reverse-engineering clipboard data and actually understand the full Bricks JSON structure and format rules.

I’ve searched the official Academy and forums but haven’t found an exhaustive technical reference for the element attributes, nesting rules, and schema.

Does anyone know if there is an official (or high-quality community) documentation for the Bricks JSON format? Specifically, I’m looking for:

  1. A complete list of keys within the settings object for core elements.

  2. How Bricks maps its internal control IDs to CSS properties.

  3. The logic for how global classes and responsive breakpoints are stored within the JSON array.

Any leads or developer resources would be greatly appreciated!

1 Like