Paste HTML & CSS to Auto-Generate Editable Bricks Structure with Styled Classes

Introducing a feature that lets users paste both HTML and CSS into Bricks could significantly streamline layout building and design consistency. When a user pastes HTML markup along with its CSS, Bricks would automatically generate a complete visual structure—creating sections, containers, text, buttons, and more—while also converting the CSS into editable, reusable classes within the builder. This would remove the need to manually recreate layouts or restyle components, allowing users to instantly transform code into Bricks-native elements ready for visual editing.

Key Functionalities:

  • Auto-generates Bricks elements from pasted HTML
  • Preserves element hierarchy, structure, and classes
  • Converts CSS rules into editable Bricks classes
  • Applies correct class names to matching elements
  • Optionally maps inline styles to visual controls
  • Ideal for importing code-based mockups and prebuilt templates

This feature would provide a fast and flexible bridge between custom code and Bricks’ visual builder, making it easier to reuse existing assets or kickstart new layouts.

2 Likes

This feature would require Bricks to eat up CSS and HTML as Etch does or will do.
It would be great and following from that the CSS and the UI should sync itself. So you can copy some lines of CSS and Bricks shows them in the UI too.

1 Like