EW Resource

V4 SP2 Snippets


See also Installing SP2 Snippet CollectionsBasic JQuery Snippets  , JQuery UI Snippets and Mobile Snippets

Expression Web V4 SP2 has a much-improved way of working with snippets, those small bits of code you can save and re-use.

Rather than using Ctrl-Enter to open the snippets dialog, as you have been able to do since V2, SP2 now uses a 'snippets panel'. You can still open this with Ctrl-Enter but you can also have it floating or dock it wherever you want. I have mine docked alongside the main 'Toolbox' panel for easy access.

Default snippets 

This shows the default groups which contain numerous
useful snippets but it's easy to add you own or download
and add others from this site and elsewhere.

If you expand the groups you'll see sub-groups too. 


If you used any of your own 'custom snippets' in V4, they'll be imported into the new snippets panel in a 'Legacy' group. (Although any you downloaded and added will not).


Each snippet comes with a description telling you what it does, for example the "CSS Replace text with image" snippet.

Snippet description


As well as the name and description you see
some or all of the snippet that is inserted.


You always need to work in Code view (or the code part of Split view) when pasting  snippets


If you click the 'Options' tab you'll see what else is possible.

Snippet Options



If you want to add a new folder for your snippets, go right to the end of the list and click on the last entry (probably 'Web Slice') and then click 'New folder'.



Notice the Filter box, which allows you to filter out specific snippets

Adding new snippets or new groups of snippets is very easy. Hit the 'Add new snippet' option and you get the 'New/Modify Code Snippet Dialog.

The 'Insert/replace' option is selected by default.

Crate a new snippet

The snippet above will insert an HTML5 <header>...</header> block, with the insertion point in the middle.

Notice the 'Wrap' option to the right on 'Insert/replace'. This is a much simpler way of wrapping text than the previous V2/3/4 snippets.

Create a new wrapping snippet

The snippet above wraps the code you select (in Code view of course) with an HTML5 Microdata 'locality' item property.

<p><span itemprop="locality">WA</span></p>

And of course you can edit a snippet too. Just select an existing snippet and hit the Edit button.

Edit a snippet


Now that we've seen the snippet panel and how you can manage snippets, lets look at one of the more complex groups, the JQuery UI Snippets.