Export and code

Exports are rendered by the same headless browser that draws your screenshots, so what you export is what the canvas shows.

Export files

Select layers, or nothing for the whole page, and open the Export tab (Shift+E).

Several sizes as a zip: the Export tab has preset sets, and you can add your own rows:

From your agent

export_file writes to ~/Downloads/Bogen (set BOGEN_EXPORT_DIR for another folder), or to a path you give it: an absolute path under your home folder, or a folder ending in /. It never replaces a file unless told to overwrite. It refuses hidden folders unless you asked for one, and never writes into protected folders or Bogen's own data.

SVG

SVG export writes rectangles, paths, text with a position per line, images, native gradients, shadows, clipping and transforms as real SVG. What cannot be expressed stays HTML inside a foreignObject, and the export report says which layers and why: blend modes, masks, conic gradients and form controls.

Text keeps its font names, so another machine needs the fonts. The files have been checked with xmllint, rsvg-convert and a pixel comparison, not yet in Illustrator, Figma or Inkscape.

Video

Any frame exports as MP4 or WebM, at no cost. Bogen renders frame by frame at exact times, so CSS animations, SVG animations, videos and shaders land where they should. It uses ffmpeg when there is one, and the browser's own encoder otherwise. Set BOGEN_FFMPEG to a path, or to none to use only the browser. Give a duration (up to 120 seconds) and a frame rate (up to 60).

A GIF or an embed runs on its own clock, and the report says so. There is no audio.

Copy as code

The Code tab (Shift+C) shows the selection as code, live as you edit:

• HTML with inline styles;
• React with inline styles;
• Tailwind: React with Tailwind classes.

Components come out as React components with typed props, a union and one branch per variant, slots as ReactNode, and instances as usages. An instance with changes on its inner layers is written out in full, and says so. Code components come out as a usage of your own component with its import.

Pseudo-elements and conditions come along: HTML and React carry a <style> element for them, and Tailwind uses variants such as before:, hover: and @max-[560px]: where one says the same. See Pseudo-elements and conditions.

The generated React type-checks in strict mode and renders with react-dom. The Tailwind classes have not been built in a real Tailwind project yet.

Hand off to your repo

Your agent reads a design with code_get (html, react-inline or react-tailwind), one section at a time, and treats it as an exact specification: it reuses your repo's own components and tokens instead of copying inline styles. The implement_selection prompt walks it through this.

Bogen never writes into a repository. Your agent writes with its own file tools.

Tokens

• tokens_export returns the file's tokens as CSS (a :root block, one block per theme mode, the text styles as classes), as CSS plus a Tailwind 4 @theme inline block, or as a Tailwind 3 theme.extend object.
• design_system_css returns tokens and text styles as one style sheet.
• tokens_from_css goes the other way: it reads custom properties from your repo's CSS or Tailwind theme into the file, and with mode into a theme mode.

There is no panel for this; ask your agent. The Tailwind output has not been built in a real Tailwind project yet.

Live site mode

To change the source of a running site rather than a design, see Live site mode.