StanzaLanding Page Section Generator

Stanza lets you stack ready-made landing page sections, edit the words and colors, and download one clean web page file. Small businesses and freelancers keep rebuilding the same hero, features, pricing, and FAQ blocks by hand, so I wanted a repeatable system: sections as data, one renderer, and an export small enough to host anywhere. It ships with 16 section types and four starters (a SaaS, a local service, a home care agency, and a portfolio), all fictional businesses.

Drag reorder, image uploads, clipboard, JSON load, and the downloads were built but only checked by reading the code and rendering the demo, not by clicking through in a real browser. There's no browser test runner for the interactions yet.

An earlier Claude Code session wrote the blocks.js core and a 414-assertion verify.mjs, then the connection dropped before any UI existed. I kept that core as is. When Claude Code came back to it on September 23, verify had exactly one red test, and the reason was kind of funny: the core's own em dash detector had an em dash character inside its regex.

We fixed that first, then Claude wrote the UI as eight small modules under the tiny-writes brief: a section list you can reorder by drag or Alt+Arrow, an inspector with Section, Theme, Page, and Check tabs, a scaled device preview, undo and redo, and an export dialog for one HTML file, HTML plus CSS, or a JSON project. It also added 50 new checks: referenced files exist, fonts are on the approved list, no em dashes, and no raw innerHTML outside the escaping renderer. The UI session itself took about 0.2 hours. I directed the spec, the section list, the fictional-business rule, and the small-writes approach. Claude chose the in-place iframe patch and the scaled preview after reading its own first screenshot.

• A no-em-dash check written as a regex with the literal dash contains the banned character, so the rule fails on itself. The U+2014 escape keeps the check and passes it. sed and some edit paths quietly eat the backslash, so those swaps went through a small Node script.
• Render the preview at the true device width and scale it with transform. My first "desktop" screenshot was really a 770px viewport, so the nav had already collapsed to a hamburger.
• The preview and the export are the same render function. On edits, the app patches the iframe's <style> text and body HTML instead of reloading, so your scroll position holds while you type.
• Patching body.innerHTML is fine as long as the escaping renderer is the only path to it. A verify check now enforces that.

The "shipped code is the tested code" idea from my early builds goes one step further here: verify.mjs checks the app's own files against the house rules (fonts, em dashes, innerHTML paths), not just the logic. The same "one renderer for preview and export" idea is at the heart of #41 and #46 in this batch.

I'd add a browser test runner that actually drags, uploads, and downloads. That's the gap between "built" and "trusted" on this one.