<BrowserWindow> is a great component, can we get it added with some config options?

[Dannyholt]

Is it possible to make the <BrowserWindow> component part of Docusarus out-the-box and also have it configurable such as changing the URL shown in the address bar?

I was planning to use it on of our docs, but instead had to opt for an image as I needed the URL to be something other than http://localhost:3000.

Something like this, if possible.

<BrowserWindow url='https://my-website.com/'>

[Josh-Cena]

Hi, our BrowserWindow already accepts alternative URLs, if you look at the source:

export default function BrowserWindow({
  children,
  minHeight,
  url = 'http://localhost:3000',
}: Props): JSX.Element {
  return (
    <div className={styles.browserWindow} style={{minHeight}}>
      <div className={styles.browserWindowHeader}>
        <div className={styles.buttons}>
          <span className={styles.dot} style={{background: '#f25f58'}} />
          <span className={styles.dot} style={{background: '#fbbe3c'}} />
          <span className={styles.dot} style={{background: '#58cb42'}} />
        </div>
        <div className={styles.browserWindowAddressBar}>{url}</div>
        <div className={styles.browserWindowMenuIcon}>
          <div>
            <span className={styles.bar} />
            <span className={styles.bar} />
            <span className={styles.bar} />
          </div>
        </div>
      </div>

      <div className={styles.browserWindowBody}>{children}</div>
    </div>
  );
}

It's exactly what you are asking for :)

[Dannyholt]

Ah, I didn't try it lol, but working great, thanks!

[slorber]

Is it possible to make the component part of Docusarus out-the-box a

Could be worth opening a Canny feature request.

That's a bit out of the scope of Docusaurus IMHO but would be convenient.

We can eventually extract it to a separate package? And maybe see if there are other useful opinionated doc components to expose as well?

That looks like a quite similar use-case to tabs: Docusaurus can work without, but it remains a great useful addition.

Not sure what's the best option

[ilteoood]

What if this is added as a component inside the Theme package?
I see other components already exist there, like Tabs and TabItem.

I can help with this!

[slorber]

It can as well be a regular React component library that you can npm install, totally decoupled from Docusaurus, so that everybody can benefit from it. You don't have to ask us permission to create such a lib, and it probably already exists 😄

[bedroesb]

I quite like the original proposal since it makes it very easy to have different browser windows with different urls on one page without having to use the JSX syntax.