Code view

import PageCode, { projectFor } from "@/pages/library/PageCode";
import "@/pages/library/library.css";

PageCode is what the page builder shows when someone switches the canvas from Preview to Code. It lays a landing page out as the files a developer would expect: one component per section, the page that orders them, the design system as tokens, the stylesheet the sections use, the page settings, and the index.html that is served.

The markup is read from the preview itself, by projectFor, so the code and the page can never disagree. PageCode only displays a list of files; projectFor makes that list.

A page as a projectCopy Anchor Link

The page opens on src/pages/…, the file that puts the sections in order. Click a file to open it, a folder to fold it, or search by path. Copy puts the open file on the clipboard. Download .zip saves every file in a folder named after the page.

// The page builder reads the project off the preview whenever the page or the design changes.
useEffect(() => {
  if (view !== "code" || !pageRef.current) return;
  setFiles(projectFor(pageRef.current, {
    title, description, vars: designVars(design), pixel, slug,
    sections: page.sections, settings, noindex, canonical, gtm, og,
  }));
}, [view, page, design]);

<div className="lib-browser">
  {view === "code" && <PageCode files={files} name={slug} />}
  <div ref={pageRef} className="lib-browser__page" hidden={view === "code"}>…</div>
</div>

The preview stays mounted while the code shows (hidden), because projectFor reads each [data-key] section's markup from it.

Any list of filesCopy Anchor Link

PageCode does not care where the files come from. Pass { path, content } objects; folders come from the slashes in path.

<PageCode
  name="webinar-signup"
  files={[
    { path: "README.md", content: "# Webinar sign-up\n\n…" },
    { path: "src/pages/WebinarSignup.jsx", content: "…" },
    { path: "src/styles/tokens.css", content: ":root { … }" },
  ]}
/>

The files projectFor makesCopy Anchor Link

Folders are listed before files, and both are sorted by name.

StatesCopy Anchor Link

AnatomyCopy Anchor Link

The component fills its parent (flex: 1), so give the parent a height and display: flex.

PropsCopy Anchor Link

PageCodeCopy Anchor Link

projectFor(root, options)Copy Anchor Link

documentFor(root, options) is also exported and returns only the index.html text.

AccessibilityCopy Anchor Link

• The files column is an <aside> labelled "Project files". Folders are buttons with aria-expanded; the open file has aria-current.
• The search field is labelled "Search files".
• The code area is focusable (tabIndex={0}) and labelled with the file path, so it can be scrolled with the keyboard. It shows a 2px --color-primary-300 focus outline.
• The line numbers are aria-hidden, so a screen reader reads only the code.
• The colouring is decoration. Nothing depends on it.

Do and don'tCopy Anchor Link

• Do read the files from the rendered preview with projectFor, so the code always matches the page.
• Do keep the preview mounted while the code shows.
• Do put new page settings into page.config.json and, when they change the page's head, into documentFor.
• Don't use PageCode as a code editor. It only displays files.
• Don't use it for short code samples in the product. It needs a full panel.

When to use itCopy Anchor Link

Use it wherever a generated page or project needs to be shown as files. There is no code viewer in @/ui. For a short snippet, a <pre> with the .lib-code styles is enough.

Where it is usedCopy Anchor Link