The first dedicated service for creating preview pages for your design templates!

So what is CodingPreview?

  • CodingPreview is a fast, free app that lets you generate preview pages to display web designs in a browser — the first dedicated app to provide such a service! Upload your template image, set your background and alignment, and share a live preview URL with your clients instantly.
» I know what CodingPreview is, thanks.

Title of the Page * ?More Info: The title you specify for your page will be shown at the top of the browser when you preview it. If you are registered, this title can be used to identify different templates in your account area.

Specify the title of your template.
Please enter a title for your page.

Template Image * ?More Info: Select your template image file to upload as the main template. Accepted image file types: jpg, gif, tiff, png.

Upload the main template image. You will be able to add a subpage on the next page.
Please upload a template image.
Want to remove these ads? Register for free and have an ad-free experience.

Custom URL? ?

Link your template image to another webpage. (?)​

Alignment ?More Info: Use this field to define how your template image is aligned in the browser. Each option should be self-explanatory.

Choose how your template image is aligned in the browser.

Margins ?More Info: Add margins to your template to position the template image exactly in the right position of the browser. The figure entered will move the template by that number of pixels away from the part of the field you enter it in. For example, if you enter 16 in the Right field, the image will be pushed 16px away from the right hand side of the browser.

Define and apply margins that will determine the exact position of your template.
Top: ⊤ Left: ⊣ Right: ⊢

Background ?More Info: Specify either a background colour, a background image or a combination of both. Background colour is defined with a six-character HTML hex-code. Use background repeat to repeat your background image. Extra tools include the Colour Picker, which lets you pick a colour from the screen and a Background Image wizard.

Customize the background behind your template image.
Colour * :  #
Background Image:
Either upload your background image:
Or take a selection of your template using our ?More Info: Use the Background Image Wizard to crop a portion from your main template image to use as a background image. Make your selection with the selection tool. When you have made your selection, press the Save button. Your image will be created and used as the background image.
Repeat Type:

Password Protect? ?More Info: Enter a password so that when someone goes to your preview URL, they are asked for a password that you have defined.

If you wish, enter a password to be used on your preview page.
Want to remove these ads? Register for free and have an ad-free experience.
Want to remove these ads? Register for free and have an ad-free experience.
By clicking "Create Preview", you confirm that you agree with our Terms of Service.
* = Required Field