CSS pane: a live CSS editor on any page, without DevTools
Standard CSS-experimentation workflow: open DevTools, click Elements, find the node, edit inline style, refresh — and it's all gone. JustZix v2.13.40+ has CSS pane — a floating textarea injected on the page with live <style> injection. You type CSS, you see the change in 200 ms, content persists across reloads in the tab. No DevTools, no F5.
What it actually is
A CSS pane is a small draggable window on the page (fixed, z-index 2147483640) with a header (coloured dot + name) and a textarea inside. Whatever you type goes through a 200 ms debounce into <style id="jz-pane-style-{id}"> in <head> — you immediately see the effect. Content lives in sessionStorage for that tab — refresh the page, content stays; close the tab, it's gone (intentional: a pane is a scratch pad, not persistent storage).
Your first pane in 30 seconds
- Open JustZix options → pick a folder, group or rule with URL matching.
- Click "CSS panes (0)" → modal with the list. Click "+ Add new CSS pane".
- Enter a name ("Test"), pick a dot colour — saved automatically.
- Visit a page matching the scope. In the top-right corner (default anchor) the pane appears.
- Type
body { background: red; }— the page background turns red after 200 ms.
Live preview — debounce and clearing
The 200 ms debounce exists so fast typing doesn't spam reflows. In practice it's imperceptible — after 0.2s the change is visible. To wipe all styles: clear the textarea. The pane internally writes an empty string to <style>, so clearing is instant too.
Selectors: write them the same way you would in a real rule. !important is often needed because the host site has its own styles. You use the pane mainly to test — once you like the result, copy the CSS into a real rule (CSS tab on a rule card) for permanent use.
Per-tab persistence (sessionStorage)
Everything you type lands in sessionStorage['jz_pane_{id}_content'] for the current tab. Consequences:
- F5 / in-tab navigation — content persists. The pane re-mounts, the textarea reads back from storage.
- New tab on the same scope — pane appears empty. Each tab is a separate scratch pad.
- Close the tab — content is gone. There's no "I accidentally lost half an hour of work" — closing = consciously discarding the scratchpad.
When you've made something you want to keep — move it to a regular CSS rule in options. The pane isn't a place to keep code long-term.
Multi-pane — 3 windows on one page
You can have any number of CSS panes in the same scope. Each is a separate <style> in head, each owns its content in sessionStorage. In practice:
- Pane 1: "Header overrides" — experiments with the top bar.
- Pane 2: "Hide ads" — different ad-blocking selector variants.
- Pane 3: "Form fixes" — input widths, label font sizes.
Each in a different dot colour (green, red, blue). Visually clear at a glance that you have 3 independent style sets.
Scope hierarchy (folder → group → rule)
A pane can be attached to a folder, group or rule:
| Scope | When the pane appears | Use case |
|---|---|---|
| Folder | URL matches folder.urlPatterns | Site-wide CSS experiments across the whole shop |
| Group | Folder match + group URL filter | Per-section experiments (e.g. checkout) |
| Rule | Folder + group + rule URL filter | Experiments on one specific page |
Inheritance: on a group view you see own panes + inherited from the folder. On a rule view — own + group + folder. Same as CSS/JS rules — full hierarchy.
Share with a colleague
Panes flow through the same sync mechanism as rules. Generate a share link → the recipient gets your panes too. Use case:
- A front-end consultant joins a client's shop, experiments in a "Header redesign" pane.
- Clicks "Share" — link valid for 24h.
- The client opens the link in their Chrome → imports → the "Header redesign" pane shows up for them.
- The client sees the result on their tab. Approves? The consultant copies the pane content into a permanent CSS rule.
Pitfalls
- sessionStorage may be blocked (sandboxed iframe, private mode, etc.) — content won't persist, but live injection still works.
- The CSS pane is not CodeMirror — plain textarea, no syntax highlighting in the MVP. CodeMirror upgrade is planned, but it's enough for scratchpad use.
- The pane can cover important page elements — drag it by the header to another corner. Position persists per browser window (chrome.storage), so other tabs remember.
- 3+ panes on a small viewport can overlap. Snap connections (drag one pane onto another) create a "group" — move one, the group follows.
What's next
The CSS pane is the first of 4 "windows on the frontend" types in JustZix. The next two are JS pane (Run-on-demand JavaScript) and JS Console (REPL with ↑↓ history). We've written about them in separate posts.
Install JustZix and stop keeping DevTools open just to drop in the occasional selector.
Rate this post
No ratings yet — be the first.