Skip to content
Screens mode

Export and check a screen

Download a screen or a whole flow as PNG, SVG or PDF, and check a screen for accessibility problems with axe-core.

On this page

Select a screen, then choose Export and check in the top right of the canvas, beside History. A panel opens with two tabs: Export and Accessibility. Both are free.

Export a screen or a flow

  1. Choose what to export

    This screen, or a flow that starts on this screen. A flow export draws the start screen and every screen its links reach, in order, up to 20 screens. To make a flow, see Link screens into a flow.

  2. Choose formats and a size

    Pick PNG, SVG, PDF or several, and a size: Phone, Tablet or Desktop. The screen is drawn from its latest save, in the state and theme the canvas shows.

  3. Export and download

    Select Export. The panel shows how many screens are drawn so far. When it is done, each file has a download link.

What each format holds:

  • PNG: the picture, at twice the size for Phone and Tablet so it stays sharp.
  • PDF: printed by the same browser from the same drawing, so text stays text. A flow is one PDF with a page per screen.
  • SVG: the PNG picture inside an SVG file. It is not a vector drawing: M1rror draws screens in a browser, which gives pixels, not shapes. The file name ends in -raster.svg and the file says so too.

If the server can't run a browser, the export stops and says so. Nothing is drawn any other way.

Check accessibility

Open the Accessibility tab and select Run check. M1rror draws the screen and runs axe-core on it. Each problem shows:

  • how serious it is (Critical, Serious, Moderate or Minor),
  • the element, and Select layer to find it on the canvas,
  • How to fix, a link to the rule's help page.

Some rules need a person to decide, such as contrast over a picture. They are listed under Needs a person to look, not counted as passed.

What the check does not cover: page-level rules such as the page title, page language and landmarks are not run, because M1rror's preview page decides them, not your design. Automated rules find some problems, not all. Still check keyboard use, focus order and screen-reader wording yourself.

Every check is kept with the screen as evidence and never changed. Viewers can read the latest check; editors can run one.

From a coding agent

The same actions are MCP tools: taste_start_screen_export, taste_get_screen_export, taste_list_screen_exports, taste_run_screen_accessibility_check and taste_get_screen_accessibility. See MCP tools.

Last updated

Edit this page on GitHub