I previously shared this tool in the Facebook group and got some positive feedback, so thought I’d bring it to the forum as well for those who might have missed it.
What it does: Convert HTML, CSS, and JavaScript into ready-to-paste Bricks JSON structure.
Live tool: https://code2bricks.sevalla.page/
Key features:
- Paste code from CodePen or custom sources → get instant Bricks structure
- Visual layer panel with drag-drop reordering, renaming, and duplication
- Three-way sync: click elements in preview to highlight in layers and code
- “View & Edit CSS” - right-click any layer to see and edit its specific CSS rules
- Intelligent layer naming based on classes/IDs
I built this as a standalone visual IDE for heavy code work outside the builder. I know some folks have been looking for features like this (similar to what Etch offers), so hopefully this fills that gap.
The tool is completely free. There’s an optional support button if it saves you time, but it’s never required.
Feedback needed: This is an early version, so please test it with your most complex layouts. Use the “Report Problem/Suggest Feature” button in the app or message me directly.
Looking forward to hearing how it fits into your workflows ; D
10 Likes
fyi
My anti virus software - Avast reports the site as blacklisted
Having got past that, I had a go with a couple of pens, and it handled them well, so I think this will be a useful tool for me.
thanks.
1 Like
thanks for the report, glad u like it. I’ve actually investigated this and the problem stems from the host am hosting project on Sevalla. Because am using their name in the subdomain, most security tools flag the site as a phishing site because of the name. Am working on tranfereing the project to a custom domain name.
@mahmudzar This is pure gold!
It worked perfectly for converting pages in an internal framework I developed. I’d like to sponsor the project; I’ve already found the repository on Github. Can you enable sponsors?
Hey, GREAT! I tested today and it´s working very good!!! 
1 Like
Okay, so I bought the plugin, too and tried it out right away, and everything works as promised. I generated an example using Gemini Code, something that would normally take me 30 minutes. After 1 minute, it was in Bricks, all elements nicely sorted in the Bricks structure view. The CSS is in the section. It works, it’s fast, and it invites you to play around with it. The other features, such as the BEM generator, are useful additions, especially if you’ve been doing this manually up to now. The developer is communicative and clearly has a few more ideas up his sleeve, which is great. But it’s already been a no-brainer for me, and there’s currently a 20% discount. For me, it’s the best purchase of the still young year 
1 Like
I can’t get to your site. Is Has it moved?
Regards
Pete
