You are viewing the legacy documentation of Plasma featuring the components from the@coveord/plasma-react and @coveord/plasma-style packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine package.

Browser preview

A browser preview shows the result of configuration changes in a simplified representation of a browser interface.

View source

Hello World

Here's the description

1
import {BrowserPreview} from '@coveord/plasma-react';
2

3
export default () => (
4
    <BrowserPreview title={'Custom title! Custom title!'}>
5
        <h4>Hello World</h4>
6
        <p>Here's the description</p>
7
    </BrowserPreview>
8
);

Props

Name	Type	Default	Description
`children`	`ReactNode`
`headerDescription`	`string`	`The final look in your search page may differ due to the customization you made in your page.`	Text that will be displayed in the tooltip on the i icon
`title`	`string`		Title of the browser preview

Examples

Empty state

Select a Query Pipelineto see the preview

1
import {BrowserPreview, BrowserPreviewEmpty} from '@coveord/plasma-react';
2

3
export default () => (
4
    <BrowserPreview>
5
        <BrowserPreviewEmpty onClick={() => alert('Clicked!')}>
6
            <span>
7
                Select a <span className="bolder">Query Pipeline</span>
8
            </span>
9
            <span>to see the preview</span>
10
        </BrowserPreviewEmpty>
11
    </BrowserPreview>
12
);

No guidelines exist for BrowserPreview yet.

Create guidelines