Can I Create or Modify Power BI Report Visuals from React?

[S_Meghana]

Hello Microsoft Team,

I have integrated a Power BI Embeded report into my React application using the Powerbi-client-react package.

Currently, if I need to:

• Add a new visual
• Delete a visual
• Change chart type
• Change visual properties (colors, titles, formatting)
• Modify the report layout

I must open Power BI Desktop or Power BI Service, make the changes, publish the report, and then embeded the report in React reflects those changes.

My requirement is different.

I want users (or developers) to make these report UI changes directly from the React application, without opening Power BI Desktop or Power BI Service.

My questions are:

1. Is it possible to create new Power BI visuals directly from a React application using powerbi-client-react or any other Microsoft-supported SDK/API?

2. Is there any Microsoft API or SDK that allows modifying report layouts, visual formatting, or adding/removing visuals from React and saving those changes back to the Power BI report?

3. If this is not supported, what is the recommended Microsoft approach for implementing this requirement?

Thankyou.

[v-csrikanth]

Hi @S_Meghana 
We would like to inquire whether have you got the chance to check the solutions provided above in community to resolve the issue. We hope the information provided helps to clear the query. Should you have any further queries, kindly feel free to contact the Microsoft Fabric community.

[v-csrikanth]

Hi @S_Meghana 

Thank you for testing the sample and for sharing the SDK versions along with the available methods from the Page object.

You're correct based on your testing with powerbi-client 2.24.1 and powerbi-client-react 2.0.2, page.createVisual() is not available. I apologize for the confusion in my earlier reply.

Based on the current Microsoft documentation, there is no documented public API that supports creating new report visuals programmatically from an embedded React application using the Power BI JavaScript SDK.

The Power BI JavaScript SDK provides a supported subset of report authoring capabilities for embedded reports, but it does not provide the same authoring capabilities as Power BI Desktop or the Power BI Service.

If your requirement is to allow users to create entirely new visuals and save them back to the report from a React application, this capability is not currently supported through the public JavaScript SDK.

For the latest supported authoring capabilities, please refer to the official documentation:

• Report authoring for Power BI Embedded: https://learn.microsoft.com/power-bi/developer/embedded/report-authoring

• Power BI JavaScript SDK: https://learn.microsoft.com/javascript/api/overview/powerbi/

• powerbi-client-react GitHub repository: https://github.com/microsoft/powerbi-client-react

Thank you again for pointing this out. Your findings help clarify the current capabilities of the SDK for other community members as well.

Thanks.

[v-csrikanth]

Hi @S_Meghana 

Thanks for the detailed question. please check the answers below.

1. Can you create or modify visuals from React using powerbi-client-react?

Yes, when the report is embedded in Edit mode, the Power BI JavaScript Authoring APIs support:

• Creating and deleting visuals
• Moving and resizing visuals
• Changing supported visual types
• Updating the data fields used by a visual
• Applying filters
• Saving report changes via report.save()

2. Is there a Microsoft API/SDK to save changes back?

Yes, the same Power BI JavaScript SDK Authoring APIs. After making supported changes, call await report.save().

3. Recommended approach

• Visual authoring (create, delete, move, resize, change type, update fields, filters, save) -> JS Authoring APIs in Edit mode.
• Report appearance ->report themes, where applicable.
• Semantic model changes (measures, tables, relationships) -> not supported through the Authoring APIs; use the appropriate Power BI development tools.

Please note the Authoring APIs provide a supported subset of report editing and are not intended to replicate the full Power BI Desktop authoring experience.

Minimum setup:

import { useRef } from "react";
import { PowerBIEmbed } from "powerbi-client-react";
import { models } from "powerbi-client";

const embeddedReportRef = useRef();

<PowerBIEmbed
  embedConfig={{
    type: "report",
    id: reportId,
    embedUrl: embedUrl,
    accessToken: accessToken,
    tokenType: models.TokenType.Embed,
    viewMode: models.ViewMode.Edit,
    permissions: models.Permissions.All
  }}
  getEmbeddedComponent={(report) => { embeddedReportRef.current = report; }}
/>

Example: add a visual and save:

const report = embeddedReportRef.current;
const page = await report.getActivePage();

await page.createVisual(
  "columnChart",
  { x: 0, y: 0, width: 400, height: 300 },
  true // autoFocus
);

await report.save();

Please ensure the embedding scenario, user permissions, and licensing meet the requirements for editing and saving embedded reports as described in the Microsoft documentation.

References:

• Report authoring in Power BI Embedded
• Power BI JavaScript SDK
• Power BI JavaScript Playground
• powerbi-client-react on GitHub

Thanks,
C Srikanth
Community Support Team

[S_Meghana]

Hi,

Thank you for your response.

I tested the sample in my React application.

Environment:

• powerbi-client: 2.24.1
• powerbi-client-react: 2.0.2

The report loads successfully in Edit Mode, and report.getActivePage() works correctly.

However, page.createVisual is undefined.

Available page methods are:

getVisuals

getVisualByName

moveVisual

resizeVisual
setVisualDisplayState

getFilters
updateFilters
...

There is no createVisual() method in the Page object, so calling it results in:

TypeError: page.createVisual is not a function

Could you please clarify:

1. Is createVisual() available only in a newer SDK version?

2. Does it require a different embedding configuration or licensing?

3. Could you share a working sample using the current Power BI JavaScript SDK?

Thankyou.