# @figspec/components

> Unofficial Figma spec viewer: Live Embed Kit - Live + Guidelines + Inspector

Latest version **2.1.0** (published 2026-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @figspec/components
pnpm add @figspec/components
yarn add @figspec/components
bun add @figspec/components
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2026-01-14 |
| First published | 2020-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 222.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 66 |
| Maintainers | pockawoooh |
| Keywords | figma, webcomponents |

## Links

- npm: https://www.npmjs.com/package/@figspec/components
- Repository: https://github.com/pocka/figspec
- Homepage: https://github.com/pocka/figspec#readme
- Issues: https://github.com/pocka/figspec/issues
- npm.io page: https://npm.io/package/@figspec/components

## Recent versions

- 2.1.0 (latest) — 2026-01-14
- 2.0.5 — 2025-11-24
- 2.0.4 — 2024-02-27
- 2.0.3 — 2024-01-05
- 1.0.3 — 2024-01-05
- 2.0.2 — 2023-09-12
- 2.0.1 — 2023-09-06
- 2.0.0 — 2023-09-06
- 1.0.2 — 2023-07-27
- 1.0.1 — 2022-04-16
- 1.0.0 — 2021-09-23
- 0.1.10 — 2021-09-23
- 0.1.9 — 2021-05-26
- 0.1.8 — 2021-05-16
- 0.1.7 — 2021-05-15
- … 5 more at https://npm.io/package/@figspec/components/versions

## README

# @figspec/components

[![npm version](https://img.shields.io/npm/v/%40figspec/components)](https://www.npmjs.com/package/@figspec/components)
[![docs HTML (with demo)](<https://img.shields.io/badge/docs-HTML%20(with%20demo)-e67700>)
](https://pocka.github.io/figspec/)

`@figspec/components` is a set of CustomElements that renders Figma file/frame and displays Figma's editor-like inspector for a selected node.

The components are designed to work on Figma REST API result.
This library does not provided a functionality to invoke Figma REST API endpoints.

## Installation

```sh
$ npm i @figspec/components
```

This library does not provide bundled script. Please use CDN or bundle on your own.

## Usage

Import the entry script (`import '@figspec/components'`) and it'll register our custom elements.
Then you can now use these on your page.

```html
<body>
  <figspec-frame-viewer id="figma_frame"></figspec-frame-viewer>
</body>
```

```js
// your script.js
import "@figspec/components";

const figmaFrame = document.getElementById("figma_frame")

figmaFrame.apiResponse = /* ... */;
figmaFrame.renderedImage = /* ... */;
```

To display an entire Figma File, use `<figspec-file-viewer>` instead.

```html
<body>
  <figspec-file-viewer id="figma_file"></figspec-file-viewer>
</body>
```

```js
// your script.js
import "@figspec/components";

const figmaFile = document.getElementById("figma_file")

figmaFrame.apiResponse = /* ... */;
figmaFrame.renderedImages = /* ... */;
```

To see working examples and API docs, please check out [the docs site](https://pocka.github.io/figspec/).

## Browser supports

This library works on browser implementing WebComponents v1 spec and ES2019.
The bundled files are at `esm/es2019`.

## Related packages

- [`@figspec/react`](https://github.com/pocka/figspec-react) ... React bindings for this package.

---
_Source: https://npm.io/package/@figspec/components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._