This example shows how to show the HTML Report Designer on the page and load the report template for editing. First, you need to add the JavaScript libraries and CSS styles to the Web page. For example, create the designer.php file and add links to the all necessary files:
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Stimulsoft Reports.PHP - JS Report Designer</title>
	
	<!-- Report Office2013 style -->
	<link href="/css/stimulsoft.viewer.office2013.css" rel="stylesheet">
	<link href="/css/stimulsoft.designer.office2013.lightgray.teal.css" rel="stylesheet">
	
	<!-- Stimusloft 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>
</head>
<body>
	<div id="designerContent"></div>
</body>
</html>

To communicate the Designer with the PHP server-side, some functions are needed. To add them to the Web page, it is enough to call StiHelper::initialize() static PHP function in the <head> section. This function can be found in the helper.php file, so add this file import to the top of the Web page:
<?php
	require_once 'stimulsoft/helper.php';
?>

...

<?php
	StiHelper::initialize();
?>

Use the following JavaScript code to create the object with Designer options and set the required values. For example, show Designer in Full Screen Mode by default. Next, create a Designer object, and pass options to it. The designer.renderHtml() method renders the Designer content into the specified HTML element:
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;

var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml("designerContent");

To load report template and assign it to the Designer you can use the following JavaScript code:
var report = new Stimulsoft.Report.StiReport();
report.loadFile("reports/SimpleList.mrt");
designer.report = report;

На скриншоте ниже Вы можете увидеть результат выполнения данного кода:

Edit Report in HTML Designer