TraeWork Docs
Companion to the blog post

The unreasonable effectiveness of HTML

Twenty self-contained .html files an agent produced instead of a wall of markdown. Each one turns a flat document into something you can open, inspect, and use directly in a browser.

.md
.html
01

Exploration & Planning

3 demos

When the direction is still open, a browser artifact can fan out alternatives and make the tradeoffs visible together before the chosen path becomes an implementation plan.

Three code approaches

Three implementation paths are compared in one view, with tradeoffs placed beside the code instead of buried in prose.

01-code.html

Visual design directions

Several visual directions are rendered side by side so feedback can point to a concrete interface, not an imagined one.

02-visual.html

Implementation plan

A plan page brings milestones, data flow, mockups, risky areas, and validation notes into one handoff artifact.

16-plan.html
02

Code Review & Understanding

3 demos

Diffs and call graphs are spatial information. Render them as annotated reviews, module maps, and reviewer-facing summaries so the shape of the change is visible.

Annotated pull request

A review surface pairs code changes with severity notes, inline context, and jump points for faster scanning.

03-review.html

PR writeup for reviewers

The author-side narrative explains motivation, file-level changes, and where a reviewer should spend attention.

17-writeup.html

Module map

A package is mapped as boxes, paths, and entry points so the system shape is visible before reading every file.

04-understanding.html
03

Design

2 demos

HTML is the medium design systems ship in. Tokens can become swatches, and component states can become contact sheets that are ready for review.

Living design system

Tokens for color, type, and spacing are presented as inspectable swatches and reference rows.

05-system.html

Component variants

One component is laid out across sizes, states, and intents so the state matrix can be reviewed at once.

06-variants.html
04

Prototyping

2 demos

Motion and interaction are hard to judge as prose. A throwaway HTML page lets timing, easing, and click-throughs become tangible.

Animation sandbox

Motion parameters are isolated with controls for duration and easing before the transition is integrated elsewhere.

07-animation.html

Clickable flow

A small linked flow lets a reviewer move through the experience and judge whether the sequence holds together.

08-interaction.html
05

Illustrations & Diagrams

2 demos

Diagrams and figure sheets can live as editable browser-native artifacts when the page itself needs to carry the process.

SVG figure sheet

Multiple figures are collected as editable browser-native assets for posts, docs, or handoff notes.

10-illustrations.html

Annotated flowchart

A deployment flow is presented as steps, timing, and failure routes that can be explored without leaving the page.

13-flowchart.html
06

Decks

1 demo

A short deck can be a single HTML file: portable, editable, and navigable without a separate presentation export.

Arrow-key slide deck

A lightweight slide document uses plain HTML sections and keyboard navigation for live presentation.

09-deck.html
07

Research & Learning

2 demos

Explainers become easier to learn from when summaries, steps, examples, and glossary context have their own places on the page.

How a feature works

A repository feature is explained with a summary, request path, configuration tabs, and practical questions.

14-feature.html

Concept explainer

A technical concept is made interactive with a live model, comparison table, and context-sensitive glossary.

15-concept.html
08

Reports

2 demos

Status updates and postmortems benefit from a readable structure: summary, state, timeline, chart, and next actions.

Weekly status

A weekly update tracks shipped work, slips, and trend context in a format designed for quick Monday reading.

11-status.html

Incident timeline

A post-incident artifact combines event sequence, relevant logs, impact, and follow-up ownership.

12-incident.html
09

Custom Editing Interfaces

3 demos

A purpose-built temporary editor can keep the human in the loop, then export the final arrangement back into markdown, code, or agent input.

Ticket triage board

Thirty tickets can be moved across priority columns, then exported as a final ordered markdown list.

18-triage.html

Feature flag editor

Flags are grouped by area, dependency warnings stay visible, and changed keys can be copied as a focused diff.

19-flags.html

Prompt tuner

An editable prompt template and sample inputs update together, making the prompt's behavior easier to judge.

20-prompt.html