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(1mo ago)01↑2900%OSL-3.0JavaScriptPHP ^7.4|^8.0|^8.1|^8.2

Since Feb 4Pushed todayCompare

[ 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 today

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 &gt; Configuration &gt; Swissup &gt; 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

37

—

LowBetter than 84% of packages

Maintenance96

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

0d 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

[yireo/magento2-webp2

Magento 2 module to add WebP support to the Magento frontend

2091.2M7](/packages/yireo-magento2-webp2)[mageworx/module-searchsuiteautocomplete

Search Suite Autocomplete extension by MageWorx for Magento 2

34290.7k1](/packages/mageworx-module-searchsuiteautocomplete)[smile/module-store-delivery

Smile Store Delivery

23344.3k1](/packages/smile-module-store-delivery)[kiwicommerce/module-customer-password

Magento 2 - Customer Password

1355.9k](/packages/kiwicommerce-module-customer-password)[developersalliance/module-table-rates

This module allows administrators to manage and view shipping table rates from the admin UI.

443.0k](/packages/developersalliance-module-table-rates)[magenerds/richsnippet

This module provides rich snippet functionality

1024.8k](/packages/magenerds-richsnippet)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
