This tool is designed to help Bricks Builder users quickly convert their existing HTML/CSS/JS into the proper JSON structure that Bricks Builder can import, saving significant development time when migrating or creating new templates.
- Converts raw HTML into Bricks Builder's JSON structure
- Preserves HTML structure and hierarchy
- Handles various HTML elements including section, div, container,forms, buttons, images, and more
- Converts CSS styles into Bricks-compatible format
- Handles class-based styling
- Supports pseudo-classes (:hover, :active, :focus, :visited)
- Preserves class names even without styles
- Processes and includes JavaScript functionality
- Supports custom JavaScript code integration
- Maintains global elements and their references
- Skip: Ignores inline styles
- Inline: Converts styles to inline styles
- Class: Converts inline styles to CSS classes
- Live preview of the generated structure
- Toggle between HTML preview and JSON output
- Real-time updates as you type
- Toggle minified/pretty-printed JSON
- Copy to clipboard functionality
- Option to include/exclude JavaScript
- Handles form elements with proper field types
- Processes custom attributes
- Maintains parent-child relationships
- Supports dynamic class name generation
- Add support for more HTML elements
- Add support for more CSS properties
- Add support for more JS features
- Add support for CSS Variables
- Add support for CSS Media Queries
- Add support for inline styles to classes and inline embed
- SVG Code is not signed by default
- Separates concerns into different utility files
- Core conversion logic in [domToBricks.js]
- CSS parsing in [cssParser.js]
- JavaScript processing in [jsProcessor.js]
- Works in modern browsers
- Uses DOMParser for HTML parsing
- Fallback to jsdom in Node.js environments