This example shows how to integrate the Report Components into a native Python application.

Let's start with the viewer. First, load the viewer scripts:

viewer.html

...

<!-- Stimulsoft Reports.JS -->
<script src="/scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="/scripts/stimulsoft.viewer.js" type="text/javascript"></script>

...

Next, you need to create the report viewer and define the options. Then, create a new report instance and load report from url. Finally, assign report to the viewer, the report will be built automaticalliy after rendering the viewer:

viewer.html

...

<script type="text/javascript">
	// Create the report viewer with default options
	var viewer = new Stimulsoft.Viewer.StiViewer(null, "StiViewer", false);
	// Create a new report instance
	var report = new Stimulsoft.Report.StiReport();
	// Load report from url
	report.loadFile("reports/SimpleList.mrt");
	// Assign report to the viewer, the report will be built automatically after rendering the viewer
	viewer.report = report;
</script>

...

To show the report viewer, use this code in the required place:

viewer.html

...

<div>
	<script type="text/javascript">
		// Show the report viewer in this block
		viewer.renderHtml();
	</script>
</div>

...

Everything is the same for the Designer. First, load the designer scripts:

designer.html

...

<!-- Stimulsoft Reports.JS -->
<script src="/scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="/scripts/stimulsoft.viewer.js" type="text/javascript"></script>
<script src="/scripts/stimulsoft.designer.js" type="text/javascript"></script>
<script src="/scripts/stimulsoft.blockly.editor.js" type="text/javascript"></script>

...

Next, you need to create the report designer and define the options. Then, create a new report instance and load report from url. Finally, assisgn report to the designer:

designer.html

...

<script type="text/javascript">
	// Create the report designer with default options
	var designer = new Stimulsoft.Designer.StiDesigner(null, "StiDesigner", false);
	// Create a new report instance
	var report = new Stimulsoft.Report.StiReport();
	// Load report from url
	report.loadFile("reports/SimpleList.mrt");
	// Assign report to the designer
	designer.report = report;
</script>

...

To show the report designer, use this code in the required place:

designer.html

...

<div>
	<script type="text/javascript">
		// Show the report viewer in this block
		viewer.renderHtml();
	</script>
</div>

...

To start the server, it's enough to execute the specified command:
python app.py

After launching, open this URL in the browser:
http://127.0.0.1:8000