Generating Placeholder Content in Sublime Text 2

Everyone needs a little placeholder content now and then. Whether it’s a quick dummy image or a chunk of lorem ipsum, placeholder content can help fill the void when you need to flesh out a project but don’t necessarily have your pieces in place.

Today we’re going to take a look at how Sublime Text 2 can help you generate placeholder content automatically so you can save time and move on to the important stuff. Let’s check it out!

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

See More

Sublime Package Control

First things first, you need to make sure that you have Sublime Package Control installed. This is a package manager that makes it super easy to find and install packages for Sublime Text 2.


Starting with this tool, we’ll be able to discover some really cool add-ons for Sublime that will make placeholder content generation a snap. With that, let’s move on and look at some of the packages that are available. You can find installation instructions for Package Control here.

The first package that we’re going to check out makes use of the popular web service Like other dummy image generators, uses customizable URLs that allow you to quickly embed generic images. You can change the size, color and caption of the images just by manipulating the contents of the URL.


The problem with services like this is that you can never quite remember the right URL off the top of your head, so you’re left running to the website every time you want to insert a placeholder image. With Sublime Text 2 however, you can access the service with a quick shortcut.


To bring up the Command Palette, hit Command+Shift+P in Sublime Text 2. This is where you can launch all kinds of different services and commands simply by typing them in. Think of it as Alfred for Sublime.


In the Command Palette, begin typing the word “install”, the results will quickly be filtered so that “Package Control: Install Package” is at the top of the list (typing “package” also works, but gives you a lot more results to sift through).

Hit Return on that “Install Package” result and you’ll be taken to list of available packages. This time, begin typing out “placehold” and you should see the package pop up.


Hit Return on the item shown above and it will be installed. That’s it, now you’re ready to start using it!

Using The Package

To use the package, all you have to do is insert your cursor where you want to place an image, type the letters “ph” and then hit Tab. This brings up a little window with three options:


As you can see, you can insert an image at the default size, type in custom dimensions or insert cached images. If you choose the default image, this snippet will be inserted wherever your cursor lies (sans the comment). Note that an image tag is also generated for you, saving you even more time.

<!-- package default image -->
<img alt="" src="" />

If you copy and paste this link into your browser, you can see the image that will be inserted. The size is 600px by 400px, the background color is #0eafff and the text color is #ffffff. Once the URL is inserted, you can change any of these on the fly


If you choose the custom size option, you’ll be given a small list of image size options to choose from. By default this includes four sizes: 600×400, 200×200, 800×600 and 100×100.



If you want to tweak the options that you’re presented with, hit up the settings for that package. On a Mac, these are found under Sublime Text 2 > Preferences > Package Settings, > Settings.


When you open that file, you’ll see this chunk of code:

    "ph_bgcolor": "0eafff",
    "ph_textcolor": "ffffff",
    "ph_size": "600x400",
    "ph_default_sizes": "600x400, 200x200, 800x600, 100x100",
    "ph_format": ".png",
    "ph_text": "",
    "ph_localimages": true,
    "ph_imagepath": "images/"

This allows you to change every little aspect of how the image snippets work. You can add extra options to the custom size list, change the colors used in the image or even add in custom text. Once you made changes here, restart Sublime Text 2 just to be sure they take effect.

Other Placeholder Content Generators

Now that we’ve walked through the basic process of installing, using and customizing a Sublime Text 2 Package, we can apply this knowledge when we take a look at other packages. Follow the same basic steps to get up and running with these other great placeholder content generators.

Dummy Image

If you prefer the “Dummy Image” service over, there’s a nearly identical package that uses that site instead. In the install section of the Command Palette, search for “dummy” and you should find it. One thing that I like about this one over is that the custom size option allows you to type in any value that you want rather than choosing from a limited list.


This package essentially tosses a bunch of pieces of code into your Snippets menu. Install it the same way as the others, then type what you want to insert and hit the Tab key (list of options here).

This package includes all kinds of options for both text and HTML. Not only can you use it to generate fully stocked elements like forms and navigation menus, you can also access a ton of options for inserting plain old lorem ipsum text.


Hipster Ipsum

If you’re looking for some humor-driven lorem ipsum, look no further than the Hipster Ipsum package. Once installed, type out the number of paragraphs that you want to insert, select that number, then hit Control+Alt+H and you’ll get placeholder text that you’ll swear is straight out of an episode of Portlandia.


If you’re into funny lorem ipsum generators, check out this post, which contains thirty awesome variations: everything from bacon ipsum to gangsta ipsum.

What Are Your Favorite Sublime Text Packages?

There are so many awesome packages and add-ons available for Sublime Text 2 that it’s easy to overlook a few gems such as those that we checked out above. If you know of any awesome packages, leave a comment below and let me know.