When I started working with Visualforce I found it quite time consuming to figure out what the various Visualforce tags and their options looked like when actually rendered on the page; I really wished that the tag reference included screenshots.

So, to help you out, that’s what I have done. I’ve put together some basic Visualforce tags and accompanying screenshots so you can:

  1. see what that tag combination looks like
  2. flick through the screenshots looking for the UI you need and then check the code sample to see how to create it.

This document will be continually improved with additional examples, in the meantime I hope you find it useful!

Visualforce — A Visual Guide (Version 1.0–80 pages, 6MB PDF)