Inspect a layer's code

Every layer in uxdeck is already code. The Code section shows the selection as CSS, HTML or Tailwind, live as you design, so you can check what a change does to the markup or copy a piece into a project without exporting the whole site.

Use it to hand a component to a developer, to see why a layer sits where it does, or to paste one button’s styles into an existing site. To take a whole page or the whole site, see Export code, PNG and SVG.

Show the code

1. Select a layer.
2. In the Design tab, scroll to Code and press + (Show code).
3. Choose the format: CSS, HTML or Tailwind.

Once open, the section stays open, in every file, until you press − (Hide code). The format you chose is kept too.

The three formats

• CSS: this layer’s rules, as the HTML export writes them. It is shown for one layer at a time; with several selected, the section starts on HTML.
• HTML: the markup of the selection and everything inside it, with the coach’s proof as a comment: measured contrast, tap sizes and any open findings.
• Tailwind: the same markup with Tailwind classes, using exact values so nothing is lost.

Press the copy button at the top of the section to copy what is shown.

Copy without opening the section

Right-click a layer and choose Copy as…:

• PNG (⇧⌘C)
• CSS (one layer)
• SVG
• HTML + CSS
• Tailwind

The Export section at the bottom of the Design tab also copies the selection as HTML + CSS or Tailwind (Copy code), or saves it as a file (Download .html).

For viewers

People who can only view a file see Properties instead of the Design tab. It shows what the selection measures, the colours it uses and its type, each one a click from the clipboard: Copy layout as CSS, Copy every colour and Copy typography as CSS. See Viewers and asking to edit.

What each plan allows

What	Free	Pro
CSS for a layer	Yes	Yes
HTML and Tailwind	First lines shown, blurred	Yes
Copy as HTML + CSS or Tailwind	No	Yes
Copy as PNG, SVG or CSS	Yes	Yes

Catches

• CSS needs one layer. Select several and only HTML and Tailwind are offered.
• The HTML is the selection only. For a whole page with its motion and effects, download the site instead.
• Fonts are named, not included. The code refers to your typefaces; the project you paste into needs them too.
• Auto layout reads best. A layer in auto layout comes out as flexbox; loose layers come out positioned, which is harder to reuse. See Auto layout.