PitchPrint is built on  T3 Javascript Framework and adheres to its core philosophy of modular design. To this end, everything on the PitchPrint app is actually a module and are loosely coupled, which means modules don't talk directly to each other. They simply broadcast events and any interested listener can plug in and perform an action based on the event.

There is only one custom event pipe in PitchPrint and is based on the  T3's EventTarget object.

This can be accessed easily via the designer once it has been  instantiated as described here.


var iEvents =;
If you are on any of our frameworks, you can use the  designer ready method to hook your events

Developers can attach listeners to this object.

Adds a new event handler for a particular type of event.

function doSomething(_e) {
	//Do something when this function is called..
	//_e contains the event dispatched with its data
iEvents.on('after-show', doSomething);

Or talk to the app by firing an event!'show-preview', null);

Events you can listen for

List of events your app can listen for

// 'resize' - Dispatched when the window is resized.
iEvents.on('resize', _doSomething);

// 'window-focused' - Dispatched when the window gains focus
iEvents.on('window-focused', _doSomething);

// 'fonts-loaded' - Dispatched when all fonts have been loaded
iEvents.on('fonts-loaded', _doSomething);

// 'before-show' - Dispatched before the editor is lunched
iEvents.on('before-show', _doSomething);

// 'after-show' - Dispatched when the editor is fully lunched
iEvents.on('after-show', _doSomething);

// 'design-loaded' - Dispatched when a design has been loaded to canvas
iEvents.on('design-loaded', _doSomething);

// 'app-shown' - Dispatched when the editor has been displayed
iEvents.on('app-shown', _doSomething);

// 'app-closed' - Dispatched when the editor has been closed
iEvents.on('app-closed', _doSomething);

// 'app-client-pageCount' - Dispatched when number of pages has changed.
iEvents.on('app-client-pageCount', _doSomething);

// 'app-client-templateChange' - Dispatched when the template image is changed
iEvents.on('app-client-templateChange', _doSomething);

// 'app-client-canvasResized' - Dispatched when page dimensions are changed
iEvents.on('app-client-canvasResized', _doSomething);

// 'page-created' - Dispatched when a page has been added
iEvents.on('page-created', _doSomething);

// 'page-select-end' - Dispatched when another page is selected
iEvents.on('page-select-end', _doSomething);

// 'before-start-save' - Dispatched before the app start saving
iEvents.on('before-save', _doSomething);

// 'project-saved' - Dispatched when the project has been saved and pdf..
// being generated. It passes an JSON data with the project details: 
// source: 'strgified JSON of the project source code',
// projectId: 'string',
// numPages: number of pages in the project,
// previews: [] array of the page previews,
// meta: Additional meta data relating to the project
iEvents.on('project-saved', _doSomething);

// 'stage-adjusted' - Dispatched when current canvas size adjusts
iEvents.on('stage-adjusted', _doSomething);

// 'before-preview' - Dispatched before the preview is shown
// In your _doSomething function, you can set this variable to true to prevent
// PPCLIENT.designer.getModel().runtime.act.overidePreview = true;
iEvents.on('before-preview', _doSomething);

// 'module-initialized' - Dispatched when a module has finished initializing
iEvents.on('module-initialized', _doSomething);

// 'lib-ready' - Dispatched when the library files have all been loaded
iEvents.on('lib-ready', _doSomething);

// 'design-before-loading-pages' - Dispatched just before the designer loads
// the pages unto canvas..
iEvents.on('design-before-loading-pages', _doSomething);

// 'design-before-after-pages' - Dispatched just after the designer loads
// the pages unto canvas..
iEvents.on('design-after-loading-pages', _doSomething);

Events you can fire

List of events your app can dispatch to PitchPrint

// 'show-preview' - Show design preview'show-preview');

// 'hide-preview' - Hide design preview'hide-preview');

// 'select-preview' - Select a preview page. Parameter should be a string
// + : Next page
// - : Previous page'select-preview', '+');

// 'delete-items' - Delete all currently selected items'delete-items');

// 'copy-items' - Copy all currently selected items into clipboard'copy-items');

// 'cut-items' - Cut all currently selected items'cut-items');

// 'paste-items' - Paste items in the clipboard on the current canvas'paste-items');

// 'discard-selection' - Deselect currently selected items'discard-selection');

// 'undo' - Undo last action'undo');

// 'redo' - Redo previous action'redo');

// 'show-editor' - Launch the editor window'show-editor');

// 'load-design' - Load design'load-design', _designJsonData);

// 'load-design-by-id' - Load design by designId'load-design-by-id', _designId);

// 'show-preset-form' - Show the preset form'show-preset-form');

// 'hide-preset-form' - Hide the preset form'hide-preset-form');

// 'close-app' - Close the app'close-app');

// 'resume-app' - Resume app after closing it'resume-app');

// 'launch-tour' - Start the tour help'launch-tour');

// 'show-welcome' - Show the welcome message if any one was set'show-welcome');

// 'reload-app' - Reload the design'reload-app');

// 'select-page' - Change to page.. Parameter is page index'select-page', _idx);

// 'page-swap-dimension' - Swap the current page dimension
// Between potrait and landscape'page-swap-dimension');

// 'zoom-page' - Zoom current page. Parameters are:
// + : Zoom in
// - : Zoom out'zoom-page', '+');

// 'scale-to-fit' - Zoom the current page to fit window'scale-to-fit');

// 'fit' - Zooms the current page to fit window as well as move
// it to center if the canvas has been panned before'fit');

// 'load-image' - Will load an image unto the canvas
// Be reminded, if the image source is not CORS compliant,
// It will taint the canvas. Read more here:
//'load-image', { 
  url: _imageUrl,
  type: 'image' || 'shape',
  canvas: _canvas /* Optional. If null, it is loaded unto current canvas */

// 'new-text' - Adds a new text to the current canvas'new-text', {
  text: 'This is my text',
  type: 'i-text' || 'textbox',
  fontFamily: 'Arial',
  fontStyle: 'normal',
  fontWeight: 'normal',
  textAlign: 'left',
  textDecoration: '',
  top: 50,
  left: 50,
  opacity: 1,
  angle: 0,
  scale: 1,
  canvas: _canvas /* Optional. If null, it is loaded unto current canvas */

// 'flash-show' - Show a flash message. The delay before hide is in ms
// icons: ok, warning, cancel, error, font-size, info, help, zip'flash-show', {
  text: 'This is a flash',
  icon: 'info',
  delay: 3000

// 'flash-hide' - Hides the flash message if the hide delay has not'flash-hide');

// 'dialog-show' - Shows a dialog box. You can pass in your own function
// to either of the buttons or just 'close' to close the dialog.
// in your function, you will need to dispatch 'dialog-hide' to close it'dialog-show', {
  text: 'Do you want to continue?',
  buttons: {
    ok: {
      label: 'Yep',
      click: yourFunction || 'close'
    cancel: {
      label: 'Nahh',
      click: yourFunction || 'close'

// 'dialog-show-top' - Shows a dialog on top of the app'dialog-show-top', {
  title: 'Dialog Title',
  content: 'Do you want to continue?',
  buttons: {
    ok: {
      label: 'Yep',
      click: yourFunction || 'close'
    cancel: {
      label: 'Nahh',
      click: yourFunction || 'close'

// 'dialog-hide' - Hides the current dialog'dialog-hide');

// 'context-show' - Shows the context menu against current item'context-show');

// 'context-hide' - Hides the context menu'context-hide');

// 'alert-modal' - Show a loading modal window'alert-modal', _message);

// 'alert-hide-modal' - Hide current modal window'alert-hide-modal', _message);

// 'add-panel' - Creates a new panel on the left panel stack
// Button is optional, you can add button by firing the event 'create-panel-btn'
// Ensure your _jQueryElement has class "pp-hidden" so it will not appear when added
// Until the button is clicked to show it or you fire up "select-panel"'add-panel', {
  id: 'uniquePanel',
  element: _jQueryElement,
  button: {
    icon: 'texture',
    tip: 'tooltip message'

// 'select-panel' - Shows a panel and hides the current one'select-panel', 'uniquePanel');

// 'hide-panel' - Hides the left panel'hide-panel');

// 'create-panel-btn' - Creates a panel button (top left button set)'create-panel-btn', {
  dt: 'data-type',
  tip: 'toolTip message',
  icon: 'icon'

// 'create-primary-btn' - Creates a panel button (top right button set)'create-primary-btn', {
  dt: 'data-type',
  tip: 'toolTip message',
  icon: 'icon',
  attr: ''

// 'create-secondary-btn' - Creates a panel button (bottom center button set)'create-secondary-btn', {
  dt: 'data-type',
  tip: 'toolTip message',
  icon: 'icon'

Still need help? Contact Us Contact Us