SharePoint Design Manager snippets

A snippet is an HTML representation of a SharePoint component or control such as a navigation bar or a Web Part. By using the Snippet Gallery in Design Manager, you can quickly add SharePoint functionality to your HTML master page or page layout.

After you convert a master page or create a page layout, you have an HTML version of that page. With the Snippet Gallery, you can quickly add specific SharePoint functionality, such as search or navigation or device channel panels, to the HTML file associated with your master page or page layout. The Snippet Gallery is a page in Design Manager where you can:

  • Choose a SharePoint component from those available on the ribbon.

  • Configure the properties for that component.

  • Preview its appearance in the browser.

  • Copy the HTML code snippet to the Clipboard so that you can paste the snippet at the location you want in the HTML file.

The Snippet Gallery displays different options on the ribbon, depending on whether you're editing a master page or page layout—for example, navigation controls are displayed only for master pages, and Web Part zones and page field controls are displayed only for page layouts. Also, when you are editing a page layout, the page fields that are available depend on the content type of the page layout that you're editing.

After you paste a snippet into your HTML file, you get a design-time preview from the HTML provided in the snippet. You can also use the server-side preview in Design Manager to see how the control will appear on the live site. The design-time preview may include static sample data, but the server-side preview uses live data, if available. For example, a navigation control that draws navigation links from a term set will display those terms dynamically in the server-side preview, but the design-time preview will have a static snapshot of the terms at the time you created the snippet. Live data is not available in the server-side preview for some snippets, however, including many Web Parts. In this case, the server-side preview may say Preview Not Available.

Note: A snippet contains HTML markup that gives you a design-time preview in your HTML editor, but the HTML markup contained in "start preview" and "end preview" comments should not be edited because it affects only the design-time preview, not how SharePoint ultimately renders that snippet. Instead, to style your snippet, you typically have to identify and override the default SharePoint styles that are applied to the snippet.

The Snippet Gallery displays different options depending on the file that you're editing. For example, different page layouts have different sets of page fields available to them. For this reason, to navigate to the Snippet Gallery, you must first select a master page or page layout to edit.

To insert a snippet

  1. Browse to your publishing site.

  2. In the upper-right corner of the page, choose the Settings gear, and then choose Design Manager.

  3. In Design Manager, in the left navigation pane, choose Edit Master Pages or Edit Page Layouts, depending on what type of file you're editing.

  4. Select the name of the master page or page layout that you want to add snippets to.

  5. To open the Snippet Gallery, choose Snippets in the upper-right corner of the server-side preview.

  6. On the ribbon, on the Design tab, choose the snippet that you want to add to your page.

    When you select a snippet, the Snippet Gallery refreshes so that the page shows you a preview of that snippet, the properties available for that snippet, and the HTML code snippet that you can copy into your HTML master page or page layout.

  7. On the right side of the Snippet Gallery, under About this Component, click or select section headers to expand or collapse groups of properties, and then configure any custom settings that you want.

    The properties that are most important for the core purpose of the snippet appear in the top section named Important. These are the key properties that you have to understand when using a snippet.

    Note: If the property grid has a header that ends with AjaxDelta, you should ignore those properties because they apply to the controls related to the Minimal Download Strategy, which is disabled for master pages and page layouts created through Design Manager.

  8. After you configure any properties, choose Update. This updates both the preview and the HTML snippet on the left side of the page, so that the markup reflects your custom settings. You can always choose Reset to return all properties to their default settings.

  9. On the left side of the Snippet Gallery, under HTML Snippet, choose Copy to Clipboard.

  10. In your HTML editor, open the mapped network drive on your computer, and then open the HTML file for the master page or page layout that you're adding the snippet to.

  11. In the HTML file, paste the snippet where you want the markup to appear.

    Each snippet contains HTML that provides a visual preview of the component and sample data. You shouldn't modify this HTML for the read-only preview inside the