Skip to content

Working with Code

Plotly Studio apps are powered by Dash, Plotly's Python framework. When you make changes to a Plotly Studio app by updating the outline, Plotly Studio regenerates this underlying Dash app code. Although you don't need to know how to code to use Plotly Studio and can make changes using natural language, you can also make changes directly to the app code.

The code in a Plotly Studio app uses Dash, Plotly.py, Dash Design Kit, as well as third-party Python libraries like Pandas.

Code structure

When Plotly Studio generates an app, it generates code in modules:

  • Data: Loads the data using Pandas, processes it, and maps columns to specific types.

  • Layout: Imports all other components, for example, individual charts, filters, the table, and defines the order of these components. This module also contains the app title, description, and hero component.

  • Theme: Dash Design Kit theme file that defines the colors and styles that the app uses.

  • Filter Component: Renders the global filter controls displayed at the top of the generated app. It takes in the data loaded by the data module and returns it filtered to data cards, the data table, and charts.

  • Data Cards: Renders Dash Design Kit DataCard components, which are useful for highlighting important KPIs and at-a-glance statistics.
  • Data Table: Renders a Dash AG Grid component that displays the data in a table.
  • Charts: Renders Plotly.py charts using the Dash Design Kit Graph component, ddk.Graph.

Updating the code

To update code, select a component, chart, or one of the setup modules from the sidebar and select the Code tab:

Update the code

Make your desired changes and then select Save:

Save code updates

When you save a code change, Plotly Studio regenerates the module specification to reflect the changed code and updates the preview.

Plotly Studio apps have access to the following Plotly and third-party packages, and you can use these when making code updates:

  • dash
  • dash-ag-grid
  • dash-design-kit
  • narwhals
  • numpy
  • pandas
  • plotly
  • pydantic
  • requests
  • statsmodels

Info

Avoid adding data directly in your app code. The code gets sent to the LLM with each request and can overload its limited context window.

Additional resources