# XWUIPreviewerXWCode

A specialized `XWUIPreviewer` subclass that bidirectionally round-trips a single xwui example across the native HTML / TS / JS conventions plus a **Frameworks** dropdown (TSX, JSX, React, Vue, Svelte, Angular, Lit, Alpine, Astro, Next, Nuxt, …). Editing in any one mode re-parses the source into a compact intermediate form and re-renders the others, so every projection stays in sync while the live preview runs the authored TS/JS verbatim.

## Usage

Seed it with a single `code` snippet (raw `<xwui-*>` HTML, or a `new XWUI*` / `XWUI.create` call); HTML/TS/JS tabs plus the Frameworks dropdown are generated automatically from that seed.

```ts
import { XWUIPreviewerXWCode } from '@exonware/xwui/power';

const previewer = new XWUIPreviewerXWCode(document.getElementById('app')!, {
  code: '<xwui-button text="Click me" variant="primary"></xwui-button>',
}, {
  variant: 'full',
  showConsole: true,
  editorEngine: 'codemirror6',
});
```

## HTML Seed

Round-trips an HTML seed into TS + JS tabs.

```example
file: examples/HtmlSeed.ts
html: examples/HtmlSeed.html
title: HTML Seed
description: Round-trips an HTML seed into TS + JS tabs.
```

## TS Seed

Seeds from a `new XWUI*` TS call; HTML + JS tabs are derived.

```example
file: examples/TsSeed.ts
html: examples/TsSeed.html
title: TS Seed
description: Seeds from a `new XWUI*` TS call; HTML + JS tabs are derived.
```

## Multi Component Seed

Seeds two components at once so every mode tab renders both, kept in sync.

```example
file: examples/MultiComponentSeed.ts
html: examples/MultiComponentSeed.html
title: Multi Component Seed
description: A two-component TS seed round-tripped across HTML/TS/JS tabs.
```

## Simple Embed

The lightweight 'simple' preset - a Preview+Code viewer for docs.

```example
file: examples/SimpleEmbed.ts
html: examples/SimpleEmbed.html
title: Simple Embed
description: Compact Preview+Code embed with the console and chrome hidden.
```

```api
```