← All posts

Tutorials

Canva tweaks — a bigger editor and less noise

18 May 2026 · by JustZix Team

Canva is great for quick graphics, but its interface is full of prompts to buy the Pro plan, template promotions and side panels that steal room from the canvas. This guide shows how to reshape canva.com with a few CSS and JS rules in JustZix — hide the upsell, enlarge the work area and calm the editor view.

What distracts in Canva

The Canva editor surrounds the canvas with several layers: a left panel of elements and templates, a top bar, upgrade banners and "Try Pro" / "Recommended templates" inserts. JustZix runs locally inside the tab — a CSS rule hides an element, a JS rule can remove it from the DOM or tone down how loud it is. Nothing leaves your browser, and every tweak is pinned to canva.com and toggled with one click.

Hide Pro banners and upsell

Prompts to buy the Pro plan show up in the top bar, at the bottom of the left panel and as standalone cards. You can hide them with a CSS rule targeting the upgrade components:

/* Hide "Try Canva Pro" banners and buttons */
[data-testid*="upgrade"],
[data-testid*="pro-badge"],
button[aria-label*="Try Canva Pro"],
a[href*="/pro/"] {
  display: none !important;
}

/* Promo strip at the top of the editor */
div[class*="upsell"],
div[class*="UpgradeBanner"] {
  display: none !important;
}

If the banner appears only after a moment, a short JS rule removes it after lazy-loading too:

// Remove upsell banners, including lazy-loaded ones
function dropUpsell() {
  document.querySelectorAll(
    '[data-testid*="upgrade"], div[class*="upsell"]'
  ).forEach(el => el.remove());
}
dropUpsell();
new MutationObserver(dropUpsell).observe(
  document.body, { childList: true, subtree: true }
);

Cut the template promos

In the left panel Canva mixes your projects with "Recommended templates" and "Popular" carousels. When you work on a specific project those sections only get in the way:

/* Hide promoted template carousels */
section[aria-label*="Recommended"],
section[aria-label*="templates for you"],
div[data-testid*="template-recommendation"] {
  display: none !important;
}

Enlarge the editor canvas

By default the left panel takes a fixed, wide column. Narrowing it hands room back to the canvas — exactly what you are working on:

/* Narrower left panel, bigger canvas */
div[class*="ObjectPanel"],
div[class*="side-panel"] {
  width: 240px !important;
  min-width: 240px !important;
}

/* Let the canvas area take the freed space */
div[class*="EditorCanvas"],
main[class*="editor"] {
  margin-left: 0 !important;
}

Focus mode — canvas only

When you want to work with no distractions, a single rule can hide the top bar and left panel, leaving just the canvas with a minimal frame:

/* Focus mode: the canvas only */
header[class*="Toolbar"],
div[class*="side-panel"],
nav[class*="ObjectPanel"] {
  display: none !important;
}

/* Center the canvas at full width */
div[class*="EditorCanvas"] {
  margin: 0 auto !important;
}

Calm the UI and improve panel readability

Labels in Canva side panels can be small and low-contrast. A CSS rule can enlarge and strengthen them, while a JS rule tones down the loud accents:

/* More readable text in the panels */
div[class*="side-panel"] *,
div[class*="ObjectPanel"] * {
  font-size: 14px !important;
  color: #1a1a2e !important;
}

// Tone down loud badges and promo accents
document.querySelectorAll(
  '[data-testid*="pro-badge"], span[class*="badge"]'
).forEach(el => {
  el.style.filter = 'grayscale(1)';
  el.style.opacity = '0.65';
});

Build your own set

Keep these tweaks as separate, named rules — "Canva: no upsell", "Canva: bigger canvas", "Canva: focus mode" — each pinned to canva.com. Then in a few seconds you fit the editor to the task.

Ready-made rules for Canva are in the catalog — see the examples for canva.com and copy whatever fits. Install JustZix and declutter your editor today.