Experimental Plugin Review – Inline Preview

Inline Preview is a brand new plugin being developed by Christopher Finke. Instead of previewing posts in a new browser tab, this plugin adds an editor to the right of the post within the same tab enabling you to see what the post will look like.

Inline Preview
Editor And Post In The Same Tab

If you end up giving this plugin a try, be warned that once you click the preview button, the only way to close the inline preview area is to either reload the page or save the draft. Once I saw a screenshot of this plugin in action, I was initially excited because this is one of the features I saw in Ghost that intrigued me. However, this plugin is only at the experimental level and I’m not sure how far Chris is going to take it. But if he plans on putting more development time into it, here are a couple things on my checklist I’d like to see.

  • Have the inline preview only show the content area of the website, no sidebar, no footer, none of the unnecessary details. Since my content area is only 600 pixels wide, it would make better use of my screen real estate.
  • Real-time editing so that as I type or add images, I can see how those changes would look on the site.
  • The ability to change the width of the post editor and the inline preview so that I can apply a size that works best for my monitor.
  • An easy way to close the inline editor without having to reload the entire page.

Anything else you can think of that would make a plugin like this useful to you?


8 responses to “Experimental Plugin Review – Inline Preview”

  1. Thanks for the feedback. I’ll be playing with the idea and iterating on it until it’s perfect or until I’m sick of thinking about it — neither likely to happen any time soon.

    I hadn’t seen the side-by-side editor in Ghost before; this plugin was more immediately influenced by Markdown editors like MarkdownPad and Mou.

    Your four checklist points are all reasonable improvements, and they’re most likely to be implemented in reverse order.

  2. @Chris Finke – Check out http://john.onolan.org/ghost/ on his idea of a new writing screen.

    Cool, I’ll be keeping tabs on your work. Do you plan on uploading this to the repository or not until further down the line?

    Often times, plugin developers tell me that they want to code something but they don’t know what people want. So I often times give out a couple of suggestions as I did here which usually does the trick :)

  3. Very interesting find by Jeffro. Always drudging up good stuff and interesting items. While other wordpress “blogs” follow the herd, WordPress Tavern leads the pack.

  4. Brain dump of what I was thinking whilst reading your article …

    To make it work by only showing the content area would require more consistency between themes. I think this is something WordPress.org would need to start pushing as there would need to be an agreement to provide a standardised class or ID around the main content areas for styling purposes. Otherwise it is impossible for the plugin to know which parts of the theme to delete and which to keep.

    However … this is all somewhat redundant, as this was the purpose of the editor specific CSS feature. Themes can (theoretically) make the visual editor look exactly like the front-end design.

    So perhaps the solution is to make a plugin which displays both the code editor and the visual editor at the same time. This removes the need to put restrictions on how themes work, uses the current built in method of handling live editable previews and allows you to edit the content inline rather than it literally just being a preview.

  5. @Ryan Hellyer – Until the visual editor can display rendered shortcodes, it’s not especially useful for people who want a “real” preview. I happen to prefer previewing with context, but for those who want a preview of just the content area (like Jeffro), working on improving shortcode display in the visual editor would go a long way towards satisfying that.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: