# XWUIPreviewer

Preview + Code tabs for docs / playgrounds. Scales from the **full** chrome (platform desktop/tablet/phone, orientation, theme switch, console) down to a **simple** Preview+Code embed or a chrome-less preview - the same lightweight shape a docs example viewer uses. Code tab uses `XWUIScriptEditor`.

## Basic Usage

Preview/Code tabs for a tiny HTML snippet.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Preview/Code tabs for a tiny HTML snippet.
```

## Simple Variant

`variant: 'simple'` - just Preview + Code, no platform/theme/console chrome.

```example
file: examples/SimpleVariant.ts
html: examples/SimpleVariant.html
title: Simple Variant
description: `variant: 'simple'` - just Preview + Code, no platform/theme/console chrome.
```

## Module URL

`data.moduleUrl` runs an ES module directly in a minimal scaffold (the docs example-viewer path).

```example
file: examples/ModuleUrl.ts
html: examples/ModuleUrl.html
title: Module URL
description: `data.moduleUrl` runs an ES module directly in a minimal scaffold (the docs example-viewer path).
```

## Preview Only

`showToolbar: false` - chrome-less live preview, no tabs.

```example
file: examples/PreviewOnly.ts
html: examples/PreviewOnly.html
title: Preview Only
description: `showToolbar: false` - chrome-less live preview, no tabs.
```

## Platform And Theme

Toolbar flip platform + theme controls.

```example
file: examples/PlatformAndTheme.ts
html: examples/PlatformAndTheme.html
title: Platform And Theme
description: Toolbar flip platform + theme controls.
```

## Multiple Code Modes

TS / JS / HTML variants of the same example.

```example
file: examples/MultipleCodeModes.ts
html: examples/MultipleCodeModes.html
title: Multiple Code Modes
description: TS / JS / HTML variants of the same example.
```

```api
```