Source: https://meta.remarkbox.com/fe2f40a1-0501-11f1-aa5b-040140774501/progressive-enhancement-ajax-comments-and-live-preview Snapshot: 2026-05-17T05:44:09Z Generator: Remarkbox 10e7a2b This is a thread snapshot. The living document lives at the source URI above — it may have been edited, extended, or replied-to since.

Remarkbox now has progressive enhancement for comment submission and live preview. Everything works without JavaScript — JS just makes it smoother.

What changed

AJAX comment submission

When JavaScript is available, submitting a comment no longer triggers a full page reload. The reply is sent via XMLHttpRequest, and the server returns fully-rendered HTML that gets inserted into the thread in-place. The textarea clears, a success flash appears, and you stay right where you were in the conversation.

If JavaScript is disabled or the AJAX request fails, the form falls back to the normal POST + redirect — exactly as before. No functionality is lost.

Live preview with author context

The markdown preview now shows your avatar, display name, and a "just now" timestamp as you type. It looks like a real comment being composed in real-time, so you know exactly what your post will look like before you submit.

For anonymous namespaces, the preview updates the name dynamically as you type in the name field.

The avatar is created via the DOM API (not innerHTML) and uses a hanging-indent layout that matches the actual comment nodes — avatar hangs left, text stays in its own column and never wraps underneath.

AJAX action buttons

Moderation actions (approve, disable, lock, etc.) also use AJAX when JavaScript is available. Buttons disable during the request and re-enable on completion, with visual feedback.

Cache busting

custom.js is now loaded with a version query parameter (?v=<git-hash>) computed at startup. This prevents stale JavaScript after deploys — no more hard-refreshing to pick up changes.

Preview visibility preference

Your show/hide preference for the preview panel is saved to localStorage and respected across page loads and on dynamically inserted reply forms.

Capability-driven presentation

All of this follows the capability-driven presentation pattern. The base experience requires zero JavaScript. Enhanced features are layered on top using the js-only CSS class and a <noscript> block that hides them when JS is unavailable. The server doesn't need to know or care whether the client has JavaScript — it just serves HTML either way.

No-JS audit

Every feature was tested with JavaScript disabled:

• Comment forms submit via normal POST and redirect — works
• Preview panel is hidden (.js-only + <noscript>) — no broken UI
• Moderation buttons submit via normal form POST — works
• No console errors, no broken layouts, no dead buttons

The goal: JavaScript makes remarkbox faster and more pleasant, but it is never required.

Source: https://meta.remarkbox.com/fe2f40a1-0501-11f1-aa5b-040140774501/progressive-enhancement-ajax-comments-and-live-preview
Snapshot: 2026-05-17T05:44:09Z
Generator: Remarkbox 10e7a2b