Choose a page kit
Begin with a service, product, portfolio, or WordPress business structure.
devs Tools / Section Composer 1.0.0
Section Composer: Design and export complete web pages
Compose thirteen semantic page sections, manage content, headings, design tokens, and quality in one local project, then export eight HTML and WordPress implementation formats.
Section Composer is a local-first page composition workspace. Start from a page kit, arrange semantic sections, edit only the content slots each section needs, validate the complete page, and export eight deterministic HTML and WordPress implementation formats.
- Content and generation stay in this browser
- One semantic H1 and versioned quality evidence
- No automatic WordPress or server writes
First visit? Choose a Page Kit on the left, edit Content Slots on the right, then open Quality and Export.
View the detailed stepsOpening the local page workspace…
Page workflow
From a page goal to an implementation package
Arrange and write
Add, duplicate, move, hide, or remove sections, then edit typed content slots.
Preview and validate
Compare four widths, light and dark token modes, headings, required content, links, contrast, and WordPress conversion.
Export and verify
Download code together with conversion losses and install, verification, and rollback instructions.
Four page kits
Start from what the page must communicate
service-landing
Service landing
11 Sections saas-productSaaS product
10 Sections creative-portfolioCreative portfolio
8 Sections wordpress-businessWordPress business
9 SectionsA page kit is a starting structure, not finished copy. Replace sample claims, prices, proof, images, contact details, and legal text before publishing.
Eight adapters
One project, eight explicit outputs
Swipe horizontally to view every column.
| Output adapter | Generated result | Best for |
|---|---|---|
| Semantic HTML | HTML, CSS, and JavaScript only when needed | General web and static sites |
| Gutenberg markup | Full-page and per-section block markup | WordPress posts and pages |
| Theme /patterns | PHP pattern files for WordPress themes | Theme and child-theme development |
| Pattern plugin | A small plugin that registers patterns | Keeping patterns across theme changes |
| Starter Page Pattern | A starting point for new pages | core/post-content and pages |
| theme.json v3 fragment | Palette, layout, custom tokens, and CSS fallbacks | WordPress 6.6 or later |
| Project JSON | Project, validation report, and catalog lock | Re-editing, audits, and handoff |
| Runbook | Install, Verify, Rollback, and Content Checklist | Safe installation and recovery |
Each adapter reports warnings and conversion losses. Motion, nested selectors, or editor-specific behavior are never removed silently.
Public knowledge base
Inspect the contract behind every generated page
Glossary
Terms used in the workspace
- Section
- A semantic page region such as a hero, features, pricing, FAQ, or call to action.
- Content Slot
- A typed field a section needs, such as a heading, link, image, price list, or FAQ pair.
- Variant
- A layout or density variation that keeps the section’s meaning and content contract.
- Design Token
- A named design decision for color, type, spacing, radius, shadow, or motion.
- Quality Guard
- Versioned checks for content, headings, accessibility, responsive layout, security, SEO, and WordPress output.
- Loss
- A behavior that cannot be represented completely by a selected output format.
Safety boundary
What this version deliberately does not automate
- No live WordPress, database, theme, plugin, or server writes.
- No remote image downloads, site scraping, arbitrary PHP, or AI-generated free-form HTML.
- No claim that a passing automated report replaces target-site, device, editor, accessibility, legal, or security review.
FAQ
Before exporting a page
Does it replace a visual page builder?
It uses a vertical semantic section stack. This keeps reading order, responsive behavior, keyboard operation, and WordPress serialization predictable.
Can it publish directly to WordPress?
No. It generates block markup, pattern files, a pattern plugin, a starter pattern, theme.json fragments, and runbooks. You review and install the chosen output.
Why are warnings and losses included?
A target format cannot always preserve motion, nested selectors, or editor behavior. Recording the difference makes installation and rollback reviewable.