Mike Slinn
Mike Slinn


Published 2020-10-03. Last modified 2023-05-18.
Time to read: 1 minutes.

This page is part of the jekyll_plugins collection, categorized under Jekyll.

This Jekyll plugin provides two Liquid filters: is_draft and draft_html.

Jekyll has various ways of specifying that a page or document is visible when the website is published in production mode. The Jekyll documentation is scattered and incomplete regarding this topic. This plugin’s filters provide a simple means for marking draft pages in development mode.


  1. Add the following to Gemfile:
    group :jekyll_plugins do
    gem 'jekyll_draft'
  2. From your Jekyll site's top-level directory, type:
    $ bundle
  3. Restart Jekyll.



This filter detects if a page is invisible when published in production mode, and either returns true or false.

{% assign isDraft = page | is_draft %}

{% if isDraft %}
  <div class="bg_yellow draftPost">— Draft —</div>
{% endif %}


This filter generates HTML to display if a page is invisible when published in production mode. If the page is not a draft then the empty string is returned. The generated HTML for draft pages is:
" <i class='jekyll_draft'>Draft</i>"

Here is a code snippet that shows the filter in use:

{% assign docs = site.myCollection | sort: "order" %}
<ol id="articleTitles">
  {% for doc in docs %}
    {% assign draft = doc | draft_html %}
    <li><a href="{{doc.url}}" class="articleTitle">{{doc.title}}{{draft}}</li>
  {% endfor %}


You can modify the definitions of these CSS classes to suit.

.bg_yellow {
  background-color: yellow;

.draftPost {
  text-align: center;
  font-style: italic;
  width: 15ch;
  position: absolute;
  top: 7px;
  left: 0;

.jekyll_draft {
  background-color: #fefeab;
  padding-bottom: 2px;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 2px;

Invoking From Another Jekyll Plugin

require 'jekyll_draft'

puts 'Found a draft' if Jekyll::Draft.is_draft post

draft = Jekyll::Draft.draft_html post


A demo / test website is provided in the demo/ directory. It can be used to debug the plugin or to run freely. Please examine the HTML files in the demo to see how the plugin works.

  1. To run the demo freely from the command line, type:
    $ demo/_bin/debug -r
  2. View the generated website at localhost:4444.