z-proto

Prototyping shell web component for building interactive UI prototypes. Framework-agnostic, zero dependencies.

Features

17 device presets (mobile, tablet, desktop) + responsive mode
Manual width/height inputs with min-width/min-height constraints
5 zoom levels (50%–125%)
8 drag-to-resize handles
macOS-style window chrome (traffic lights + title bar)
Figma capture toggle (?FIGMA_KEY=<key> or figma-key attribute)
Screenshot to clipboard (Screen Capture API)
Light/dark theme via CSS custom properties
CSS loaded via import ... with { type: "css" } + adoptedStyleSheets

Usage

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

<z-proto>
  <z-proto-header>
    <!-- optional: scenario selector, nav buttons -->
  </z-proto-header>
  <z-proto-body title="My App" width="1280" height="800" min-width="320" min-height="400">
    <!-- your prototype content -->
  </z-proto-body>
</z-proto>

Attributes

`<z-proto>`

Attribute	Type	Description
`figma-key`	string	Figma file key for capture (also reads `?FIGMA_KEY=` from URL)
`zoom`	number	Initial zoom level (default: 1)

`<z-proto-body>`

Attribute	Type	Default	Description
`title`	string	`""`	Window title bar text
`width`	number	800	Initial viewport width
`height`	number	600	Initial viewport height
`min-width`	number	320	Minimum resize width
`min-height`	number	400	Minimum resize height

Child slots

Element	Purpose
`<z-proto-header>`	Content below toolbar (scenario selectors, etc.)
`<z-proto-extras>`	Content in title bar right side
`<z-proto-body>`	Main content area

Toolbar buttons

Screenshot (camera icon) — captures the content area to clipboard via Screen Capture API
Figma (appears when figma-key is set) — toggles #figmacapture hash for Figma HTML-to-Design capture

Examples

npm run serve
# open http://localhost:8080/examples/figma-capture/
# open http://localhost:8080/examples/todo-app/

figma-capture/ — Chrome extension popup prototype using htm/preact with scene state management
todo-app/ — Multi-page todo app using preact-iso with client-side routing

Local development

git clone https://github.com/djalmajr/z-proto.git
cd z-proto
npm run serve

License

MIT