Command barUndo/redo buttonsSelect toolPen toolRectangle/Ellipse toolsSave buttonEdit menuUser menuPage menuExpand toolbar buttonPicture opacity controlsResize panes buttonHelpSettings buttonSelected Area IdText EditorElement nameFind buttonPage tabImage tabSelection tabHistory tabNavigation tabText formatting toolbarZoom slider



The Exd Pic app lets you add interactive elements to pictures and publish them online. This page was made with the app.


How to use

Trace areas that you want to make interactive. Set the content to display for them. When you are finished you can publish your work online as a web page.

This is a screenshot of its UI. Click on anything in it to show help about that part of it. Click on a link in the text to highlight the controls related to it.

The page being edited in the screenshot is online at

Starting the app

The About dialog is displayed when you open the app. You can activate or deactivate a tutorial from here. The tutorial is active by default the first time the app is run only. There is also a link to this Help page.

The tutorial is provided to help get started quickly. It highlights certain core features. This help documentation will be a more comprehensive resource. Check back later as it is as updates are ongoing.

You can reopen the About dialog at any time by Clicking the ? button in the middle bar.

User Interface

The UI is divided into two panes. They can be resized with the resize panes menu on the middle bar. The top pane is for drawing and the bottom pane is for text.

The main command bar is at the top of the window. It has the page name and a number of buttons and menus:

  • Select tool: Select shapes or groups of shapes.
  • Pen tool: Trace irregular shapes in the picture.
  • Rectangle/Ellipse tools: Trace regular shapes in the picture.
  • Undo/redo buttons:
  • Save button
  • Edit menu: Includes clipboard, grouping, selection and Z-ordering commands
  • Use menu: Sign in or sign out or create an account. A free account is required to publish pages online.
  • Page menu: Includes validate, publish, preview and delete page commands.

The middle bar has controls related to the how things are displayed. It also has buttons to view information about the app.

  • Pic Opacity controls: Adjusting the opacity of the picture can make it easier to trace interactive elements. This only affects how it is shown in the editor (not in published form).
  • Zoom controls: Set the zoom level manually or use pre-sets. The image in the picture has been set to “Fit to height”. This only affects how it appears in the editor.
  • Resize panes: Make the text pane larger while writing content. Make the drawing pane larger while tracing things in the picture.
  • About button: The About windows links to this page and lets you start/stop tutorial tips.
  • Find in page: Find instances of a given search string anywhere in the page content.
  • Settings: Change the text size in the editors or the number of changes that can be undone.

The bottom pane has five tabs.

  • Page: Set the page title and the main text for the page.
  • Image: Select the image to make interactive. This is selected by default when you open the app.
  • Selection: Set the name and text for the selected element of the picture.
  • History: Open previously saved versions of the page.
  • Navigation: Search/open other pages you made.

The Page tab is open in the screenshot. It contains a text editor. A similar text editor is in the Selection tab. Page and element content is specified with Markdown. You can use the text command bar to format text and insert media without being familiar with Markdown. However you can use Markdown directly to access more formatting and media options.
The Markdown implementation used is Markdig, with the MediaLinks, SmartyPants, Figures and EmphasisExtras extensions. This is CommonMark compliant.

Link to elements in the picture by using their Ids. When linking within the page, use relative URLs for this purpose - e.g. use #save_button instead of Both styles will work, but only the former will be checked by the Page Validator.
You can open a page with a particular element selected by using its Id in the URL.

The editor command bars contain the following buttons:

  • Bold/Italic/Underline/Mark: Standard text formatting. Marking text highlights it in yellow.
  • YouTube: Opens a dialog to embed a YouTube video.
  • Image: Opens a dialog to add an image to the text pane. Images must be online. If your image is not online, then you can upload it to directly from the dialog. (This feature requires you to be logged in.)
  • Link: Opens a dialog to set a hyperlink. You can link to external or internal pages or elements in the picture. When published, external links will be marked with an identifying icon. Inpage links use the standard in-page URI style of an Id prefixed with #.