← All posts

Action types

TEXTAREA: a multi-line scratch pad in the action bar — drafts, notes, snippets per domain

15 May 2026 · by JustZix Team

INPUT is single-line. SELECT is pick-from-list. SLIDER is a range. What if you want free-form multi-line text — because you're taking QA notes during testing, drafting a Reddit reply, or have a 5-line curl snippet you want at hand WHENEVER you visit this domain? Then you use TEXTAREA (since v2.13.21) — a native <textarea> in the action bar with per-tab persistent memory.

How does it differ from INPUT?

Most important difference: Enter in TEXTAREA is a newline, not a code trigger. That's intentional — this is a text field meant to hold text, not a command bar. To run the code: Tab (native blur) or click outside the textarea.

First TEXTAREA action

In the JustZix editor add a TEXTAREA action to the bar. Config:

label: "📝 QA notes"
rows: 5
placeholder: "Bug description, repro steps..."
defaultValue: ""  (empty — don't suggest anything)
code: (empty — we want just a notepad, no action)

Visit app.com/checkout. The action bar now has a text field. Type a note, F5 → the note comes back. Open a new tab on the same domain → empty field (each tab has its own memory). Close the tab → you lose the text in that tab, but if it was the only tab, the chrome.storage.local backup still keeps the last value on next open.

Three colours + placeholder

Same colour config as INPUT (both share the same CSS variable for placeholder):

color           → textarea background
colorText       → text-color of the text itself
colorPlaceholder → placeholder colour (CSS variable --jz-placeholder-color)

Without overrides the textarea looks like a native browser default — grey border, white bg, black text. To visually integrate with the rest of the action bar (e.g. a dark QA toolbar theme) set color="#1A1A1A" + colorText="#E5E5E5" + colorPlaceholder="#888".

Memory model — what survives F5

TEXTAREA uses hybrid storage (identical to INPUT):

1. sessionStorage (primary) — sync save on each keystroke. Key: jz_action_memory_{id}. Keeps the value for the entire tab session, including F5.
2. chrome.storage.local (backup) — async save on keystroke. Survives across browser restart on the same tab (if the tab comes back via "Restore session").

Save on each keystroke — even a single letter immediately lands in sessionStorage. Code fires only on blur. That's deliberate separation: saving = often (safety), running = rarely (efficiency).

Use case 1 — Per-domain QA scratch pad

You're testing a checkout flow on 3 staging environments. Each has its own quirks. Add a TEXTAREA "QA notes" to a rule scoped to *staging*.app.com:

label: "🐛 QA notes"
rows: 8
placeholder: "What you're testing, repro steps, errors..."

Visit staging1 → field with the previous session. Edit. Visit staging2 → empty (different tab = different memory). Open Slack to file the bug → text is ready to copy, you didn't lose it between pages. No Notion, no Sticky Notes, no F12.

Use case 2 — Comment draft on Reddit/GitHub

You're writing a long comment on a GitHub PR. Network failure → you lose the draft. Or "be right back" → 2h of other browsing → you come back → page refreshed, draft gone. TEXTAREA fix:

// In JustZix editor → rule on github.com:
label: "💬 Draft"
rows: 12
code: (empty — just a notepad)

Writing a comment → copy to TEXTAREA once a minute. F5? sessionStorage holds it. Network error? sessionStorage holds it. Even closing the tab and reopening (via "Restore session") → chrome.storage.local backup returns.

Bonus: instead of writing in GitHub's textarea, write in the JustZix TEXTAREA, then copy. Then even a failed page load won't destroy the text — JustZix lives independently of the page.

Use case 3 — Pre-filled curl snippet

You often test the same API. Re-assembling the curl every time. TEXTAREA with a defaultValue:

label: "🔧 curl"
rows: 6
defaultValue: |
  curl -X POST \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer YOUR_TOKEN" \
    -d '{"key":"value"}' \
    https://api.app.com/v1/endpoint
code: (empty — you only want to hold a template)

Visit the domain → the field already has the curl template. Edit once a session (e.g. paste the token), copy to terminal. Next tab on this domain → defaultValue returns if there was no prior memory, or your modified version if there was.

Use case 4 — JSON snippet for injection

A test JSON config you paste into the app's textarea. Instead of holding it in a file, hold it in a TEXTAREA action with blur-fired code:

label: "📋 Test config"
rows: 15
code: |
  // After blur — injects value into the app's real textarea
  const target = document.querySelector('#config-textarea');
  if (target) {
    target.value = value;
    target.dispatchEvent(new Event('input', { bubbles: true }));
    target.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log('Config injected (' + value.length + ' chars)');
  }

Edit JSON in the JustZix field → Tab → code automatically copies it into the app's real textarea + fires input/change events (so the page framework sees it). No manual copy-paste.

Pitfalls

• Enter does NOT trigger the code. Tab or click elsewhere does. Different from INPUT — important for the user's mental model. Best practice: use labels like "Notes" / "Draft" / "📝 …" (clear "this is a text field, not a command bar" signal).
• rows clamps to 1-20. Larger values are pinned to 20. For very long content (instructions, docs) use a JS pane instead (also multi-line, but in a floating panel).
• Per-tab memory, not global. Each tab has its own sessionStorage. To share text across tabs — the chrome.storage.local backup does this partially (on "Restore session"), but not real-time sync. For true cross-tab sync → CSS pane / JS pane (they have a different model).
• Bar drag is blocked during typing. mousedown on textarea blocks propagation, so you can't drag the bar by grabbing the textarea. That's intentional — you'd drag the bar instead of selecting text.
• placeholder falls back to label. If you don't set a separate placeholder, it shows the label. You can have both — e.g. label "Notes" + placeholder "Type your QA notes here...".

What's next

TEXTAREA is "minimalist memory" in the action bar — no code, no UI overhead, just a textarea. It pairs beautifully with other action types: JZ.value('Notes') reads the value from another action (e.g. a BUTTON that submits notes somewhere), and JZ.setValue('Notes', '') clears after use.

Check also related:

• TOGGLE3 — 3-state segmented controls with code per state
• SLIDER — native range controller for CSS variables
• Mini-IDE in a tab — full map of all windows and actions

Install JustZix — completely free, no account, no server.