Click the PD button in the lower left corner to get started!

How does ProductDiv work?

Start using ProductDiv by clicking the purple "PD" button in the bottom left hand of your browser. This opens ProductDiv by wrapping the current page in an iframe element so it can render the editor. Now you should see ProductDiv on the left hand side of the screen ready for use! If you see elements being highlighted while you mouse over them don't panic! We'll get to that in just a moment...

Using templates

Now that you've opened ProductDiv, there should be a green box above this paragraph. Try dragging the "Jumbotron" template into it to see how page editing works! Many of the templates tagged with "Layout" contain these drop containers and are used as scaffolding for your application!

Drag and Drop

Drag elements from the template selector onto the page. As you do this, green boxes will form around the element you're hovering over. The top and left sides of the rectangle will prepend the template to the element, while the other two sides append! Try it now!


Hover over the eye indicator to preview your template. These previews are rendered inside your page, so any template you create will use the styles in your page, giving you a perfect preview!

Build your Layout

Try adding layout components to your page by filtering the selection down to "Layout" tags. These sections help you quickly scaffold your app with beautiful, responsive layouts.


Templates are defined in the templates section of your configuration for you to create, modify, and extend to your liking. Some templates even include containers to place other elements in them. Many of the "Layout" components make use of this feature to make empty cards, containers, rows, etc. for you to drag elements in as you see fit. These become the building blocks of your application. To make your own container, in any template add:

<div class="productdiv-drop-container"></div>

Try adding your own styles if you want to modify the preview!

Editing Elements

Click to edit

The Element Editor is opened by either clicking an element you want to modify, or by dragging a template onto the page. Once it's open, you can modify the HTML directly if you so choose, or apply utility classes to the element using any of the defined classes.

Utility Classes

After scrolling down, you can see active classes on the element, matched classes based on configuration (i.e. if you click on an anchor, it will show link and button helpers since they can be directly applied to the element), and filtered classes if you so choose. Each utility class is defined with "Tags" that can be easily filtered using the "Filter by tag" and "Filter by name" inputs at the top of the section.

Modify Attributes

The Attribute Editor can be used by clicking the "Attributes" button at the top of the Element Editor. This is used to modify any attributes on the element, such as style and others. Attributes can be added by clicking the "+" symbol next to the title.

Editor Actions

Much of the functionality of the Element Editor is in the actions. Under the HTML editor, you will see the available actions.

  • Select Parent
    • This selects the immediate parent for this element and is useful for quickly navigating to elements that may be hard to click exactly. If you need to get to a hard to select parent element, just click its nearest child and "Select Parent" until you're on the node you want to select.
  • Duplicate
    • Duplicates the currently selected element
  • Delete
    • Deletes the currently selected element
  • Move
    • Allows you to drag the element around like the Template Selector to move the element to a desired drop position.
  • Copy HTML
    • Copies the HTML of the selected element to your clipboard
  • Copy as template
    • Copies the element in a JSON format to eeasily include in your configuration as a new template
Bottom Navigation

At the bottom of the ProductDiv editor, there's a small menu for toggling ProductDiv off.

On the right-hand side of the menu you'll find actions. From here you can copy the entire page's HTML, you can open documentation, and you can toggle the Tree View. This will open a seperate menu on the right hand side of the screen to help you navigate the nested structure of the DOM. Clicking an element in the TreeView will open it in the Element Editor.

Making ProductDiv your own

ProductDiv is a foundation for your project that grows with you. It is configurable so you can add new templates and utility classes as needed! The configuration schema is here. The most basic configuration would look like:

const configuration = {
    treeViewIgnoreQuerySelectors: [
    utilityClasses: [
            name: "Margin Start",
            type: "selectMany",
            classes: [
            tags: ["Spacing", "Margin"],
            selectors: [".test"],
    templates: [
            name: "Section Container",
            htmlTemplate: `
                        <div class="container">
                          <div class="productdiv-drop-container"></div>
            tags: ["Layout"],
            previewWidth: string; // optional

Above is a fully working configuration for ProductDiv. It's all templates and utility classes! Let's take a more in-depth look at the structure. Firstly treeViewIgnoreQuerySelectors will mostly be the same anywhere you use ProductDiv, but it can be used to exclude selectors of elements you don't want visible in the tree view (it can get very large with things like svgs). Under Utility classes is where things get interesting.

utilityClasses are defined by:

  • name: Their pretty name in the Element Editor

  • type: The control to use when selecting. One of 'selectOne' or 'selectMany'

  • classes: Any class that can be applied via this control

    • the (option|option2) syntax is expanded by ProductDiv, so for example me-(1|2) will become two options: me-1 and me-2.

  • tags: Tags help with searching, filtering, and categorizing in the filters section of the Element Editor

  • documentationLink: This is a link to a URL for documentation

  • selectors: A list of selectors this element will "match" when editing. This puts the control at the top of the list when editing making sure you always have the right editing controls in place for your element type.

templates are defined by:

  • name: Their pretty name in the Template Selector

  • htmlTemplate: The HTML you want on your page

  • tags: Tags help with searching, filtering, and categorizing in the filters section of the Template Selector

  • previewWidth: an optional setting for displaying previews. Default template previews are set to 100% width

Editor Configuration

ProductDiv can take a second argument for Editor Configuration. The options are:

ProductDiv(Configuration, {
  htmlFormatter?(s: string): string; // When copy html functions are called, this can be used for post-processing
  preventPageLeave?: boolean; // Default: true, When this is enabled, prevents page from leaving once ProductDiv has been opened
  preventHistoryLeave?: boolean; // Default: true, When this is enabled, prevents page from leaving from history push events (client side apps)

Now it's time to start building!

© 2022 ProductDiv, LLC.