BricksBuilder

• Custom Theme für das BricksBuilder UI
• New Page
• Browser
• Recherche: Bester Browser für Web Development mit BricksBuilder

Custom Theme für das BricksBuilder UI

New Page

I'll quickly verify the full list of Bricks Builder custom-theme CSS variables so the themes are complete, then write them.
Verified against the official Bricks docs — the variable list you posted is the complete Bricks 2.x starter set, so every theme below overrides all of them (nothing left inheriting light values).

How to use

1. Bricks → Settings → Builder → Builder Mode → Custom → Save.
2. Paste one file's contents into the Builder Mode (Custom) code field → Save.
3. Reload the builder.

Only one [data-builder-mode=custom] block can be active at a time, so keep these as separate files and swap the one you want.

The set

File	Vibe	Accent
warm.css	Coffee/ember dark, low blue light	Amber #f0a04b
purple.css	Deep violet, matches your light theme's accent	Violet #b47cff
midnight.css	Navy blue-black	Blue #4d8dff
forest.css	Dark moss green	Green #56d17a
ocean.css	Deep teal	Cyan #2fd4d4
carbon.css	Neutral grey, no color cast	Blue #4c9aff
oled.css	True-black monochrome, max contrast	White #f4f4f5
rose.css	Dark plum / rose	Pink #ff6f9c
cyberpunk.css	Near-black + neon	Neon cyan #00f0ff
dracula.css	Dracula palette	#bd93f9
nord.css	Nord palette, soft & muted	#88c0d0
gruvbox.css	Retro warm-earth	#fabd2f
tokyo-night.css	Tokyo Night	#7aa2f7
catppuccin-mocha.css	Catppuccin Mocha, pastel	#cba6f7
solarized-dark.css	Solarized Dark	#268bd2

---

warm.css

/* Warm — coffee & ember dark. Low blue-light, easy on the eyes at night. */
[data-builder-mode=custom] {
  --builder-bg: #16130f;
  --builder-bg-2: #1e1a15;
  --builder-bg-3: #29231a;
  --builder-bg-4: #372f23;
  --builder-bg-accent: #3a2410;

  --builder-color: #f6f0e6;
  --builder-color-description: #b09a7d;
  --builder-color-accent: #f0a04b;
  --builder-color-accent-inverse: #1a1206;

  --builder-color-knob: #7a6a55;
  --builder-border-color: #33291f;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7cc3f0;
  --builder-bg-class: #16293a;
  --builder-color-component: #c9a2f5;
  --builder-bg-component: #2a1f3d;
  --builder-color-info: #64b6e8;
  --builder-bg-info: #13293a;
  --builder-color-danger: #ff8a80;
  --builder-bg-danger: #3a1714;
  --builder-color-success: #6ede9f;
  --builder-bg-success: #10301f;
  --builder-color-muted: #9c8c78;
  --builder-bg-muted: #262019;

  --builder-canvas-scrollbar-thumb: #4a3f31;
  --builder-canvas-scrollbar-thumb_hover: #7a6a55;
  --builder-canvas-scrollbar-track: #1e1a15;

  --bricks-tooltip-bg: #f6f0e6;
  --bricks-tooltip-text: #16130f;
}

purple.css

/* Purple — deep violet dark. Dark counterpart to the default custom theme. */
[data-builder-mode=custom] {
  --builder-bg: #120f1c;
  --builder-bg-2: #191428;
  --builder-bg-3: #221b35;
  --builder-bg-4: #2f2447;
  --builder-bg-accent: #2b1152;

  --builder-color: #f1ecff;
  --builder-color-description: #a294c6;
  --builder-color-accent: #b47cff;
  --builder-color-accent-inverse: #16091f;

  --builder-color-knob: #6e5f96;
  --builder-border-color: #2a2240;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #79c0ff;
  --builder-bg-class: #13253a;
  --builder-color-component: #d0a8ff;
  --builder-bg-component: #2d1a4d;
  --builder-color-info: #7cb8ff;
  --builder-bg-info: #142440;
  --builder-color-danger: #ff8b9a;
  --builder-bg-danger: #3b1420;
  --builder-color-success: #74e2ad;
  --builder-bg-success: #103024;
  --builder-color-muted: #9186ad;
  --builder-bg-muted: #241e33;

  --builder-canvas-scrollbar-thumb: #443a63;
  --builder-canvas-scrollbar-thumb_hover: #6e5f96;
  --builder-canvas-scrollbar-track: #191428;

  --bricks-tooltip-bg: #efe9ff;
  --bricks-tooltip-text: #120f1c;
}

midnight.css

/* Midnight — navy blue-black. */
[data-builder-mode=custom] {
  --builder-bg: #0b1020;
  --builder-bg-2: #111832;
  --builder-bg-3: #17203c;
  --builder-bg-4: #212c50;
  --builder-bg-accent: #10294f;

  --builder-color: #e8eefc;
  --builder-color-description: #8b9bc2;
  --builder-color-accent: #4d8dff;
  --builder-color-accent-inverse: #061024;

  --builder-color-knob: #5a6b96;
  --builder-border-color: #1f2848;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #6fd3ff;
  --builder-bg-class: #0d2e42;
  --builder-color-component: #b899ff;
  --builder-bg-component: #241f4a;
  --builder-color-info: #71b7ff;
  --builder-bg-info: #10294f;
  --builder-color-danger: #ff8497;
  --builder-bg-danger: #35141f;
  --builder-color-success: #63dfa8;
  --builder-bg-success: #0c3026;
  --builder-color-muted: #7f8db0;
  --builder-bg-muted: #1a2138;

  --builder-canvas-scrollbar-thumb: #33406b;
  --builder-canvas-scrollbar-thumb_hover: #5a6b96;
  --builder-canvas-scrollbar-track: #111832;

  --bricks-tooltip-bg: #e8eefc;
  --bricks-tooltip-text: #0b1020;
}

forest.css

/* Forest — dark moss green. */
[data-builder-mode=custom] {
  --builder-bg: #0d140f;
  --builder-bg-2: #131c15;
  --builder-bg-3: #1a261d;
  --builder-bg-4: #243428;
  --builder-bg-accent: #123423;

  --builder-color: #e9f2e9;
  --builder-color-description: #8fa891;
  --builder-color-accent: #56d17a;
  --builder-color-accent-inverse: #06170d;

  --builder-color-knob: #5c7460;
  --builder-border-color: #1f2c22;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7fc7e8;
  --builder-bg-class: #132b36;
  --builder-color-component: #c3a4ee;
  --builder-bg-component: #262039;
  --builder-color-info: #6fbfd6;
  --builder-bg-info: #122c33;
  --builder-color-danger: #ff8a7a;
  --builder-bg-danger: #341813;
  --builder-color-success: #7ee08d;
  --builder-bg-success: #13301c;
  --builder-color-muted: #86977f;
  --builder-bg-muted: #1c241d;

  --builder-canvas-scrollbar-thumb: #35452f;
  --builder-canvas-scrollbar-thumb_hover: #5c7460;
  --builder-canvas-scrollbar-track: #131c15;

  --bricks-tooltip-bg: #e9f2e9;
  --bricks-tooltip-text: #0d140f;
}

ocean.css

/* Ocean — deep teal. */
[data-builder-mode=custom] {
  --builder-bg: #08181c;
  --builder-bg-2: #0d2126;
  --builder-bg-3: #122c33;
  --builder-bg-4: #1a3c45;
  --builder-bg-accent: #0c3b45;

  --builder-color: #e4f4f6;
  --builder-color-description: #85a8ad;
  --builder-color-accent: #2fd4d4;
  --builder-color-accent-inverse: #04191b;

  --builder-color-knob: #4e767c;
  --builder-border-color: #17323a;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7fc4ff;
  --builder-bg-class: #10293f;
  --builder-color-component: #bba6ff;
  --builder-bg-component: #221f42;
  --builder-color-info: #5fd0e8;
  --builder-bg-info: #0c333d;
  --builder-color-danger: #ff8b8b;
  --builder-bg-danger: #37181a;
  --builder-color-success: #5fe0b0;
  --builder-bg-success: #0c3329;
  --builder-color-muted: #7d989c;
  --builder-bg-muted: #142529;

  --builder-canvas-scrollbar-thumb: #2c4d55;
  --builder-canvas-scrollbar-thumb_hover: #4e767c;
  --builder-canvas-scrollbar-track: #0d2126;

  --bricks-tooltip-bg: #e4f4f6;
  --bricks-tooltip-text: #08181c;
}

carbon.css

/* Carbon — neutral grey dark, zero color cast. Best for judging client colors. */
[data-builder-mode=custom] {
  --builder-bg: #121212;
  --builder-bg-2: #1a1a1a;
  --builder-bg-3: #242424;
  --builder-bg-4: #303030;
  --builder-bg-accent: #16283b;

  --builder-color: #ededed;
  --builder-color-description: #9a9a9a;
  --builder-color-accent: #4c9aff;
  --builder-color-accent-inverse: #08131f;

  --builder-color-knob: #5c5c5c;
  --builder-border-color: #2b2b2b;
  --builder-placeholder-opacity: .38;

  --builder-color-class: #6cb6ff;
  --builder-bg-class: #16283b;
  --builder-color-component: #c0a0ff;
  --builder-bg-component: #26204a;
  --builder-color-info: #6cb6ff;
  --builder-bg-info: #16283b;
  --builder-color-danger: #ff8a80;
  --builder-bg-danger: #3a1c1a;
  --builder-color-success: #6bdf9a;
  --builder-bg-success: #14301f;
  --builder-color-muted: #8c8c8c;
  --builder-bg-muted: #202020;

  --builder-canvas-scrollbar-thumb: #3d3d3d;
  --builder-canvas-scrollbar-thumb_hover: #5c5c5c;
  --builder-canvas-scrollbar-track: #1a1a1a;

  --bricks-tooltip-bg: #ededed;
  --bricks-tooltip-text: #121212;
}

oled.css

/* OLED — true black, monochrome UI, colored status only. Max contrast. */
[data-builder-mode=custom] {
  --builder-bg: #000000;
  --builder-bg-2: #0a0a0a;
  --builder-bg-3: #141414;
  --builder-bg-4: #1f1f1f;
  --builder-bg-accent: #1c1c1c;

  --builder-color: #fafafa;
  --builder-color-description: #8f8f8f;
  --builder-color-accent: #f4f4f5;
  --builder-color-accent-inverse: #000000;

  --builder-color-knob: #3f3f46;
  --builder-border-color: #232326;
  --builder-placeholder-opacity: .35;

  --builder-color-class: #5eb0ff;
  --builder-bg-class: #0d1c2b;
  --builder-color-component: #b98cff;
  --builder-bg-component: #1a1230;
  --builder-color-info: #5eb0ff;
  --builder-bg-info: #0d1c2b;
  --builder-color-danger: #ff7a70;
  --builder-bg-danger: #2b0f0d;
  --builder-color-success: #4ede8f;
  --builder-bg-success: #082418;
  --builder-color-muted: #808080;
  --builder-bg-muted: #171717;

  --builder-canvas-scrollbar-thumb: #2e2e2e;
  --builder-canvas-scrollbar-thumb_hover: #565656;
  --builder-canvas-scrollbar-track: #0a0a0a;

  --bricks-tooltip-bg: #fafafa;
  --bricks-tooltip-text: #000000;
}

rose.css

/* Rose — dark plum with rose accents. */
[data-builder-mode=custom] {
  --builder-bg: #171014;
  --builder-bg-2: #1f151b;
  --builder-bg-3: #2b1d24;
  --builder-bg-4: #3a2731;
  --builder-bg-accent: #45142b;

  --builder-color: #f8ecf1;
  --builder-color-description: #bd94a4;
  --builder-color-accent: #ff6f9c;
  --builder-color-accent-inverse: #1b0a12;

  --builder-color-knob: #7d5b68;
  --builder-border-color: #33222b;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #86c5ef;
  --builder-bg-class: #172a38;
  --builder-color-component: #cfa6f7;
  --builder-bg-component: #2b1c3d;
  --builder-color-info: #79bce0;
  --builder-bg-info: #162a36;
  --builder-color-danger: #ff8f84;
  --builder-bg-danger: #3d1a19;
  --builder-color-success: #74dfa6;
  --builder-bg-success: #123024;
  --builder-color-muted: #a08792;
  --builder-bg-muted: #241a1f;

  --builder-canvas-scrollbar-thumb: #4b3340;
  --builder-canvas-scrollbar-thumb_hover: #7d5b68;
  --builder-canvas-scrollbar-track: #1f151b;

  --bricks-tooltip-bg: #f8ecf1;
  --bricks-tooltip-text: #17101
4;
}

⚠️ Fix in rose.css: the last value must be #17101 4 → #171014 (no line break). Corrected line:

  --bricks-tooltip-text: #171014;

cyberpunk.css

/* Cyberpunk — near-black with neon accents. High energy, high contrast. */
[data-builder-mode=custom] {
  --builder-bg: #0a0a0f;
  --builder-bg-2: #101019;
  --builder-bg-3: #171725;
  --builder-bg-4: #212134;
  --builder-bg-accent: #08333d;

  --builder-color: #eef0ff;
  --builder-color-description: #8b8bb0;
  --builder-color-accent: #00f0ff;
  --builder-color-accent-inverse: #001215;

  --builder-color-knob: #4a4a70;
  --builder-border-color: #22223a;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #00f0ff;
  --builder-bg-class: #08333d;
  --builder-color-component: #ff2bd6;
  --builder-bg-component: #350c2d;
  --builder-color-info: #33c9ff;
  --builder-bg-info: #0a2b3d;
  --builder-color-danger: #ff3860;
  --builder-bg-danger: #350d18;
  --builder-color-success: #39ff88;
  --builder-bg-success: #06341d;
  --builder-color-muted: #6b6b8a;
  --builder-bg-muted: #1a1a28;

  --builder-canvas-scrollbar-thumb: #2e2e4a;
  --builder-canvas-scrollbar-thumb_hover: #00f0ff;
  --builder-canvas-scrollbar-track: #101019;

  --bricks-tooltip-bg: #eef0ff;
  --bricks-tooltip-text: #0a0a0f;
}

dracula.css

/* Dracula — official Dracula palette. */
[data-builder-mode=custom] {
  --builder-bg: #21222c;
  --builder-bg-2: #282a36;
  --builder-bg-3: #343746;
  --builder-bg-4: #44475a;
  --builder-bg-accent: #3b2c52;

  --builder-color: #f8f8f2;
  --builder-color-description: #8b95c4;
  --builder-color-accent: #bd93f9;
  --builder-color-accent-inverse: #21222c;

  --builder-color-knob: #6272a4;
  --builder-border-color: #3b3d4d;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #8be9fd;
  --builder-bg-class: #1e3540;
  --builder-color-component: #ff79c6;
  --builder-bg-component: #40213a;
  --builder-color-info: #8be9fd;
  --builder-bg-info: #1e3540;
  --builder-color-danger: #ff5555;
  --builder-bg-danger: #3d1c22;
  --builder-color-success: #50fa7b;
  --builder-bg-success: #17371f;
  --builder-color-muted: #6272a4;
  --builder-bg-muted: #2b2e3c;

  --builder-canvas-scrollbar-thumb: #44475a;
  --builder-canvas-scrollbar-thumb_hover: #6272a4;
  --builder-canvas-scrollbar-track: #282a36;

  --bricks-tooltip-bg: #f8f8f2;
  --bricks-tooltip-text: #282a36;
}

nord.css

/* Nord — soft, low-saturation arctic palette. Easiest on the eyes long-term. */
[data-builder-mode=custom] {
  --builder-bg: #242933;
  --builder-bg-2: #2e3440;
  --builder-bg-3: #3b4252;
  --builder-bg-4: #434c5e;
  --builder-bg-accent: #2e4355;

  --builder-color: #eceff4;
  --builder-color-description: #9aa5b8;
  --builder-color-accent: #88c0d0;
  --builder-color-accent-inverse: #22272f;

  --builder-color-knob: #4c566a;
  --builder-border-color: #3b4252;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #81a1c1;
  --builder-bg-class: #2b3a4a;
  --builder-color-component: #b48ead;
  --builder-bg-component: #3a2f3d;
  --builder-color-info: #88c0d0;
  --builder-bg-info: #26414c;
  --builder-color-danger: #bf616a;
  --builder-bg-danger: #3b2429;
  --builder-color-success: #a3be8c;
  --builder-bg-success: #2c3a2b;
  --builder-color-muted: #7b88a1;
  --builder-bg-muted: #333a48;

  --builder-canvas-scrollbar-thumb: #434c5e;
  --builder-canvas-scrollbar-thumb_hover: #6b7794;
  --builder-canvas-scrollbar-track: #2e3440;

  --bricks-tooltip-bg: #eceff4;
  --bricks-tooltip-text: #2e3440;
}

gruvbox.css

/* Gruvbox Dark — retro warm-earth palette. */
[data-builder-mode=custom] {
  --builder-bg: #1d2021;
  --builder-bg-2: #282828;
  --builder-bg-3: #32302f;
  --builder-bg-4: #3c3836;
  --builder-bg-accent: #402d20;

  --builder-color: #ebdbb2;
  --builder-color-description: #a89984;
  --builder-color-accent: #fabd2f;
  --builder-color-accent-inverse: #1d2021;

  --builder-color-knob: #665c54;
  --builder-border-color: #3c3836;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #83a598;
  --builder-bg-class: #2b3a38;
  --builder-color-component: #d3869b;
  --builder-bg-component: #3d2a30;
  --builder-color-info: #8ec07c;
  --builder-bg-info: #2a3628;
  --builder-color-danger: #fb4934;
  --builder-bg-danger: #3f1f1b;
  --builder-color-success: #b8bb26;
  --builder-bg-success: #2f3313;
  --builder-color-muted: #928374;
  --builder-bg-muted: #32302f;

  --builder-canvas-scrollbar-thumb: #504945;
  --builder-canvas-scrollbar-thumb_hover: #7c6f64;
  --builder-canvas-scrollbar-track: #282828;

  --bricks-tooltip-bg: #ebdbb2;
  --bricks-tooltip-text: #1d2021;
}

tokyo-night.css

/* Tokyo Night — cool indigo dark. */
[data-builder-mode=custom] {
  --builder-bg: #16161e;
  --builder-bg-2: #1a1b26;
  --builder-bg-3: #24283b;
  --builder-bg-4: #2f334d;
  --builder-bg-accent: #202b45;

  --builder-color: #c0caf5;
  --builder-color-description: #8189b3;
  --builder-color-accent: #7aa2f7;
  --builder-color-accent-inverse: #12131c;

  --builder-color-knob: #414868;
  --builder-border-color: #2a2e42;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #7dcfff;
  --builder-bg-class: #16303f;
  --builder-color-component: #bb9af7;
  --builder-bg-component: #2b2340;
  --builder-color-info: #7dcfff;
  --builder-bg-info: #16303f;
  --builder-color-danger: #f7768e;
  --builder-bg-danger: #3a1d27;
  --builder-color-success: #9ece6a;
  --builder-bg-success: #23331c;
  --builder-color-muted: #6b74a0;
  --builder-bg-muted: #232538;

  --builder-canvas-scrollbar-thumb: #343a5c;
  --builder-canvas-scrollbar-thumb_hover: #565f89;
  --builder-canvas-scrollbar-track: #1a1b26;

  --bricks-tooltip-bg: #c0caf5;
  --bricks-tooltip-text: #1a1b26;
}

catppuccin-mocha.css

/* Catppuccin Mocha — pastel dark, gentle contrast. */
[data-builder-mode=custom] {
  --builder-bg: #181825;
  --builder-bg-2: #1e1e2e;
  --builder-bg-3: #313244;
  --builder-bg-4: #45475a;
  --builder-bg-accent: #2c2440;

  --builder-color: #cdd6f4;
  --builder-color-description: #9399b2;
  --builder-color-accent: #cba6f7;
  --builder-color-accent-inverse: #1e1e2e;

  --builder-color-knob: #585b70;
  --builder-border-color: #313244;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #89b4fa;
  --builder-bg-class: #1e2a44;
  --builder-color-component: #f5c2e7;
  --builder-bg-component: #3b2438;
  --builder-color-info: #89dceb;
  --builder-bg-info: #17313a;
  --builder-color-danger: #f38ba8;
  --builder-bg-danger: #3a1f28;
  --builder-color-success: #a6e3a1;
  --builder-bg-success: #1f331e;
  --builder-color-muted: #7f849c;
  --builder-bg-muted: #292a3d;

  --builder-canvas-scrollbar-thumb: #45475a;
  --builder-canvas-scrollbar-thumb_hover: #6c7086;
  --builder-canvas-scrollbar-track: #1e1e2e;

  --bricks-tooltip-bg: #cdd6f4;
  --bricks-tooltip-text: #1e1e2e;
}

solarized-dark.css

/* Solarized Dark — classic low-contrast blue-green base. */
[data-builder-mode=custom] {
  --builder-bg: #001f27;
  --builder-bg-2: #002b36;
  --builder-bg-3: #073642;
  --builder-bg-4: #0f4552;
  --builder-bg-accent: #04384f;

  --builder-color: #eee8d5;
  --builder-color-description: #93a1a1;
  --builder-color-accent: #268bd2;
  --builder-color-accent-inverse: #ffffff;

  --builder-color-knob: #586e75;
  --builder-border-color: #0b3f4c;
  --builder-placeholder-opacity: .4;

  --builder-color-class: #2aa198;
  --builder-bg-class: #04353a;
  --builder-color-component: #8f93d8;
  --builder-bg-component: #23253f;
  --builder-color-info: #268bd2;
  --builder-bg-info: #052f45;
  --builder-color-danger: #dc322f;
  --builder-bg-danger: #3a1413;
  --builder-color-success: #a5b622;
  --builder-bg-success: #2a3006;
  --builder-color-muted: #839496;
  --builder-bg-muted: #08303a;

  --builder-canvas-scrollbar-thumb: #0f4552;
  --builder-canvas-scrollbar-thumb_hover: #586e75;
  --builder-canvas-scrollbar-track: #002b36;

  --bricks-tooltip-bg: #eee8d5;
  --bricks-tooltip-text: #002b36;
}

---

Notes & tips for rolling your own

• Surface ramp: --builder-bg is the darkest base, then -2, -3, -4 get progressively lighter (panels → inputs → hover/active). Keep 6–10% lightness steps or the UI flattens out.
• Tooltips invert: on dark themes set --bricks-tooltip-bg to your light text color and --bricks-tooltip-text to your base bg — that's why every file above flips them relative to your light example.
• --builder-color-accent-inverse is the text drawn on top of the accent. Bright/pastel accents (#fabd2f, #cba6f7, #00f0ff) need a dark inverse; deep saturated accents (#268bd2) need #fff.
• Placeholder opacity: .33 reads fine on light backgrounds but disappears on dark — .38–.4 is the sweet spot.
• Bricks caveat: in custom builder mode the Code element's editor switches to a light color scheme, regardless of how dark the rest of your theme is. Nothing in these variables changes that.
• Want a variant? Take any file, keep the status/class/component pairs, and only shift the four --builder-bg* values plus --builder-color-accent — that's 90% of a theme's identity.

Browser

Recherche: Bester Browser für Web Development mit BricksBuilder

Kurzfassung / Empfehlung

Es gibt keinen speziellen "Bricks-Builder-Browser", aber die Community und Performance-Tests zeigen ein klares Bild:

Einsatzzweck	Empfehlung
Bricks-Editor selbst (Backend, Drag&Drop, große Layouts)	Google Chrome oder Microsoft Edge – schlank eingerichtet, ohne Extensions, in eigenem Profil
Datenschutz + trotzdem performant	Brave (wird im offiziellen Bricks-Forum mehrfach als "läuft super mit Bricks" empfohlen)
Multi-Viewport / responsive Testing zusätzlich zum Editor	Polypane oder Sizzy – spezialisierte Dev-Browser
Standards-Check / Fallback bei Chrome-Bugs	Firefox

Der Grund: Bricks Builder ist im Backend eine React/JS-Single-Page-App mit viel DOM-Manipulation (Structure-Panel, Live-Preview-Iframe, Style-Panel-Reaktivität). Das bedeutet, die JS-Engine- und Rendering-Performance des Browsers ist entscheidend – und da liegt Chromium (Chrome, Edge, Brave, Vivaldi) klar vorne, weil V8 + Blink am optimiertesten für genau solche schweren SPA-Interfaces sind. Firefox ist standardkonform und stabil, aber bei sehr komplexen/verschachtelten Bricks-Seiten im Backend häufig spürbar langsamer laut Nutzerberichten im Forum.

Was das offizielle Bricks-Forum sagt

Im Thread "Which browser is better to work in on windows":

• Chrome frisst viel RAM
• Edge wurde als "läuft besser" beschrieben
• Brave wurde explizit gelobt: "Works great with Bricks and cares about your privacy"
• Firefox als Alternative für manche Workflows

Zusätzlich gibt es diverse Bug-Threads zu Performance-Problemen bei komplexen Seiten mit vielen Elementen ("Lag in the Builder when pages are complex", "Bricks slows browser to a freeze, uses insane RAM & CPU") – das ist aber primär ein DOM-Struktur-Problem von Bricks selbst, kein reines Browser-Problem.

⚠️ Wichtiger bekannter Bug: Chrome ab Version 135

Seit Chrome 135 gibt es ein neues natives Feature (appearance: base-select für <select>-Dropdowns, CSS-styleable Selects). Dieses Feature verursacht in Bricks + Advanced Themer nachweislich erhebliche Lags im Editor, weil die neue Rendering-Logik für Formularfelder mit der Bricks-Struktur kollidiert.

Fix/Workaround:

• In chrome://flags das entsprechende Select-Flag deaktivieren, oder
• Auf eine ältere Chrome-Version/Edge zurückgreifen, bis Bricks das gefixt hat
• Alternativ Brave nutzen (basiert auf Chromium, aber patcht solche experimentellen Blink-Features oft später/anders ein)

Spezialisierte "Dev-Browser" (deine Idee: super-schlank + Performance-fokussiert)

Es gibt tatsächlich genau das, was du suchst – allerdings nicht für den Bricks-Editor selbst, sondern für das Testen/Entwickeln der fertigen Website:

Polypane (polypane.app)

• Electron-App mit eingebautem Chromium
• Multi-Viewport-Preview (mehrere Breakpoints synchron), Accessibility-Checks, Design-Review-Tools
• Sehr gut für: Responsive-Testing deiner Bricks-Seiten, nicht für das Backend-Editing selbst

Sizzy (sizzy.co)

• "The Browser for Web Developers" – ähnliches Konzept wie Polypane
• Synchronisiertes Scrollen/Klicken über mehrere Device-Frames gleichzeitig
• Gut fürs schnelle visuelle Feintuning des Frontends

Wichtig zu wissen: Diese Tools sind selbst Electron-Wrapper um Chromium – sie sind also nicht "schlanker" oder performanter als reines Chrome/Chromium beim eigentlichen JS-Rendering. Sie bringen zusätzliche Features (Multi-View, Sync) mit, was für Layout-Testing extrem praktisch ist, aber für die reine Editor-Performance im Bricks-Backend selbst keinen Geschwindigkeitsvorteil bringt – im Gegenteil, durch die zusätzlichen Panels/Features kann es sogar mehr RAM verbrauchen.

Praktische Tipps für maximale Performance im Bricks-Editor (unabhängig vom Browser)

1. Eigenes, schlankes Browser-Profil nur für WP-Admin/Bricks anlegen – keine Extensions (Ad-Blocker, Passwort-Manager, Dark-Reader etc.), diese greifen oft ins DOM ein und verlangsamen den Editor massiv
2. Hardware-Beschleunigung in den Browser-Einstellungen aktiviert lassen (GPU-Rasterization)
3. DevTools geschlossen halten, wenn nicht gebraucht – offene DevTools kosten deutlich Performance
4. Cache regelmäßig leeren, besonders nach Bricks-Updates
5. Lokale Entwicklungsumgebung mit SSD + Object-Cache (z. B. Local, LocalWP, oder Docker) nutzen – oft ist die eigentliche Bremse der Server/DB, nicht der Browser
6. Bei sehr komplexen Seiten: Seiten in kleinere Templates/Header-Footer-Includes aufsplitten, um die DOM-Komplexität zu reduzieren (das eigentliche Kernproblem laut Bricks-Bugtracker)

Fazit

Für die reine Editor-Arbeit in Bricks Builder ist ein schlankes, extensionfreies Chrome-, Edge- oder Brave-Profil aktuell die beste Wahl – kein Spezial-Browser schlägt hier die native Chromium-Performance. Wenn du zusätzlich responsives Layout-Testing super effizient machen willst, lohnt sich Polypane oder Sizzy als Ergänzung (nicht als Ersatz) neben deinem Haupt-Editor-Browser.