diff --git a/build/copy.js b/build/copy.js
index 3f9616e..9fc3413 100644
--- a/build/copy.js
+++ b/build/copy.js
@@ -2,14 +2,17 @@ const gulp = require('gulp');
 var shelljs = require('shelljs');
 const fs = require('fs');
 
-const extensionsAssets = ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js', 'signature.reportitem.css','signature.dialog.css','signature.reportitem.js','signature.dialog.js'];
+const extensionsAssets = ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js', 'signature.reportitem.css','signature.dialog.css','signature.reportitem.js','signature.dialog.js','shape.reportitem.css','shape.reportitem.js','document.reportitem.css','pdfdocument.reportitem.js','htmldocument.reportitem.js'];
 const extensionsItemSrcDir = 'node_modules/@boldreports/javascript-reporting-extensions/';
 const extensionsItemDir = './src/controls/extensions/report-item-extensions/';
 const extensionsExportTemp = {
     '1D': 'export { EJBarcode };',
     '2D': 'export { EJQRBarcode };',
     'signature': 'export { EJSignature }',
-    'signatureDialog': 'export { SignatureDialog }'
+    'signatureDialog': 'export { SignatureDialog }',
+    'shape': 'export { EJShape }',
+    'pdfDocument': 'export { EJPdfDocument }',
+    'htmlDocument': 'export { EJHtmlDocument }',
 }
 
 gulp.task('copy-src-assets', function (done) {
@@ -44,7 +47,10 @@ gulp.task('update-extensions-export', (done) => {
         'barcode': ['barcode.reportitem.js', '1D'],
         'qrbarcode': ['qrbarcode.reportitem.js', '2D'],
         'signature': ['signature.reportitem.js', 'signature'],
-        'signatureDialog': ['signature.dialog.js', 'signatureDialog']
+        'signatureDialog': ['signature.dialog.js', 'signatureDialog'],
+        'shape': ['shape.reportitem.js', 'shape'],
+        'pdfDocument': ['pdfdocument.reportitem.js', 'pdfDocument'],
+        'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument'],
     };
     const updateFile = (key, [filename, exportKey]) => {
         const filePath = `${extensionsItemDir}${filename}`;
diff --git a/package.json b/package.json
index 177d4f0..d429320 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "react-sample-browser",
-  "version": "9.1.7",
+  "version": "10.1.11",
   "private": true,
   "dependencies": {
-    "@boldreports/react-reporting-components": "9.1.7",
-    "@boldreports/javascript-reporting-extensions": "9.1.7",
+    "@boldreports/react-reporting-components": "10.1.11",
+    "@boldreports/javascript-reporting-extensions": "10.1.11",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@testing-library/user-event": "12.8.3",
diff --git a/src/controls/designer/designer.js b/src/controls/designer/designer.js
index 1ae3b19..44532ff 100644
--- a/src/controls/designer/designer.js
+++ b/src/controls/designer/designer.js
@@ -52,6 +52,29 @@ var reportItemExtensions = [{
       description: 'Display the different types of shapes as report item',
       title: 'Shapes'
   }
+}, {
+  name: 'pdfdocument',
+  className: 'EJPdfDocument',
+  imageClass: 'customitem-pdfdocument',
+  displayName: 'PDF',
+  category: 'Documents',
+  toolTip: {
+      requirements: 'Add a report item to the designer area.',
+      description: 'Display the pdf document content in the report',
+      title: 'PDF'
+  },
+  allowHeaderFooter: false
+}, {
+  name: 'htmldocument',
+  className: 'EJHtmlDocument',
+  imageClass: 'customitem-htmldocument',
+  displayName: 'Html',
+  category: 'Documents',
+  toolTip: {
+      requirements: 'Add a report item to the designer area.',
+      description: 'This report item used to process the html markup text and url',
+      title: 'Html'
+  },
 }];
 
 function DESIGNER_TOOLBAR_RENDERING(args) {
diff --git a/src/index.js b/src/index.js
index c9d46f9..666b81c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -22,6 +22,11 @@ import { SignatureDialog } from './controls/extensions/report-item-extensions/si
 import './controls/extensions/report-item-extensions/shape.reportitem.css';
 import { EJShape} from './controls/extensions/report-item-extensions/shape.reportitem';
 
+//Document
+import './controls/extensions/report-item-extensions/document.reportitem.css';
+import { EJPdfDocument } from './controls/extensions/report-item-extensions/pdfdocument.reportitem';
+import { EJHtmlDocument } from './controls/extensions/report-item-extensions/htmldocument.reportitem';
+
 let barcode = 'EJBarcode';
 let qrBarcode = 'EJQRBarcode';
 window[barcode] = EJBarcode;
@@ -35,6 +40,11 @@ window[signatureDialog] = SignatureDialog;
 let shape = 'EJShape';
 window[shape] = EJShape;
 
+let pdfDocument = 'EJPdfDocument';
+let htmlDocument = 'EJHtmlDocument';
+window[pdfDocument] = EJPdfDocument;
+window[htmlDocument] = EJHtmlDocument;
+
 //code-mirror
 import 'codemirror/lib/codemirror';
 import 'codemirror/addon/hint/show-hint';