> ## Documentation Index
> Fetch the complete documentation index at: https://anaconda.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Publishing notebooks

export const PreviewPanel = () => {
  return <span className="inline_icon">
      <svg viewBox="0 0 16 16" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="16" height="16" rx="1.28" fill="#0072B5" />
        <rect x="2.38" y="3.74" width="11.23" height="1.19" fill="white" />
        <rect x="2.38" y="7.49" width="11.23" height="1.19" fill="white" />
        <rect x="2.38" y="11.23" width="11.23" height="1.19" fill="white" />
        <circle cx="5.36" cy="4.34" r="1.28" fill="white" />
        <ellipse cx="10.47" cy="8.09" rx="1.28" ry="1.28" fill="white" />
        <ellipse cx="5.36" cy="11.83" rx="1.28" ry="1.28" fill="white" />
      </svg>
    </span>;
};

export const TroubleshootSolution = ({children}) => <>
    <hr className="my-3 w-full" />
    <details className="mt-3">
      <summary className="cursor-pointer font-semibold text-base mb-1">
        Solution
      </summary>
      <div className="mt-2 ml-4" data-component-part="step-content">
        {children}
      </div>
    </details>
  </>;

export const TroubleshootCause = ({children}) => <details className="mt-3 mb-2">
    <summary className="cursor-pointer font-semibold text-base mb-1">
      Cause
    </summary>
    <div className="mt-2 ml-4" data-component-part="step-content">
      {children}
    </div>
  </details>;

export const TroubleshootTitle = ({children}) => <>
    <p className="m-0 font-semibold text-xl leading-tight mb-2" role="heading" aria-level={3}>
      {children}
    </p>
    <hr className="my-3 w-full" />
  </>;

export const Troubleshoot = ({children}) => <div className="callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border troubleshoot-admonition dark:troubleshoot-admonition" data-callout-type="troubleshoot">
    <div className="mt-0.5 w-4">
      <svg width="14" height="14" viewBox="0 0 640 640" fill="currentColor" className="w-4 h-4" aria-label="Troubleshoot">
        <path d="M541.4 162.6C549 155 561.7 156.9 565.5 166.9C572.3 184.6 576 203.9 576 224C576 312.4 504.4 384 416 384C398.5 384 381.6 381.2 365.8 376L178.9 562.9C150.8 591 105.2 591 77.1 562.9C49 534.8 49 489.2 77.1 461.1L264 274.2C258.8 258.4 256 241.6 256 224C256 135.6 327.6 64 416 64C436.1 64 455.4 67.7 473.1 74.5C483.1 78.3 484.9 91 477.4 98.6L388.7 187.3C385.7 190.3 384 194.4 384 198.6L384 240C384 248.8 391.2 256 400 256L441.4 256C445.6 256 449.7 254.3 452.7 251.3L541.4 162.6z" />
      </svg>
    </div>
    <div className="prose min-w-0 w-full">{children}</div>
  </div>;

Anaconda Notebooks supports previewing and deploying your notebooks as Panel applications. Panel is a Python-first web framework designed for data applications that allows you to create interactive web applications directly from your existing notebook environment. For more information, see the official [Panel](https://panel.holoviz.org/) docs.

With Panel, you can share your data and analysis with colleagues and stakeholders through interactive web interfaces. This guide outlines how to preview and deploy your Panel app at a custom URL.

## Creating Panel apps

You can create a Panel app by either importing Panel and using the `.servable()` method or through the drag-and-drop Layout Builder:

<Tabs>
  <Tab title="Importing Panel">
    1. Import the Panel library into your notebook.

    2. Create your [Panel components](https://panel.holoviz.org/reference/index.html).

    3. Use the `.servable()` method to mark the Panel components you want to include in your dashboard.

    4. (Optional) If you want to render your Panel app output in your notebook, include the `panel.extension` to ensure the required JavaScript and CSS resources are loaded.

       ```py Example Panel app theme={null}
       import panel as pn
       pn.extension()
       pn.Row("Hello, World!").servable()
       ```

    5. View a preview of your dashboard by selecting <PreviewPanel /> **Preview with Panel**.
  </Tab>

  <Tab title="Layout Builder">
    1. Code as you normally would in your notebook.

           <Note>
             You don't need to import Panel to use the Layout Builder.
           </Note>

    2. Open the Panel app preview by selecting <PreviewPanel /> **Preview with Panel**.

    3. Use the drag-and-drop Layout Builder in the preview tab to arrange and modify your app components. See the [Panel Layout Builder documentation](https://panel.holoviz.org/how_to/notebook/layout_builder.html) for detailed instructions.
  </Tab>
</Tabs>

<Warn>
  Rendering a preview of Panel apps uses [CPU seconds](/tools/anaconda-notebooks/notebook-storage-memory#what-is-a-high-compute-second).
</Warn>

## Publishing Panel apps

To publish a Panel app:

1. Click <Icon icon="rocket" iconType="regular" color="#08CA49" /> **Save and publish** at the top of the notebook.

   <Frame>
     <img src="https://mintcdn.com/anaconda-29683c67/suT8p96bcArryiKX/images/notebook_save_publish.png?fit=max&auto=format&n=suT8p96bcArryiKX&q=85&s=2354b1b3840aacae8eb84225489a6283" alt="" width="3460" height="1920" data-path="images/notebook_save_publish.png" />
   </Frame>

2. Click **Publish**. Your app appears under **My Apps** on the **Apps Management** page.

   <Note>
     The page will appear as a 502 Bad Gateway until the publication process is complete.
   </Note>

3. Click <Icon icon="eye" iconType="regular" /> **View App** to view the app in Notebooks.

4. Click <Icon icon="ellipsis-vertical" iconType="regular" /> actions, then **View in New Browser Tab** to open your app in a new tab.

5. Copy the URL from your browser's address bar to share with others.

   <Tip>
     You can also restart, unpublish, download, and more from the <Icon icon="ellipsis-vertical" iconType="regular" /> actions menu.

     <Frame>
       <img src="https://mintcdn.com/anaconda-29683c67/q5KdI2mr6ZKMYRZp/images/notebook_app_actions.png?fit=max&auto=format&n=q5KdI2mr6ZKMYRZp&q=85&s=08e97d06a4fa2a422aa02a0718d75a53" alt="" width="3460" height="1920" data-path="images/notebook_app_actions.png" />
     </Frame>
   </Tip>

### Publishing limits

The number of apps you can publish depends on your subscription plan. See our [pricing page](https://www.anaconda.com/pricing) for details.

## Further Panel resources

Here are some additional resources to help you familiarize yourself with Panel and use it more effectively:

* Familiarize yourself with Panel with the [getting started guide](https://panel.holoviz.org/getting_started/index.html).
* Learn how to [display output in Jupyter-based notebooks](https://panel.holoviz.org/how_to/notebook/notebook.html).
* Discover how to use specific features in the [how-to guide](https://panel.holoviz.org/how_to/index.html).
* Explore different components and how to use them with the [component gallery](https://panel.holoviz.org/reference/index.html).
* Gain inspiration from the [app gallery](https://panel.holoviz.org/gallery/index.html).

## Troubleshooting

<Troubleshoot>
  <TroubleshootTitle>
    ### Published Panel app is blank
  </TroubleshootTitle>

  <TroubleshootCause>
    The app can appear blank if the notebook cannot be executed sequentially from top to bottom, which can happen when cells have dependencies that aren't met or are out of order.
  </TroubleshootCause>

  <TroubleshootSolution>
    If you added content to your app but there's still nothing showing up, ensure that your notebook can be run from top to bottom. The easiest way to test this is to click **Run** in the top menu, then click *Run All Cells*.
  </TroubleshootSolution>
</Troubleshoot>
