Margin

A Markdown editor that keeps research and editorial judgment beside the draft.

Margin is an OpenAI Build Week project for the Work & Productivity track. The writer works in a quiet, typography-first editor. GPT-5.6 leaves observations beside the passages that prompted them, maps the document’s argument, handles small editorial tasks in place, and prepares sourced research where it will be used. Proposed edits remain visible and require the writer’s approval.

The document is the interface. Margin adds intelligence around it while the prose remains ordinary Markdown.

Judge links

• Live demo: margin-m486.onrender.com
• Code repository: github.com/kbaxter/margin-app
• Demo video: add public YouTube URL
• Primary Codex /feedback Session ID: 019f7e17-9b84-73b2-9a1d-76a9c7b6fa90

Sixty-second judge path

1. Open the included Apple’s Next CEO Is a Hardware Engineer document from the title menu.
2. Watch the “Reading draft” and “Finding threads” indicators while Margin prepares local and document-level findings.
3. Add a plain #[…] instruction at the end of a paragraph. Margin works in the background, then returns an inline diff to apply or discard, with sources when the task uses them.
4. Scroll to a prepared #[research …] or #[chart …] block and choose Insert. Margin replaces the directive with ordinary Markdown and an inline source caption.
5. Change a rendered chart style, edit a rendered table cell, or adjust an inserted widget. The document remains writable around the computed media.
6. Open Review to inspect Margin’s argument spine. Select a claim to highlight its basis in the draft. Correct the claim and trace the effect on the argument that follows.
7. Open a local finding, choose Discuss, and push back on the diagnosis or proposal. Apply a proposed change to see the edited range and diff.
8. Open Context to inspect sources, then choose Save Markdown to export the prose, research, and richer assets.

Design principles

• Open directly into the document. Writing never depends on a setup interview or a global assistant thread.
• Show the model’s reading. Findings, argument claims, and proposed edits can all be inspected and corrected.
• Delegate from the draft. Plain #[…] instructions prepare local edits; research, chart, diagram, image, and widget prefixes prepare sourced material at the point of use.
• Make disagreement useful. Writers can discuss, refine, dismiss, or apply a finding. Applied edits include a visible diff.
• Keep the work portable. Prose and frozen research leave Margin as Markdown and normal asset files.

Meaningful GPT-5.6 integration

The production system uses GPT-5.6 and OpenAI platform features in these ways:

• GPT-5.6 Terra prepares restrained local observations, issue discussions, argument claims anchored to exact passages, inferred document briefs, whole-draft review, and revision proposals that honor writer corrections.
• GPT-5.6 with web search prepares sourced research and computed media, with a preference for primary sources.
• In-draft tasks route between GPT-5.6 Terra and GPT-5.6 with web search, depending on whether the instruction needs external evidence.
• Structured Outputs constrain every model-backed result before it enters editor state.
• Generated images use a GPT-5.6 editorial brief followed by the OpenAI image model.
• A labeled deterministic demo keeps the editor writable and testable during a provider outage.

The server-side integration is in margin/server/index.ts. The OpenAI API key is never exposed through the Vite client or saved into a document.

How Codex contributed

Codex was the primary engineering collaborator during Build Week. It read and operated the running application, reproduced UX failures from screenshots and hands-on testing, implemented the CodeMirror and React interactions, integrated Structured Outputs and web search, built the portable artifact renderers, and added production safeguards and tests.

The entrant set the product direction and made these decisions:

• Open on the writing surface and keep global assistant chat out of the workflow.
• Anchor findings to exact document passages.
• Require preview, discussion, and visible diffs before authored prose changes.
• Replace each #[…] directive at its location when the writer inserts the result.
• Put source links in concise inline captions.
• Render tables and media where rendering improves comprehension; leave the rest of the Markdown syntax visible.
• Export tables, charts, diagrams, images, and widgets as portable document assets.
• Use a restrained, sans-serif visual language influenced by macOS writing tools.

The detailed evidence record and development-period attestation are in docs/build-week-evidence.md.

Run locally

Requirements: Node.js 22 and an OpenAI API key for live model-backed behavior.

cd margin
cp .env.example .env
# Add OPENAI_API_KEY to .env
npm ci
npm run dev

The web application runs at http://localhost:5173; Vite proxies API requests to http://localhost:8787.

Without a key, Margin presents a labeled deterministic Apple demonstration. Fixture data is always identified as a demo.

Verify the submission build

cd margin
npm run verify

This runs 35 unit and API smoke tests, type-checks the client and server, and produces the Vite production bundle.

Production deployment

The repository includes a multi-stage Docker build and a Render Blueprint. One Node process serves the static application and its same-origin API.

See docs/deployment.md for setup, environment variables, clean-browser smoke tests, and judging-period operating requirements.

Repository map

• margin/src/ — React, CodeMirror, persistence, Markdown, and artifact rendering.
• margin/server/ — server-only OpenAI API boundary, validation, demo provider, and rate limits.
• margin/examples/ — two long-form demonstration documents and their portable assets.
• margin/Dockerfile — production container.
• render.yaml — one-service hosted deployment definition.
• docs/ — submission copy, evidence record, deployment runbook, and demo script.

Submission materials

• docs/build-week-submission.md — Devpost-ready description and testing instructions.
• docs/build-week-evidence.md — Codex/GPT-5.6 evidence and submission-period disclosure.
• docs/demo-script.md — narrated video plan under three minutes.
• docs/deployment.md — public deployment and judge-access checklist.

Third-party software and content

Margin is built with React, CodeMirror, Express, the official OpenAI JavaScript SDK, Zod, Lucide, TypeScript, and Vite. Package versions are locked in margin/package-lock.json; their licenses remain with their respective authors.

The included essays cite their factual sources. Generated editorial graphics are labeled and saved as document assets. The submission video should contain no copyrighted music and should avoid third-party logos or promotional imagery.

The repository is distributed under the included MIT license. If it is kept private during judging, grant access to both judging addresses listed in the deployment runbook.