---
title: "MazWindowMockup"
description: "MazWindowMockup renders a macOS-style window frame in three variants - browser, terminal, and editor - to showcase content, demos, or code examples in your documentation or UI."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-window-mockup"
---

# MazWindowMockup

> MazWindowMockup renders a macOS-style window frame in three variants - browser, terminal, and editor - to showcase content, demos, or code examples in your documentation or UI.

- Package: `maz-ui`
- Import: `import MazWindowMockup from 'maz-ui/components/MazWindowMockup'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-window-mockup

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

**Note: Optional: shiki for code variants**

When you pass the `code` prop, `MazWindowMockup` mounts `MazCodeHighlight` internally for syntax highlighting. This requires the [`shiki`](https://shiki.style) optional peer dependency to be installed. See the [MazCodeHighlight installation note](./maz-code-highlight.md#installation-requirement).

## Browser variant

The default variant. Displays an address bar with the `url` prop and a copy-URL button on the right side of the bar.

```vue
<template>
  <MazWindowMockup url="https://maz-ui.com" min-height="100px">
    <div>Browser content goes here</div>
  </MazWindowMockup>
</template>

<script lang="ts" setup>
  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
</script>
```

### Hide the URL copy button

Set `:hide-url-copy="true"` to remove the copy-URL button from the title bar.

```vue
<template>
  <MazWindowMockup url="https://maz-ui.com" min-height="80px" :hide-url-copy="true" />
</template>
```

### With screenshot

Use this variant to display a screenshot of a website.

```vue
<template>
  <MazWindowMockup url="https://maz-ui.com" min-height="100px">
    <img src="/img/screenshots/maz-ui-home-desktop.webp" alt="Maz UI Demo Dashboard" width="100%">
  </MazWindowMockup>
</template>

<script lang="ts" setup>
  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
</script>
```

## Terminal variant

Displays a centered title and a `$` prompt prefix in front of the code (when `code` is provided). The prompt prefix is **not** copied to the clipboard - the copy button only writes the raw `code` value.

```vue
<template>
  <MazWindowMockup variant="terminal" title="zsh" code="pnpm add maz-ui" language="bash" />
</template>

<script lang="ts" setup>
  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
</script>
```

### Custom prompt

Replace the default `$` with any character via the `prompt` prop.

```vue
<template>
  <MazWindowMockup variant="terminal" code="git status" language="bash" prompt="❯" />
</template>
```

### Without prompt

Hide the default prompt by setting `hide-prompt` to `true`.

```vue
<template>
  <MazWindowMockup variant="terminal" code="git status" language="bash" :hide-prompt="true" />
</template>
```

## Editor variant

Shows a filename tab anchored to the bottom of the title bar - matching the look of real editors like VSCode.

```vue
<template>
  <MazWindowMockup variant="editor" filename="App.vue" :code="vueCode" language="vue" />
</template>

<script lang="ts" setup>
  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'

  const vueCode = `<template>
  <MazBtn>Click me</MazBtn>
</template>`
</script>
```

## With code and language props

Pass `code` and `language` to display highlighted source code via `MazCodeHighlight`. The inner highlighter automatically renders with squared corners so it sits flush against the window's border.

```vue
<template>
  <MazWindowMockup code="import MazBtn from 'maz-ui/components/MazBtn'" language="ts" />
</template>

<script lang="ts" setup>
  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
</script>
```

## Empty-state placeholder

When neither `code` nor a slot content is provided, the content area renders an empty placeholder. Pass the optional `label` prop to display a centered text inside it.

```vue
<template>
  <MazWindowMockup url="https://maz-ui.com" min-height="160px" label="Preview" />
</template>
```

## Custom translations

The URL copy button's aria-label and tooltip come from the `@maz-ui/translations` package (`windowMockup.copyUrlToClipboard` / `windowMockup.urlCopiedToClipboard`). Override per-instance with the `translations` prop:

```vue
<template>
  <MazWindowMockup
    url="https://maz-ui.com"
    min-height="80px"
    :translations="{
      copyUrlToClipboard: 'Copier l\'URL',
      urlCopiedToClipboard: 'URL copiée !',
    }"
  />
</template>
```

For app-wide translations, set up the [maz-ui translations plugin](https://maz-ui.com/ecosystem/translations.md) and the component will pick up your locale automatically.

## MazWindowMockup API

`import MazWindowMockup from 'maz-ui/components/MazWindowMockup'`

### Props

- `id` (`string`): Stable id used to scope the empty-state SVG pattern. Auto-generated if not provided.
- `variant` (`MazWindowMockupVariant`, default: `"browser"`): Window style variant. Values: `'browser'`, `'terminal'`, `'editor'` (non exhaustive).
- `url` (`string`, default: `"localhost"`): URL to display in the browser address bar (browser variant only).
- `filename` (`string`, default: `"index.vue"`): Filename to display in the editor tab (editor variant only).
- `title` (`string`, default: `"zsh"`): Title to display in the terminal title bar (terminal variant only).
- `min-height` (`string`): Minimum height of the content area as a CSS value (e.g. '200px').
- `code` (`string`): Source code to display using MazCodeHighlight. Takes priority over the default slot.
- `language` (`string`): Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash').
- `label` (`string`): Label displayed inside the empty-state placeholder when no code and no slot content are provided.
- `hide-prompt` (`boolean`, default: `false`): Whether to hide the terminal prompt prefix (no-op on non-terminal variants).
- `prompt` (`string`, default: `"$"`): Prefix to display before the code in the terminal (terminal variant only).
- `hide-url-copy` (`boolean`, default: `false`): Hide the copy-to-clipboard button next to the URL bar (browser variant only).
- `translations` (`{ copyUrlToClipboard?: string | undefined; urlCopiedToClipboard?: string | undefined; }`): Custom translations for the component. Override either key independently.

### Slots

- `#default`: Free content (image, interface, etc.) shown when code prop is not set.