Portfolio: Editor
The three-pane portfolio editor, its section types, and the known editor/publish-validator mismatch.
Portfolio: Editor
A three-pane workspace — section structure, content, and a live preview rendered via a real <iframe> kept in sync over postMessage, with a mobile/tablet/desktop viewport-width toggle. The editor autosaves every 12 seconds while dirty, and warns via the browser's beforeunload event if you try to navigate away with unsaved changes.
Section types
The editor supports 18 section types, each reorderable, hideable, and independently editable:
projects, experience, education, services, skills, writing, testimonials,
awards, certifications, languages, interests, publications, patents,
testScores, achievements, volunteer, custom, contactThe canonical list is portfolioSectionTypes in apps/portfolio/lib/portfolio.ts. A portfolio holds
at most 24 sections, each with at most 24 items.
Editor/publish-validator mismatch
The backend's publish-time content validator currently only accepts 9 of these 18 section
types: projects, experience, services, skills, education, writing, testimonials, awards, contact. A portfolio using any of the other 9 section types (certifications, languages,
interests, publications, patents, test scores, achievements, volunteer, or custom) will fail
server-side validation at publish time, even though the editor lets you add and fill them out. If
you're building against this today, stick to the 9 validated section types until this is resolved.
Premium: multi-page portfolios
Premium users additionally get multi-page portfolios — dedicated Work / Writing / About / Contact pages, plus auto-generated detail pages per project, derived live from the Projects section's items. Each page has its own independent section list.
The separate preview route
There's also a distinct private live-preview route (/preview/[documentId]) — not the same as the editor's own preview pane or the published site. It's used for scenarios like a guest (logged-out) user previewing before ever saving, powered by a dedicated server-render endpoint that turns portfolio JSON into HTML on demand.
Draft storage and merging
The editor implements its own local-first layer, independent of Studio's document sync engine. A
guest (logged-out) draft is kept in the browser; on login, the local draft and the cloud draft are
merged by comparing updatedAt timestamps, so neither side clobbers the newer data.
Content is validated server-side on save against a Zod schema that also caps field lengths — for example a 120-character name, a 240-character headline, a 1,600-character bio, at most 12 social links, and at most 24 sections.
Related
- Overview
- Templates
- Publishing & Analytics
- AI Writing Assistant — portfolio copy generation.