# Framer

A dev harness that previews graphic pages in a resizable Pym.js iframe, with a picker to switch between embeds.

**Category:** Components/Utilities/Framer

**Import:** `import { Framer } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `embeds` | `string[]` | `[]` |  | — |
| `breakpoints` | `number[]` | `[330, 510, 660, 930, 1200]` |  | — |
| `minFrameWidth` | `number` | `320` |  | — |
| `maxFrameWidth` | `number` | `1200` |  | — |
| `searchType` | `'dropdown' \| 'typeahead'` | `'dropdown'` |  | — |

## Examples

### Demo

```svelte
<Framer
  embeds={[
      'https://graphics.reuters.com/USA-CONGRESS/FUNDRAISING/zjvqkawjlvx/embeds/en/embed/?zzz',
      'https://www.reuters.com/graphics/UKRAINE-CRISIS/MAP/klvymdzdrvg/embeds/en/map/',
    ]}
/>
```

## Documentation

# FeaturePhoto

An embed tool for development in the graphics kit.

```svelte
<script>
  import { Framer } from '@reuters-graphics/graphics-components';

  const embeds = ['/embeds/my-chart/index.html'];
</script>

<Framer {embeds} />
```