AI Elements

Web Preview

Sandboxed iframe preview with URL chrome and a console.

Import

tsx

import { WebPreview } from "@cronus-ui/ui";

bash

npx cronus-ui add web-preview

Examples

Sandboxed preview

URL chrome around an iframe. The body stays empty until you set a src.

tsx

<WebPreview defaultUrl="https://aicronus.com">
  <WebPreviewNavigation>
    <WebPreviewUrl />
  </WebPreviewNavigation>
  <WebPreviewBody className="h-56" />
</WebPreview>

API Reference

Generated from the component's exported types.

WebPreviewLabels

Prop	Type	Default	Description
`urlPlaceholder`*	`string`	—	—
`preview`*	`string`	—	—
`console`*	`string`	—	—
`consoleEmpty`*	`string`	—	—

WebPreviewProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`defaultUrl`	`string`	`""`	—
`onUrlChange`	`(url: string) => void`	—	—
`labels`	`Partial<WebPreviewLabels>`	—	Override default English strings.

WebPreviewNavigationProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.

WebPreviewNavigationButtonProps

Extends ButtonProps

Prop	Type	Default	Description
`tooltip`	`string`	—	—

WebPreviewUrlProps

Extends InputProps

No own props — see the extended type above for available props.

WebPreviewBodyProps

Extends ComponentProps<"iframe">

Prop	Type	Default	Description
`ref`	`Ref<HTMLIFrameElement>`	—	Ref forwarded to the underlying DOM node.
`loading`	`ReactNode`	—	—

WebPreviewConsoleProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`logs`	`WebPreviewConsoleLog[]`	`[]`	—