What people use JustZix for

For whom: Freelancer, agency, consultant.

Problem: Each client has their own admin panel, dashboard or staging that needs slight tweaks — different colors, hidden buttons, dev banners. Switching constantly is annoying.

Solution: Each project has its own folder with its own URL pattern. Switch entire client tweaks with one click on the floating button — or auto-toggle by URL.

For whom: Anyone working on staging environments where the UI looks the same as production.

Problem: You did a destructive action thinking you were on staging when in fact it was production. Happens to everyone.

Solution: Set a folder with URL pattern *staging* or your dev domain. Inject a red banner across the top of every page. Add auto-login JS so you do not have to type credentials.

/* CSS — DEV banner */
body::before {
  content: "DEV ENVIRONMENT";
  position: fixed; top: 0; left: 0; right: 0;
  background: #dc2626; color: white;
  text-align: center; padding: 4px;
  font-weight: bold; z-index: 999999;
  font-family: monospace;
}
body { padding-top: 28px !important; }

For whom: Tester, PM, designer — non-developers who need to set up test data quickly.

Problem: Filling out the same registration form 30 times to test a flow — fingers hurt. Asking devs for "magic links" — wastes their time.

Solution: Create action buttons: FILL (auto-fill test data), CART (add product to cart), CLR (clear form), STATE (set widget to specific state). One click on the action panel = same action repeated 100 times.

// Action 'FILL' — fill test data
const data = {
  email: 'test@example.com',
  phone: '600000000',
  firstName: 'John', lastName: 'Tester'
};
Object.keys(data).forEach(name => {
  const el = document.querySelector(`[name="${name}"]`);
  if (el) {
    el.value = data[name];
    el.dispatchEvent(new Event('input', { bubbles: true }));
    el.dispatchEvent(new Event('change', { bubbles: true }));
  }
});

For whom: Anyone who reads documentation, blogs, news sites.

Problem: Site has tiny text, low contrast, intrusive ads, paywalls, cookie banners that overlay content. The original author is not coming to fix it.

Solution: Hide ads/banners, increase text size, add reading mode. Works on any site — no need for the author's permission. Sync your tweaks across devices automatically.

/* Hide common ad and tracker elements */
.ad, .ads, .advertisement,
.banner-ad, [class*="ad-banner"],
[id*="google_ads"],
.cookie-banner, #cookie-notice {
  display: none !important;
}

For whom: Developer, marketing analyst, e-commerce.

Problem: You need to verify that dataLayer.push events fire at the right moment with the right payload. Adding console.log to production code is taboo.

Solution: Inject JS that wraps dataLayer.push and gtag with logging — without touching the site's code. Visible in DevTools, removable with one click.

// Log all GTM dataLayer pushes
const origPush = window.dataLayer?.push;
if (origPush) {
  window.dataLayer.push = function(...args) {
    console.log('%c[GTM]',
      'color:#16a34a;font-weight:bold', args);
    return origPush.apply(window.dataLayer, args);
  };
}

For whom: Anyone using a CMS or back-office daily — Wordpress admin, Magento admin, custom panels.

Problem: Admin panels are usually built for everyone — the columns are too narrow, table headers do not stick when you scroll, you can't see at a glance what is what.

Solution: CSS fixing tables, lists, forms. Sticky headers, larger font sizes, alternating row colors. Action buttons for repeated tasks ("Test filter", "Reset view").

/* Make admin tables more readable */
table.admin-list td, table.admin-list th {
  padding: 8px 12px !important;
  font-size: 14px !important;
}
table.admin-list thead {
  position: sticky; top: 0;
  background: white; z-index: 10;
}
table.admin-list tbody tr:nth-child(odd) {
  background: #f9fafb;
}

For whom: Anyone who needs to "look around" production without the risk of changing something.

Problem: Production has an emergency, you need to investigate. One wrong click on "Delete" or "Send" and the situation is worse.

Solution: Action button RO ("read-only") that hides all "Delete", "Save", "Send" buttons. One click — you can browse without the risk of accidental damage. Another click — restore.

// Action 'RO' — hide all destructive buttons
document.querySelectorAll(
  'button[type="submit"], .delete-btn, .danger-btn, [class*="delete"]'
).forEach(b => b.style.display = 'none');
console.warn('READ-ONLY MODE enabled');