PHPackages swissup/module-breeze-theme-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. swissup/module-breeze-theme-editor ActiveMagento2-module swissup/module-breeze-theme-editor ================================== Breeze Theme Editor module for Magento 2 0.1.0(3mo ago)01โ†‘2900%OSL-3.0JavaScriptPHP ^7.4|^8.0|^8.1|^8.2 Since Feb 4Pushed 1mo agoCompare [ Source](https://github.com/breezefront/module-breeze-theme-editor)[ Packagist](https://packagist.org/packages/swissup/module-breeze-theme-editor)[ RSS](/packages/swissup-module-breeze-theme-editor/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (1)Versions (3)Used By (0) Swissup Breeze Theme Editor =========================== [](#swissup-breeze-theme-editor) [![Version](https://camo.githubusercontent.com/3fb4be5dc3c1df885e1ba26b96adcd365a07351f276a4a4370e36a07906260a1/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d302e312e302d626c75652e737667)](https://github.com/breezefront/module-breeze-theme-editor/releases)[![License](https://camo.githubusercontent.com/63ef576c675f710ceed79c52560b622571f4ce5c938b74fe79a08c2edd7679cd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4f534c2d2d332e302d677265656e2e737667)](LICENSE)![PHP](https://camo.githubusercontent.com/a9f1c8bb62545a4fc9de73409092da6d87ed6232d50994aa524104d6dc08fda3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d372e34253230253743253230382e30253230253743253230382e31253230253743253230382e322d626c75652e737667) Visual theme customization tool for Magento 2 Breeze themes with live preview, draft/publish workflow, and 16+ field types. ๐Ÿ“š Documentation --------------- [](#-documentation) **Full documentation:** - [Installation Guide](https://docs.swissuplabs.com/m2/extensions/breeze-theme-editor/installation/) - [Theme Developer Guide](https://docs.swissuplabs.com/m2/extensions/breeze-theme-editor/theme-developer-guide/) - **How to add Theme Editor support to your theme** - [Configuration](https://docs.swissuplabs.com/m2/extensions/breeze-theme-editor/configuration/) - [User Guide](https://docs.swissuplabs.com/m2/extensions/breeze-theme-editor/user-guide/) - [GraphQL API](https://docs.swissuplabs.com/m2/extensions/breeze-theme-editor/graphql-api/) โœจ Features ---------- [](#-features) - **Live Preview** - See changes instantly without page reload - **Draft/Publish Workflow** - Test before going live - **16+ Field Types** - Colors, fonts, toggles, images, spacing, repeaters, and more - **Dual Color Format Support** - RGB (Breeze 2.0) and HEX (Breeze 3.0) with auto-detection - **Theme Inheritance** - Extend parent theme configurations - **Multi-Store Support** - Different settings per store view - **Version Control** - Publication history with rollback - **Secure Access** - Token-based authentication (3-hour sessions) ๐Ÿš€ Quick Start for Theme Developers ---------------------------------- [](#-quick-start-for-theme-developers) ### 1. Create Configuration File [](#1-create-configuration-file) Add `etc/theme_editor/settings.json` to your theme: ``` { "version": "1.0", "sections": [ { "id": "colors", "name": "Colors", "icon": "palette", "settings": [ { "id": "primary_color", "label": "Primary Color", "type": "color", "default": "#1979c3", "css_var": "--primary-color", "description": "Main brand color" }, { "id": "text_color", "label": "Text Color", "type": "color", "default": "#333333", "css_var": "--text-color", "description": "Body text color" } ] }, { "id": "typography", "name": "Typography", "icon": "text_fields", "settings": [ { "id": "body_font", "label": "Body Font", "type": "font_picker", "default": "Open Sans", "css_var": "--font-family-base", "options": [ {"value": "Open Sans", "label": "Open Sans"}, {"value": "Roboto", "label": "Roboto"}, {"value": "Georgia", "label": "Georgia"} ] }, { "id": "font_size", "label": "Base Font Size", "type": "number", "default": "16", "min": "12", "max": "24", "step": "1", "css_var": "--font-size-base", "description": "Base text size in pixels" } ] }, { "id": "layout", "name": "Layout", "icon": "view_quilt", "settings": [ { "id": "container_width", "label": "Container Width", "type": "text", "default": "1280px", "css_var": "--container-width", "placeholder": "e.g. 1280px" }, { "id": "sticky_header", "label": "Sticky Header", "type": "toggle", "default": true, "css_var": "--header-sticky", "description": "Fix header on scroll" } ] } ] } ``` ### 2. Use CSS Variables in Your Theme [](#2-use-css-variables-in-your-theme) The Theme Editor generates CSS variables that you can use in your stylesheets: ``` /* web/css/source/_theme.less or styles.css */ :root { /* These will be overridden by Theme Editor */ --primary-color: 25, 121, 195; /* RGB format for Breeze */ --text-color: 51, 51, 51; --font-family-base: "Open Sans", sans-serif; --font-size-base: 16; --container-width: 1280px; --header-sticky: 1; } /* Use variables in your styles */ .btn-primary { background: rgb(var(--primary-color)); } body { color: rgb(var(--text-color)); font-family: var(--font-family-base); font-size: calc(var(--font-size-base) * 1px); } .page-wrapper { max-width: var(--container-width); margin: 0 auto; } .page-header { position: var(--header-sticky) == 1 ? sticky : relative; } ``` ### 3. Field Types Quick Reference [](#3-field-types-quick-reference) TypeDescriptionCSS Output Example**color**Color picker with RGB/HEX support`--color: 255, 0, 0` (RGB) or `--color: #ff0000` (HEX)**text**Single line input`--width: 1280px`**textarea**Multi-line text input`--content: "text..."`**number**Numeric input`--columns: 4`**range**Slider control`--opacity: 0.8`**select**Dropdown selector`--variant: primary`**checkbox**Multiple selectionJSON data**toggle**On/Off switch`--enabled: 1` or `0`**font\_picker**Font selector`--font: "Georgia", serif`**color\_scheme**Predefined color schemesMultiple CSS vars**icon\_set\_picker**Icon set selector`--icon-set: fontawesome`**spacing**4-sided control`--padding: 20px` or `10px 20px`**image\_upload**Image upload`--logo: url(...)`**code**Code editorCSS/JS code**social\_links**Social media linksJSON data**repeater**Dynamic listsJSON data for JS**Color Format Support:** - **Breeze 2.0 themes** use RGB format: `--color: 255, 0, 0` - **Breeze 3.0 themes** use HEX format: `--color: #ff0000` - Format is auto-detected from default value or set explicitly via `format` field **See full documentation:** ๐Ÿ”Œ GraphQL API Example --------------------- [](#-graphql-api-example) The module provides a comprehensive GraphQL API for programmatic access: ``` query { breezeThemeEditorConfig(storeId: 1, status: DRAFT) { version sections { code label fields { code label type value default format cssVar } } palettes { id label groups { colors { id label value cssVar format } } } } } ``` **API Features:** - 10 Query operations (config, values, publications, presets, etc.) - 9 Mutation operations (save, publish, rollback, import/export, etc.) - Full support for draft/publish workflow - Publication history with changelog tracking **See full API documentation:** ๐ŸŽจ Color Format Support (Breeze 2.0 vs 3.0) ------------------------------------------ [](#-color-format-support-breeze-20-vs-30) The Theme Editor supports both RGB and HEX color formats to ensure compatibility with different Breeze versions: ### RGB Format (Breeze 2.0) [](#rgb-format-breeze-20) ``` { "id": "primary_color", "type": "color", "default": "25, 121, 195", "format": "rgb", "css_var": "--primary-color" } ``` **CSS output:** `--primary-color: 25, 121, 195` **Usage:** `background: rgb(var(--primary-color))` ### HEX Format (Breeze 3.0) [](#hex-format-breeze-30) ``` { "id": "primary_color", "type": "color", "default": "#1979c3", "format": "hex", "css_var": "--primary-color" } ``` **CSS output:** `--primary-color: #1979c3` **Usage:** `background: var(--primary-color)` ### Auto-Detection [](#auto-detection) If `format` is not specified, the Theme Editor automatically detects the format from the default value: - Contains comma โ†’ RGB format - Starts with `#` โ†’ HEX format - Contains `rgb()` wrapper โ†’ RGB format (wrapper is removed) **Note:** The GraphQL API includes the `format` field for all color values. ### 4. Enable and Access [](#4-enable-and-access) 1. **Enable in Admin:** - Go to: **Stores > Configuration > Swissup > Breeze Theme Editor** - Select **Yes** and save 2. **Access Theme Editor:** - Click **"Open Frontend in Theme Editor Mode"** button in admin config - Or use URL: `https://your-store.com/?breeze_theme_editor_access_token=YOUR_TOKEN` - Access token is valid for 3 hours 3. **Make Changes:** - Panel appears on the right side - Edit values with live preview - Click **Save Draft** or **Publish** ๐Ÿ“ฆ Installation -------------- [](#-installation) ### Via Composer (Recommended) [](#via-composer-recommended) ``` composer require swissup/module-breeze-theme-editor php bin/magento module:enable Swissup_BreezeThemeEditor php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/magento cache:flush ``` ### Manual Installation [](#manual-installation) 1. Download the module 2. Extract files to `app/code/Swissup/BreezeThemeEditor` 3. Run the following commands: ``` php bin/magento module:enable Swissup_BreezeThemeEditor php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy php bin/magento cache:flush ``` ๐Ÿงช Running Tests --------------- [](#-running-tests) This module includes comprehensive test coverage: - **Backend Tests:** 25+ PHPUnit tests for PHP code - **Frontend Tests:** 24 JavaScript tests for UI components ### Backend PHP Tests [](#backend-php-tests) **Using Docker (Recommended):** ``` cd /path/to/magento/root/src bin/clinotty bash -c "cd vendor/swissup/module-breeze-theme-editor && ../../bin/phpunit" ``` **Using PHPUnit directly:** ``` cd vendor/swissup/module-breeze-theme-editor ../../bin/phpunit ``` **Run specific test file:** ``` ../../bin/phpunit Test/Unit/Model/Service/CssGeneratorTest.php ``` ### Frontend JavaScript Tests [](#frontend-javascript-tests) Access the browser-based test runner: ``` http://your-store.com/?jstest=1&autorun=1 ``` **URL Parameters:** - `jstest=1` - Enable test mode - `autorun=1` - Automatically run all tests on page load - `suite=` - Run specific test suite only **For complete testing documentation, see [README-TESTS.md](README-TESTS.md)** ๐Ÿ“‹ Requirements -------------- [](#-requirements) - Magento 2.4.x or higher - PHP 7.4, 8.0, 8.1, or 8.2 - Breeze Frontend (v2.0+ for RGB format, v3.0+ for HEX format) ๐Ÿค Contributing -------------- [](#-contributing) Contributions are welcome! Please: 1. Fork the repository 2. Create a feature branch 3. Add tests for new features 4. Submit a pull request ๐Ÿ“„ License --------- [](#-license) OSL-3.0 ๐Ÿ’ฌ Support --------- [](#-support) - **Documentation:** - **Issues:** [GitHub Issues](https://github.com/breezefront/module-breeze-theme-editor/issues) - **Source Code:** [GitHub Repository](https://github.com/breezefront/module-breeze-theme-editor) ๐Ÿ”— Links ------- [](#-links) - [Breeze Frontend](https://breezefront.com/) - Lightning-fast Magento 2 theme - [Swissup Extensions](https://swissuplabs.com/) - Premium Magento extensions ### Health Score 36 โ€” LowBetter than 81% of packages Maintenance93 Actively maintained with recent releases Popularity2 Limited adoption so far Community10 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 98.6% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~48 days Total 2 Last Release 46d ago Major Versions 0.1.0 โ†’ 1.0.0-beta.12026-03-24 ### Community Maintainers ![](https://www.gravatar.com/avatar/1108bccc259ec1b0fc93f04a182965faf1213460894ee297f1acf3482e3296ac?d=identicon)[vovayatsyuk](/maintainers/vovayatsyuk) --- Top Contributors [![0m3r](https://avatars.githubusercontent.com/u/412612?v=4)](https://github.com/0m3r "0m3r (631 commits)")[![roma84](https://avatars.githubusercontent.com/u/2668851?v=4)](https://github.com/roma84 "roma84 (5 commits)")[![vovayatsyuk](https://avatars.githubusercontent.com/u/306080?v=4)](https://github.com/vovayatsyuk "vovayatsyuk (3 commits)")[![rommmka](https://avatars.githubusercontent.com/u/1327047?v=4)](https://github.com/rommmka "rommmka (1 commits)") ### Embed Badge ![Health badge](/badges/swissup-module-breeze-theme-editor/health.svg) ``` [![Health](https://phpackages.com/badges/swissup-module-breeze-theme-editor/health.svg)](https://phpackages.com/packages/swissup-module-breeze-theme-editor) ``` ### Alternatives [fastly/magento2 Fastly CDN Module for Magento 2.4.x 1564.2M1](/packages/fastly-magento2)[mage-os/module-automatic-translation Automatic AI content translation for Mage-OS. 277.1k](/packages/mage-os-module-automatic-translation)[zepgram/module-rest Technical module to industrialize API REST call with dependency injection pattern using Guzzle library 1326.2k](/packages/zepgram-module-rest)[graycore/magento2-graphql-introspection-cache 1015.2k](/packages/graycore-magento2-graphql-introspection-cache)[mage-os/mageos-common-async-events Send REST requests to external endpoints asynchronously. This module implements the most common events like order creation and customer change. 147.7k2](/packages/mage-os-mageos-common-async-events)[mage-os/module-inventory-reservations-grid Add a grid with the list of inventory reservations. 126.8k](/packages/mage-os-module-inventory-reservations-grid) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)