Builder Tweaks

Structure Generator

Structure Generator lets you create HTML, CSS, and JavaScript code manually or with AI assistance. Preview the output live in an iframe, make real-time adjustments, and import it effortlessly. The iframe is styled with all core Bricks styles, including your global classes, variables, and theme settings — ensuring full compatibility with ATF.

Initial Release Date

May 27, 2025

Last Modification

May 27, 2025

Official Videos

No Video found.

Content Creators Videos

No Video found.

Documentation

Structure Generator lets you create HTML, CSS, and JavaScript code manually or with AI assistance. Preview the output live in an iframe, make real-time adjustments, and import it effortlessly. The iframe is styled with all core Bricks styles, including your global classes, variables, and theme settings — ensuring full compatibility with ATF.

More Features in the Builder Tweaks category:

Visibility Floating BarCheck it Out
Content/Style Tabs Contextual MenuCheck it Out
Control Group Contextual MenuCheck it Out
Remove Classes on DeleteCheck it Out
Double-click to Edit ComponentsCheck it Out
Structure MenuCheck it Out
Structure GeneratorCheck it Out
Sync Heading Text with Element LabelCheck it Out
Transform all “select” controls into ComboboxesCheck it Out
Animation Tab & ControlsCheck it Out
Filterable Structure PanelCheck it Out
Quick Remote TemplatesCheck it Out
Focus modeCheck it Out
Zoom-OutCheck it Out
Logical Properties controlsCheck it Out
Lock Elements OrderCheck it Out
Modified ModeCheck it Out
Link Spacing Controls by DefaultCheck it Out
Color Popup set to RAW and displayed as a LISTCheck it Out
Quick SearchCheck it Out
Sync Element’s label with the first Global Class nameCheck it Out
Generated Code & Element HTML parserCheck it Out
Link indicator inside the Structure PanelCheck it Out
Admin/Editor notesCheck it Out
Nested Elements LibraryCheck it Out
Dynamic Data HelperCheck it Out
Image Mask HelperCheck it Out
Focus PointCheck it Out
Highlight Hidden/Removed ElementsCheck it Out
AT Main Menu in toolbarCheck it Out
Move Styles over different elements, classes or breakpoints.Check it Out
Collapse/Expand the Elements listCheck it Out
CSS Grid BuilderCheck it Out
Global Query Loop DropdownCheck it Out
Right Elements ShortcutsCheck it Out
Global Query ManagerCheck it Out
Tag manager inside the structure panelCheck it Out
Responsive HelperCheck it Out
Structure Panel HelperCheck it Out
Pseudo-elements shortcutsCheck it Out
SuperPowerCSS: custom CSS on steroidsCheck it Out
Advanced Text WrapperCheck it Out
Move elements inside the structure panelCheck it Out
Box-shadow GeneratorCheck it Out
Copy/paste your Interaction & Condition settingsCheck it Out
CSS keyboard ShortcutsCheck it Out
New CSS ControlsCheck it Out
Draggable Structure PanelCheck it Out
Custom default settings for relevant elementsCheck it Out
Lorem Ipsum generatorCheck it Out
Contrast CheckerCheck it Out
X-modeCheck it Out
Grid GuidesCheck it Out
ID’s overviewCheck it Out
Element CSS ShortcutCheck it Out
Expand All Children ElementsCheck it Out
Basic text / Rich text / Heading converterCheck it Out
Expand Spacing ControlsCheck it Out
Increase the builder’s inputs size to easily manage CSS variables and custom CSS functionsCheck it Out
Reveal the “class icons” on hover and focusCheck it Out
Highlight Parent ElementsCheck it Out
Highlight Nestable ElementsCheck it Out
Parent Element ShortcutCheck it Out
Control the grid columns inside the global elements panelCheck it Out
Disable the outline border of the active element when styling Borders and Box-shadowCheck it Out
Disable the PIN Icon on the elements listCheck it Out
Keyboard ShortcutsCheck it Out
Class Preview on hoverCheck it Out
Preview Colors on hoverCheck it Out
Darkmode toggle inside the toolbarCheck it Out

You won't build websites without it anymore!

Check the Pricing Plans - Starts from $59