HTML layers

Press HTML in the timeline toolbar, or H, to add a layer at the playhead. It arrives as a note you can retype.

An HTML layer is a component the browser draws from its own source, composited over the footage and rasterized at the export's size, so it is as sharp at 4K as at 1080p. Use one where a zoom would only magnify pixels: a callout, a code pane in the product's own type, a keycap, a badge, a title card.

The panel

• Markup and Style are one pane with a switch. Every keystroke is an edit the canvas follows, and each edit is one undo step.
• Starter swaps in another house starter: Note, Tag, Code, Terminal, Keys, Badge. It reads Custom once you have edited past it.
• Below the pane the panel names anything that would not paint, and the fonts it found in your CSS. A family the catalog hosts loads at every weight named; any other falls back to the system stack.
• Layout sets size, position and rotation, or drag the layer on the paused canvas. A pinned layer says here what it is pinned to; dragging it, or pressing Unpin, gives its place back to the fields.
• Picture, in the Animation group, is Still or Live; see Live layers. In and Out pick how the layer arrives and leaves.

A callout is about something on the page, so pin it to that thing: a pinned layer sits a gap off its subject and follows it as the camera moves, with a ring on the subject if you ask. A layer with no subject is a caption in the margin. The markup is XML: <br /> closes itself, attribute values are quoted, and the panel refuses malformed markup in words. Shadow, radius and border are the layer's own CSS.

The layer's fields, pin included, are on HTML layers in doc.json.