# Inspect a layer's code

> Read any layer as CSS, HTML or Tailwind while you design, and copy it straight into a project.

Source: https://uxdeck.app/guide/inspect-code (checked against uxdeck on 16 October 2026)

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](/guide/export).

## 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** (<kbd>⇧</kbd><kbd>⌘</kbd><kbd>C</kbd>)
- **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](/guide/viewers).

## 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](/guide/auto-layout).