Integration guide · Web components

Put the report designer inside your application

Open Reports can provide a report viewer or the full visual designer inside a web application. Your application remains responsible for user identity, permissions, business data, and where saved report definitions live.

Start with a viewer or designer element

Load the embed module from your Open Reports server, then add the element to a page. The element works in plain HTML and can be used from React, Vue, or Angular.

<script type="module"
  src="https://reports.example.com/embed/open-reports.js">
</script>

<open-report-viewer
  server="https://reports.example.com"
  template="invoice"
  style="height: 720px">
</open-report-viewer>

<open-report-designer
  server="https://reports.example.com"
  template="invoice"
  height="720px">
</open-report-designer>

The template attribute selects a report saved in Open Reports' optional template store. For host-owned report JSON, initialize the viewer or designer through the JavaScript API instead.

Keep definitions in your host application

In host mode, load the authorized JSON definition from your application and save edits through your own callback. The host decides the tenant, user permissions, versioning, and persistence.

const designer = createDesigner(document.querySelector("#designer"), {
  server: OPEN_REPORTS_URL,
  definition: await reportStore.get(tenantId, "invoice"),
  saveMode: "host",
  onSaveDefinition: async (nextDefinition) => {
    await reportStore.save(tenantId, "invoice", nextDefinition);
  },
});

Keep private keys and data on the server

Do not put a privileged API key in browser markup or JavaScript. For private records, let your backend authenticate the user, authorize the requested record, prepare allowed data, and call the render API. Only send sample data to a designer when that editor user is allowed to see it.

The browser integration is a UI surface, not your application’s authorization boundary. Read the security notes before exposing private reports.

Use a practical first integration

Embed the designer on an internal report-settings screen, save the returned JSON in the host application's normal storage, then call POST /api/v1/render from the backend when a user prints or downloads a document.