Web component · zero dependencies

Frame any HTML prototype.

z-proto is a device shell you drop around mockups: presets, zoom, eight resize handles, macOS chrome, screenshot, and Figma capture. Framework-agnostic. No build step.

Presets

17 devices + responsive

Zoom

50% – 200%

Resize

8 handles

Capture

Clipboard + Figma

Install from jsDelivr

<script type="module" src="https://cdn.jsdelivr.net/gh/djalmajr/z-proto@main/src/z-proto.js"></script>

<z-proto>
  <z-proto-header><!-- optional scene nav --></z-proto-header>
  <z-proto-body title="My App" width="1280" height="800">
    <!-- prototype content -->
  </z-proto-body>
</z-proto>

This page is running in z-proto. Use the toolbar to change device, zoom, and size — the same chrome your prototype gets.

In this repository

Two working prototypes.

Both examples load the local web component and run without a bundler.