From 447e4b84c2fe1801c03a068f11592ab60f114c9c Mon Sep 17 00:00:00 2001
From: Adnaan Badr <badr.adnaan@gmail.com>
Date: Mon, 29 Jun 2026 05:31:05 +0000
Subject: [PATCH 1/2] examples(draft-form): server-side formnovalidate recipe +
 e2e (#239)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bumps livetemplate to v0.15.0 and adds a runnable example + recipe page for
its server-side formnovalidate honoring.

- examples/draft-form: a post editor with a required title and two buttons —
  "Publish" (validates) and "Save draft" (formnovalidate). Both call the same
  ctx.ValidateForm(); it enforces for Publish and skips for the formnovalidate
  Save draft, on every tier. Mounted at /apps/draft-form/ and (WS-disabled)
  /apps/draft-form/no-js/ to show the no-JS native-POST path, where the
  kebab-case save-draft button name also routes to SaveDraft.
- content/recipes/formnovalidate.md: walks the feature with the live embeds,
  source includes, the all-tiers/no-client-code point, and a trust note
  (convenience, not a security boundary).
- e2e/draft_form_test.go: self-contained chromedp test (own httptest server)
  capturing all four signals — console, server logs, WS frames, rendered HTML.
  Scenario 1 (save-draft + empty title → saved as draft) is the server-side
  proof of #239; scenario 2 documents that the browser's native required check
  blocks an empty Publish before any round-trip on the JS tier.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 cmd/site/main.go                  |  16 ++
 content/recipes/formnovalidate.md |  83 ++++++++
 content/recipes/index.md          |   1 +
 e2e/draft_form_test.go            | 318 ++++++++++++++++++++++++++++++
 examples/draft-form/draft.go      |  48 +++++
 examples/draft-form/draft.tmpl    |  22 +++
 examples/draft-form/handler.go    |  57 ++++++
 go.mod                            |   4 +-
 go.sum                            |  10 +-
 9 files changed, 548 insertions(+), 11 deletions(-)
 create mode 100644 content/recipes/formnovalidate.md
 create mode 100644 e2e/draft_form_test.go
 create mode 100644 examples/draft-form/draft.go
 create mode 100644 examples/draft-form/draft.tmpl
 create mode 100644 examples/draft-form/handler.go

diff --git a/cmd/site/main.go b/cmd/site/main.go
index 7d988e2..010dd11 100644
--- a/cmd/site/main.go
+++ b/cmd/site/main.go
@@ -23,6 +23,7 @@ import (
 
 	"github.com/livetemplate/docs/examples/counter"
 	counterbasic "github.com/livetemplate/docs/examples/counter-basic"
+	draftform "github.com/livetemplate/docs/examples/draft-form"
 	"github.com/livetemplate/docs/examples/greet"
 	greetloading "github.com/livetemplate/docs/examples/greet-loading"
 	greetloadingserver "github.com/livetemplate/docs/examples/greet-loading-server"
@@ -123,6 +124,21 @@ func main() {
 		livetemplate.WithWebSocketDisabled(),
 	)))
 
+	// draft-form demonstrates server-side formnovalidate: "Publish" validates
+	// the required title; "Save draft" carries formnovalidate so the SAME
+	// ctx.ValidateForm() call is skipped. The default mount keeps WebSocket on;
+	// the /no-js/ mount is WS-disabled (mountStripped rewrites the PRG Location
+	// back under the prefix) so the reader can watch the skip hold over a plain
+	// HTTP form POST — the tier where the kebab-case save-draft button name also
+	// routes to SaveDraft verbatim.
+	mux.Handle("/apps/draft-form/", http.StripPrefix("/apps/draft-form", draftform.Handler(
+		livetemplate.WithAllowedOrigins(allowedOrigins),
+	)))
+	mux.Handle("/apps/draft-form/no-js/", mountStripped("/apps/draft-form/no-js", draftform.Handler(
+		livetemplate.WithAllowedOrigins(allowedOrigins),
+		livetemplate.WithWebSocketDisabled(),
+	)))
+
 	// Step 3 — greet-loading: the HTML-declared loading spinner (a class the
 	// client toggles on pending/done). WS-disabled like the other middle
 	// steps; the loading lifecycle resolves over either transport.
diff --git a/content/recipes/formnovalidate.md b/content/recipes/formnovalidate.md
new file mode 100644
index 0000000..bf41a5d
--- /dev/null
+++ b/content/recipes/formnovalidate.md
@@ -0,0 +1,83 @@
+---
+title: "Skip validation with formnovalidate"
+description: "Let one button on a form bypass server-side validation — a 'Save draft' next to 'Publish' — using the standard HTML formnovalidate attribute, honored on every tier with no client code."
+source_repo: https://github.com/livetemplate/docs
+source_path: content/recipes/formnovalidate.md
+---
+
+# Skip validation with `formnovalidate`
+
+A form often has two submit buttons that mean different things. **Publish** should
+enforce every rule — the title is required, the URL must parse. **Save draft**
+should save whatever you have so far, half-finished and all, so you can come back
+later. HTML already has an attribute for exactly this: `formnovalidate` on a submit
+control tells the browser to skip its native constraint check for that button.
+
+LiveTemplate honors `formnovalidate` **on the server too**. `ctx.ValidateForm()`
+checks which control submitted the form, and when that control carried
+`formnovalidate`, validation is skipped — so the same call enforces the rules for
+**Publish** and waves them through for **Save draft**. No client code, no second
+code path, and it works whether the submit arrived over the WebSocket, an HTTP
+`fetch()`, or a plain no-JS form POST.
+
+```embed-lvt path="/apps/draft-form/" upstream="http://localhost:9091" height="320px"
+```
+
+Leave the title empty and press **Publish** — you get a "required" error. Leave it
+empty and press **Save draft** — it saves as a draft. Same field, same validation
+call, different button.
+
+## One template, two buttons
+
+The only markup that matters is the `formnovalidate` attribute on the second button:
+
+```html include="/examples/draft-form/draft.tmpl" lines="14-19"
+```
+
+`required` on the input drives the browser's native check (and the server's — the
+framework infers the rule from the same attribute). `formnovalidate` on
+`save-draft` opts that button out of both.
+
+## One validation call, honored by submitter
+
+Both actions call `ctx.ValidateForm()`. It enforces for `Publish` and skips for
+`SaveDraft` — not because the handlers differ, but because the framework knows
+which button was clicked:
+
+```go include="/examples/draft-form/draft.go" lines="21-48"
+```
+
+At parse time the framework records every submit control that carries
+`formnovalidate` into the form schema (`FormSchema.NoValidateSubmitters`, keyed by
+the control's `name`). At request time it compares the form's *submitter* — the
+clicked button — against that set, and `ctx.ValidateForm()` returns `nil` early
+when it matches. Because the decision is keyed on the submitter rather than the
+action, it holds even under `lvt-on:submit` routing, where the action is the
+handler and the submitter is a separate button.
+
+## It works without JavaScript
+
+The skip is enforced on the server, so it survives all the way down to a plain
+form POST. The mount below is the same app with `WithWebSocketDisabled()`; with JS
+off, the browser submits natively and the server still skips validation for the
+`save-draft` button.
+
+```embed-lvt path="/apps/draft-form/no-js/" upstream="http://localhost:9091" height="320px"
+```
+
+On the no-JS tier the button's `name` *is* the action verbatim, so the kebab-case
+`name="save-draft"` routes to the Go method `SaveDraft` (LiveTemplate matches
+kebab-case, camelCase, snake_case, and PascalCase action names). That is why the
+documented `<button name="save-draft">` pattern works end to end without a hidden
+`lvt-action` field.
+
+## A note on trust
+
+`formnovalidate` is a **convenience, not a security boundary**. It lets a *cooperating*
+client say "this submit is a draft, don't nag me about required fields" — and the
+server obliges only when the clicked button is one your own template marked
+`formnovalidate`. It does not authorize skipping authorization or integrity checks:
+a draft still belongs to a session, and any rule that must always hold (ownership,
+quotas, sanitization) belongs in the handler, unconditionally, not in
+`ValidateForm()`. For the CSRF posture of these no-JS form posts, see
+[Progressive enhancement](/recipes/progressive-enhancement/).
diff --git a/content/recipes/index.md b/content/recipes/index.md
index 1c09f71..d5ed2da 100644
--- a/content/recipes/index.md
+++ b/content/recipes/index.md
@@ -39,5 +39,6 @@ Narrative recipes for internals, tradeoffs, and operational shape:
 - [Counter, deeper](/recipes/counter)
 - [Pubsub](/recipes/pubsub) — `Subscribe`/`Publish` peer fan-out
 - [Server push](/recipes/server-push) — server-initiated `TriggerAction`
+- [Skip validation with `formnovalidate`](/recipes/formnovalidate) — a "Save draft" button that bypasses validation on every tier
 - [How a LiveTemplate update flows](/recipes/architecture-flow)
 - [How this docs site works](/recipes/how-this-site-works)
diff --git a/e2e/draft_form_test.go b/e2e/draft_form_test.go
new file mode 100644
index 0000000..e1dcc1a
--- /dev/null
+++ b/e2e/draft_form_test.go
@@ -0,0 +1,318 @@
+// Self-contained chromedp e2e for examples/draft-form — the post editor that
+// demonstrates livetemplate v0.15.0's server-side formnovalidate honoring
+// (#239). Unlike the staging-targeted tests in this package, this file boots
+// its own in-process httptest server hosting draftform.Handler, so it needs no
+// external harness or deployed site.
+//
+// Per project policy every failure surfaces all four debugging signals:
+//  1. browser console errors      (captureConsoleErrors)
+//  2. server logs                 (slog default + httptest ErrorLog → syncBuf)
+//  3. websocket frames            (captureWSFrames via the Network domain)
+//  4. final rendered HTML         (chromedp.OuterHTML)
+//
+// Run:
+//
+//	GOWORK=off go test ./e2e/ -run TestDraftForm -v -count=1
+package e2e
+
+import (
+	"bytes"
+	"context"
+	"log"
+	"log/slog"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"sync"
+	"testing"
+	"time"
+
+	"github.com/chromedp/cdproto/network"
+	"github.com/chromedp/chromedp"
+	"github.com/livetemplate/livetemplate"
+
+	draftform "github.com/livetemplate/docs/examples/draft-form"
+)
+
+// chromiumPath is the chromium binary available in this environment; there is
+// no google-chrome, so the default exec allocator's lookup would fail.
+const chromiumPath = "/run/current-system/sw/bin/chromium"
+
+// clientJSURL is the CDN bundle the draft.tmpl loads. The test needs it to
+// reach the browser for the WS tier to come alive; if the CDN is unreachable
+// we skip rather than hang on a never-connecting client.
+const clientJSURL = "https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"
+
+// syncBuf is a mutex-guarded buffer so slog (which may write from background
+// goroutines) and the test reader don't race.
+type syncBuf struct {
+	mu sync.Mutex
+	b  bytes.Buffer
+}
+
+func (s *syncBuf) Write(p []byte) (int, error) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	return s.b.Write(p)
+}
+
+func (s *syncBuf) String() string {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	return s.b.String()
+}
+
+// newDraftCtx builds a chromedp context pinned to the local chromium, modeled
+// on staging_test.go's newCtx but self-contained (no staging warmup). Each
+// scenario gets its own allocator so it runs in a fresh browser — and thus a
+// fresh livetemplate session, since cookies don't carry across allocators.
+func newDraftCtx(t *testing.T) (context.Context, context.CancelFunc) {
+	t.Helper()
+	allocOpts := append(chromedp.DefaultExecAllocatorOptions[:],
+		chromedp.ExecPath(chromiumPath),
+		chromedp.Flag("headless", true),
+		chromedp.Flag("disable-gpu", true),
+		chromedp.Flag("no-sandbox", true),
+		chromedp.WSURLReadTimeout(45*time.Second),
+	)
+	allocCtx, allocCancel := chromedp.NewExecAllocator(context.Background(), allocOpts...)
+	ctx, cancel := chromedp.NewContext(allocCtx)
+	timeoutCtx, timeoutCancel := context.WithTimeout(ctx, 45*time.Second)
+	return timeoutCtx, func() {
+		timeoutCancel()
+		cancel()
+		allocCancel()
+	}
+}
+
+// captureWSFrames records every WebSocket frame (both directions) for the
+// target so a failed assertion can show exactly what the live session
+// exchanged. Requires network.Enable() to be run as an action, otherwise the
+// CDP Network domain never emits these events. Returns a snapshot closure.
+func captureWSFrames(ctx context.Context) func() []string {
+	var mu sync.Mutex
+	var frames []string
+	chromedp.ListenTarget(ctx, func(ev interface{}) {
+		switch e := ev.(type) {
+		case *network.EventWebSocketFrameSent:
+			mu.Lock()
+			frames = append(frames, "SENT: "+e.Response.PayloadData)
+			mu.Unlock()
+		case *network.EventWebSocketFrameReceived:
+			mu.Lock()
+			frames = append(frames, "RECV: "+e.Response.PayloadData)
+			mu.Unlock()
+		}
+	})
+	return func() []string {
+		mu.Lock()
+		defer mu.Unlock()
+		out := make([]string, len(frames))
+		copy(out, frames)
+		return out
+	}
+}
+
+// cdnReachable verifies the @livetemplate/client bundle the template loads is
+// fetchable; if not, the WS tier can't hydrate and the test should skip.
+func cdnReachable() bool {
+	client := &http.Client{Timeout: 10 * time.Second}
+	req, err := http.NewRequest(http.MethodGet, clientJSURL, nil)
+	if err != nil {
+		return false
+	}
+	resp, err := client.Do(req)
+	if err != nil {
+		return false
+	}
+	resp.Body.Close()
+	return resp.StatusCode == http.StatusOK
+}
+
+func TestDraftForm(t *testing.T) {
+	if !cdnReachable() {
+		t.Skipf("client CDN %s unreachable — cannot exercise the WS tier in this env", clientJSURL)
+	}
+
+	// (2) server logs: livetemplate exposes no logger option in v0.15.0, so we
+	// redirect the default slog handler into a synchronized buffer and also
+	// point the httptest server's ErrorLog at it. Restored in cleanup.
+	logBuf := &syncBuf{}
+	prevLogger := slog.Default()
+	slog.SetDefault(slog.New(slog.NewTextHandler(logBuf, &slog.HandlerOptions{Level: slog.LevelDebug})))
+	t.Cleanup(func() { slog.SetDefault(prevLogger) })
+
+	// Boot the app. The origin allowlist is the chicken-and-egg case: the
+	// handler needs the server URL, but the URL isn't known until the listener
+	// exists. NewUnstartedServer allocates the listener up front, so we can
+	// read its address, build the handler, then Start.
+	ts := httptest.NewUnstartedServer(nil)
+	serverURL := "http://" + ts.Listener.Addr().String()
+	ts.Config.Handler = draftform.Handler(
+		livetemplate.WithAllowedOrigins([]string{serverURL}),
+	)
+	ts.Config.ErrorLog = log.New(logBuf, "httptest: ", log.LstdFlags)
+	ts.Start()
+	t.Cleanup(ts.Close)
+
+	// dumpSignals prints all four signals; called from each subtest's cleanup
+	// on failure so debugging never requires a re-run.
+	dumpSignals := func(t *testing.T, label, html string, console, ws []string) {
+		t.Helper()
+		t.Logf("\n========== FAILURE SIGNALS [%s] ==========", label)
+		t.Logf("--- (1) browser console errors (%d) ---\n%s", len(console), strings.Join(console, "\n"))
+		t.Logf("--- (2) server logs ---\n%s", logBuf.String())
+		t.Logf("--- (3) websocket frames (%d) ---\n%s", len(ws), strings.Join(ws, "\n"))
+		t.Logf("--- (4) rendered HTML ---\n%s", html)
+	}
+
+	// Scenario 1 — the heart of #239: "Save draft" carries formnovalidate, so
+	// the server-side ctx.ValidateForm() is skipped even though the title is
+	// empty and `required`. Success (data-status="draft") proves the framework
+	// honored the formnovalidate submitter; otherwise an empty title would have
+	// produced a field error and no draft.
+	t.Run("SaveDraftSkipsValidation", func(t *testing.T) {
+		ctx, cancel := newDraftCtx(t)
+		defer cancel()
+		consoleErrs := captureConsoleErrors(ctx)
+		wsFrames := captureWSFrames(ctx)
+
+		var html, status, errText, aria string
+		t.Cleanup(func() {
+			if t.Failed() {
+				dumpSignals(t, "SaveDraftSkipsValidation", html, consoleErrs(), wsFrames())
+			}
+		})
+
+		if err := chromedp.Run(ctx,
+			network.Enable(),
+			chromedp.Navigate(serverURL),
+			chromedp.WaitVisible(`input[name="title"]`, chromedp.ByQuery),
+			chromedp.Sleep(1500*time.Millisecond), // WS connect + hydrate
+			chromedp.Click(`button[name="save-draft"]`, chromedp.ByQuery),
+			chromedp.Sleep(1200*time.Millisecond), // action round-trip
+			chromedp.Evaluate(`(document.querySelector('[data-status]')||{}).getAttribute?.('data-status')||''`, &status),
+			chromedp.Evaluate(`(document.querySelector('form small')||{}).innerText||''`, &errText),
+			chromedp.Evaluate(`(document.querySelector('input[name="title"]')||{}).getAttribute?.('aria-invalid')||''`, &aria),
+			chromedp.OuterHTML("html", &html, chromedp.ByQuery),
+		); err != nil {
+			t.Fatalf("save-draft run: %v", err)
+		}
+
+		if status != "draft" {
+			t.Errorf("data-status = %q, want \"draft\" — formnovalidate must skip server validation for an empty title (#239)", status)
+		}
+		if strings.TrimSpace(errText) != "" {
+			t.Errorf("validation error text = %q, want empty — save-draft must not surface a title error", errText)
+		}
+		if aria == "true" {
+			t.Errorf("aria-invalid = %q, want unset — the title field must not be marked invalid on a skipped validation", aria)
+		}
+	})
+
+	// Scenario 2 — "Publish" has no formnovalidate, so the empty required title
+	// is rejected. WHERE it's rejected is decided empirically by the WS-frame
+	// capture: the browser's native constraint validation blocks the submit
+	// before any round-trip (so no frame is sent and no server ErrorTag
+	// renders), which is correct HTML semantics. We assert the invariant that
+	// always holds — nothing gets published — and branch on the frame count.
+	t.Run("PublishEmptyIsRejected", func(t *testing.T) {
+		ctx, cancel := newDraftCtx(t)
+		defer cancel()
+		consoleErrs := captureConsoleErrors(ctx)
+		wsFrames := captureWSFrames(ctx)
+
+		var html string
+		t.Cleanup(func() {
+			if t.Failed() {
+				dumpSignals(t, "PublishEmptyIsRejected", html, consoleErrs(), wsFrames())
+			}
+		})
+
+		if err := chromedp.Run(ctx,
+			network.Enable(),
+			chromedp.Navigate(serverURL),
+			chromedp.WaitVisible(`input[name="title"]`, chromedp.ByQuery),
+			chromedp.Sleep(1500*time.Millisecond), // WS connect + hydrate
+		); err != nil {
+			t.Fatalf("publish-empty connect: %v", err)
+		}
+
+		framesBefore := len(wsFrames())
+
+		var publishedCount int
+		var valueMissing bool
+		var aria, errText string
+		if err := chromedp.Run(ctx,
+			chromedp.Click(`button[name="publish"]`, chromedp.ByQuery),
+			chromedp.Sleep(1200*time.Millisecond),
+			chromedp.Evaluate(`document.querySelectorAll('[data-status="published"]').length`, &publishedCount),
+			chromedp.Evaluate(`!!(document.querySelector('input[name="title"]')||{}).validity?.valueMissing`, &valueMissing),
+			chromedp.Evaluate(`(document.querySelector('input[name="title"]')||{}).getAttribute?.('aria-invalid')||''`, &aria),
+			chromedp.Evaluate(`(document.querySelector('form small')||{}).innerText||''`, &errText),
+			chromedp.OuterHTML("html", &html, chromedp.ByQuery),
+		); err != nil {
+			t.Fatalf("publish-empty run: %v", err)
+		}
+		framesDuringClick := len(wsFrames()) - framesBefore
+
+		// Invariant for both branches: nothing is ever published.
+		if publishedCount != 0 {
+			t.Errorf("found %d [data-status=published] elements, want 0 — an empty title must never publish", publishedCount)
+		}
+
+		if framesDuringClick == 0 {
+			// Native client-side block: the browser refused to submit a
+			// required-empty field, so the server never saw it.
+			if !valueMissing {
+				t.Errorf("no WS frame was sent on Publish yet input.validity.valueMissing = false; "+
+					"expected the browser to block the empty required submit (aria=%q errText=%q)", aria, errText)
+			}
+			t.Logf("Publish+empty was blocked client-side (no WS frame sent); valueMissing=%v — server enforcement is not browser-observable here", valueMissing)
+		} else {
+			// Submit reached the server: it must have produced a field error.
+			if aria != "true" && strings.TrimSpace(errText) == "" {
+				t.Errorf("Publish sent %d WS frame(s) but no server validation error surfaced (aria=%q errText=%q)", framesDuringClick, aria, errText)
+			}
+		}
+	})
+
+	// Scenario 3 — happy path: a real title + Publish stores it and renders the
+	// published status with the title echoed back.
+	t.Run("PublishWithTitleSucceeds", func(t *testing.T) {
+		ctx, cancel := newDraftCtx(t)
+		defer cancel()
+		consoleErrs := captureConsoleErrors(ctx)
+		wsFrames := captureWSFrames(ctx)
+
+		const title = "Hello World"
+		var html, status, statusText string
+		t.Cleanup(func() {
+			if t.Failed() {
+				dumpSignals(t, "PublishWithTitleSucceeds", html, consoleErrs(), wsFrames())
+			}
+		})
+
+		if err := chromedp.Run(ctx,
+			network.Enable(),
+			chromedp.Navigate(serverURL),
+			chromedp.WaitVisible(`input[name="title"]`, chromedp.ByQuery),
+			chromedp.Sleep(1500*time.Millisecond), // WS connect + hydrate
+			chromedp.SendKeys(`input[name="title"]`, title, chromedp.ByQuery),
+			chromedp.Click(`button[name="publish"]`, chromedp.ByQuery),
+			chromedp.Sleep(1200*time.Millisecond), // action round-trip
+			chromedp.Evaluate(`(document.querySelector('[data-status]')||{}).getAttribute?.('data-status')||''`, &status),
+			chromedp.Evaluate(`(document.querySelector('[data-status]')||{}).innerText||''`, &statusText),
+			chromedp.OuterHTML("html", &html, chromedp.ByQuery),
+		); err != nil {
+			t.Fatalf("publish-with-title run: %v", err)
+		}
+
+		if status != "published" {
+			t.Errorf("data-status = %q, want \"published\" after submitting a valid title", status)
+		}
+		if !strings.Contains(statusText, title) {
+			t.Errorf("published status text = %q, want it to echo the title %q", statusText, title)
+		}
+	})
+}
diff --git a/examples/draft-form/draft.go b/examples/draft-form/draft.go
new file mode 100644
index 0000000..49ab115
--- /dev/null
+++ b/examples/draft-form/draft.go
@@ -0,0 +1,48 @@
+package draftform
+
+import (
+	"strings"
+
+	"github.com/livetemplate/livetemplate"
+)
+
+// State is per-session state — pure data, cloned per session by livetemplate.
+// It models a tiny post editor: a title plus the last save outcome. The whole
+// point of the example is that the SAME ctx.ValidateForm() call behaves
+// differently depending on which button submitted the form.
+type State struct {
+	Title  string
+	Status string // "", "draft", or "published"
+}
+
+// Controller exposes the action methods invoked by name from the template.
+type Controller struct{}
+
+// Publish enforces validation: the title is required, so an empty submit
+// returns a field error and nothing is stored. ctx.ValidateForm() infers the
+// rule from the `required` attribute in draft.tmpl — the authoritative check a
+// malicious or no-JS client can't skip.
+func (c *Controller) Publish(s State, ctx *livetemplate.Context) (State, error) {
+	if err := ctx.ValidateForm(); err != nil {
+		return s, err
+	}
+	s.Title = strings.TrimSpace(ctx.GetString("title"))
+	s.Status = "published"
+	return s, nil
+}
+
+// SaveDraft saves whatever is typed, even an empty title. The "Save draft"
+// button carries formnovalidate, so the IDENTICAL ctx.ValidateForm() call here
+// is skipped server-side — on every tier (WebSocket, HTTP-fetch, and no-JS
+// native POST), with no client code. The framework records the button's name
+// from the template (FormSchema.NoValidateSubmitters) and matches it against
+// the submission's submitter; the kebab-case name save-draft also routes to
+// this SaveDraft method verbatim on the no-JS tier.
+func (c *Controller) SaveDraft(s State, ctx *livetemplate.Context) (State, error) {
+	if err := ctx.ValidateForm(); err != nil {
+		return s, err
+	}
+	s.Title = strings.TrimSpace(ctx.GetString("title"))
+	s.Status = "draft"
+	return s, nil
+}
diff --git a/examples/draft-form/draft.tmpl b/examples/draft-form/draft.tmpl
new file mode 100644
index 0000000..9fd3d40
--- /dev/null
+++ b/examples/draft-form/draft.tmpl
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Draft or publish</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/livetemplate.css">
+    <script defer src="https://cdn.jsdelivr.net/npm/@livetemplate/client@latest/dist/livetemplate-client.browser.js"></script>
+</head>
+<body>
+    <main class="container">
+        <h1>Draft or publish</h1>
+        {{if .Status}}<p data-status="{{.Status}}">Saved as <strong>{{.Status}}</strong>: &ldquo;{{.Title}}&rdquo;</p>{{end}}
+        <form method="POST">
+            <input name="title" placeholder="Post title" required {{.lvt.AriaInvalid "title"}}>
+            {{.lvt.ErrorTag "title"}}
+            <button name="publish">Publish</button>
+            <button name="save-draft" formnovalidate class="secondary">Save draft</button>
+        </form>
+    </main>
+</body>
+</html>
diff --git a/examples/draft-form/handler.go b/examples/draft-form/handler.go
new file mode 100644
index 0000000..33512bf
--- /dev/null
+++ b/examples/draft-form/handler.go
@@ -0,0 +1,57 @@
+// Package draftform demonstrates server-side formnovalidate honoring: a post
+// editor where "Publish" validates the required title and "Save draft" (a
+// formnovalidate button) skips validation — the same ctx.ValidateForm() call,
+// different outcome by submitter, on every tier. cmd/site mounts it at
+// /apps/draft-form/ and (WS-disabled) at /apps/draft-form/no-js/.
+package draftform
+
+import (
+	"embed"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+	"sync"
+
+	"github.com/livetemplate/livetemplate"
+)
+
+//go:embed draft.tmpl
+var templateFS embed.FS
+
+var (
+	tmplPath string
+	tmplOnce sync.Once
+)
+
+// extractTemplate writes the embedded template to a temp file so livetemplate's
+// file-based loader can parse it at runtime (mirrors examples/greet-validate).
+func extractTemplate() string {
+	tmplOnce.Do(func() {
+		dir, err := os.MkdirTemp("", "draft-form-tmpl-*")
+		if err != nil {
+			log.Fatalf("draft-form: mkdtemp: %v", err)
+		}
+		data, err := templateFS.ReadFile("draft.tmpl")
+		if err != nil {
+			log.Fatalf("draft-form: read embedded tmpl: %v", err)
+		}
+		tmplPath = filepath.Join(dir, "draft.tmpl")
+		if err := os.WriteFile(tmplPath, data, 0o644); err != nil {
+			log.Fatalf("draft-form: write tmpl: %v", err)
+		}
+	})
+	return tmplPath
+}
+
+// Handler returns the draft-form app as an http.Handler ready to mount. The
+// initial state is an empty editor; callers supply environment-specific options
+// (origin allowlists, WithWebSocketDisabled) via opts.
+func Handler(opts ...livetemplate.Option) http.Handler {
+	baseOpts := []livetemplate.Option{
+		livetemplate.WithParseFiles(extractTemplate()),
+		livetemplate.WithAuthenticator(&livetemplate.AnonymousAuthenticator{}),
+	}
+	tmpl := livetemplate.Must(livetemplate.New("draft-form", append(baseOpts, opts...)...))
+	return tmpl.Handle(&Controller{}, livetemplate.AsState(&State{}))
+}
diff --git a/go.mod b/go.mod
index 49fcd57..225fd1d 100644
--- a/go.mod
+++ b/go.mod
@@ -7,7 +7,7 @@ require (
 	github.com/chromedp/chromedp v0.14.2
 	github.com/go-playground/validator/v10 v10.30.2
 	github.com/gorilla/websocket v1.5.3
-	github.com/livetemplate/livetemplate v0.14.0
+	github.com/livetemplate/livetemplate v0.15.0
 	github.com/livetemplate/lvt v0.1.6
 	github.com/livetemplate/lvt/components v0.1.2
 	gopkg.in/yaml.v3 v3.0.1
@@ -36,8 +36,6 @@ require (
 	github.com/ncruces/go-strftime v1.0.0 // indirect
 	github.com/redis/go-redis/v9 v9.17.2 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/tdewolff/minify/v2 v2.24.8 // indirect
-	github.com/tdewolff/parse/v2 v2.8.5 // indirect
 	golang.org/x/crypto v0.49.0 // indirect
 	golang.org/x/exp v0.0.0-20251219203646-944ab1f22d93 // indirect
 	golang.org/x/net v0.51.0 // indirect
diff --git a/go.sum b/go.sum
index a8cd8f6..424c688 100644
--- a/go.sum
+++ b/go.sum
@@ -97,8 +97,8 @@ github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80 h1:6Yzfa6GP0rIo/kUL
 github.com/ledongthuc/pdf v0.0.0-20220302134840-0c2507a12d80/go.mod h1:imJHygn/1yfhB7XSJJKlFZKl/J+dCPAknuiaGOshXAs=
 github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
 github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
-github.com/livetemplate/livetemplate v0.14.0 h1:9RoA4c3gLpqjzj0DFnUrBLj+zmlrhQtX8C7V7v8LD3k=
-github.com/livetemplate/livetemplate v0.14.0/go.mod h1:GMvZKyPUq8LSGfgD3pftKOHa6v+I+RDYyff2mNjeAYs=
+github.com/livetemplate/livetemplate v0.15.0 h1:QC+3E4rhUjpvwbPZk5WvwVtUpwwadpyO9dw/pV145Xs=
+github.com/livetemplate/livetemplate v0.15.0/go.mod h1:xkmgckEpdoYTqretGpaWfh8uqvjsBBLBJYd84n2O5QQ=
 github.com/livetemplate/lvt v0.1.6 h1:1rDU5hDo+EtZ0mT+868wYD9czF2EHEgdacS4kpIUPQ4=
 github.com/livetemplate/lvt v0.1.6/go.mod h1:OrTdx3zvh0WeuugVueQoRG3ILRNJe/dThErxKsos6Rw=
 github.com/livetemplate/lvt/components v0.1.2 h1:MM2M5IZnsUAu0py9ZbtcQCo0bvUrL4Z3Ly/yDkYNyag=
@@ -159,12 +159,6 @@ github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
 github.com/stretchr/testify v1.11.0 h1:ib4sjIrwZKxE5u/Japgo/7SJV3PvgjGiRNAvTVGqQl8=
 github.com/stretchr/testify v1.11.0/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
-github.com/tdewolff/minify/v2 v2.24.8 h1:58/VjsbevI4d5FGV0ZSuBrHMSSkH4MCH0sIz/eKIauE=
-github.com/tdewolff/minify/v2 v2.24.8/go.mod h1:0Ukj0CRpo/sW/nd8uZ4ccXaV1rEVIWA3dj8U7+Shhfw=
-github.com/tdewolff/parse/v2 v2.8.5 h1:ZmBiA/8Do5Rpk7bDye0jbbDUpXXbCdc3iah4VeUvwYU=
-github.com/tdewolff/parse/v2 v2.8.5/go.mod h1:Hwlni2tiVNKyzR1o6nUs4FOF07URA+JLBLd6dlIXYqo=
-github.com/tdewolff/test v1.0.11 h1:FdLbwQVHxqG16SlkGveC0JVyrJN62COWTRyUFzfbtBE=
-github.com/tdewolff/test v1.0.11/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 github.com/testcontainers/testcontainers-go v0.39.0 h1:uCUJ5tA+fcxbFAB0uP3pIK3EJ2IjjDUHFSZ1H1UxAts=
 github.com/testcontainers/testcontainers-go v0.39.0/go.mod h1:qmHpkG7H5uPf/EvOORKvS6EuDkBUPE3zpVGaH9NL7f8=
 github.com/testcontainers/testcontainers-go/modules/redis v0.39.0 h1:p54qELdCx4Gftkxzf44k9RJRRhaO/S5ehP9zo8SUTLM=

From cab4cc38fe77ab2f536bd382c644f51413a9cca9 Mon Sep 17 00:00:00 2001
From: Adnaan Badr <badr.adnaan@gmail.com>
Date: Mon, 29 Jun 2026 05:34:06 +0000
Subject: [PATCH 2/2] test(draft-form): make chromium ExecPath conditional for
 CI portability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hardcoded /run/current-system/sw/bin/chromium path is the local dev box's
binary. CI (ubuntu-latest) has google-chrome-stable on PATH, which chromedp's
default allocator finds — so only apply ExecPath when the local chromium binary
actually exists, otherwise forcing a nonexistent path breaks the CI e2e run.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 e2e/draft_form_test.go | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/e2e/draft_form_test.go b/e2e/draft_form_test.go
index e1dcc1a..7f790c1 100644
--- a/e2e/draft_form_test.go
+++ b/e2e/draft_form_test.go
@@ -22,6 +22,7 @@ import (
 	"log/slog"
 	"net/http"
 	"net/http/httptest"
+	"os"
 	"strings"
 	"sync"
 	"testing"
@@ -34,8 +35,9 @@ import (
 	draftform "github.com/livetemplate/docs/examples/draft-form"
 )
 
-// chromiumPath is the chromium binary available in this environment; there is
-// no google-chrome, so the default exec allocator's lookup would fail.
+// chromiumPath is the chromium binary on the local dev box (no google-chrome
+// there). It's used only when present; CI relies on the default allocator
+// finding google-chrome-stable on PATH instead.
 const chromiumPath = "/run/current-system/sw/bin/chromium"
 
 // clientJSURL is the CDN bundle the draft.tmpl loads. The test needs it to
@@ -69,12 +71,17 @@ func (s *syncBuf) String() string {
 func newDraftCtx(t *testing.T) (context.Context, context.CancelFunc) {
 	t.Helper()
 	allocOpts := append(chromedp.DefaultExecAllocatorOptions[:],
-		chromedp.ExecPath(chromiumPath),
 		chromedp.Flag("headless", true),
 		chromedp.Flag("disable-gpu", true),
 		chromedp.Flag("no-sandbox", true),
 		chromedp.WSURLReadTimeout(45*time.Second),
 	)
+	// Pin chromium only when it exists at this path (local dev env). In CI
+	// (ubuntu-latest) chromedp's default allocator finds google-chrome-stable on
+	// PATH, so forcing a nonexistent ExecPath would break the run.
+	if _, err := os.Stat(chromiumPath); err == nil {
+		allocOpts = append(allocOpts, chromedp.ExecPath(chromiumPath))
+	}
 	allocCtx, allocCancel := chromedp.NewExecAllocator(context.Background(), allocOpts...)
 	ctx, cancel := chromedp.NewContext(allocCtx)
 	timeoutCtx, timeoutCancel := context.WithTimeout(ctx, 45*time.Second)