Development Environment

Everything you need to build themes for Live Editor.

In general, you need 3 things to develop themes for Live Editor:

Live Editor account
However, we’re still building the first version of Live Editor. Sign up to get notified when Live Editor is ready for you to try.
Live Editor CLI
A command line tool for previewing your theme and syncing it to your Live Editor account.
Website design and development tools
Your own choice of code editor, build tools, front end frameworks, source code control, etc.

Installing Live Editor CLI

This command line interface (CLI) allows you to accomplish the following:

  • Spin up a development server that loads in your theme files, alerts you to syntax errors, and allows you to preview your themes in web browsers.
  • Push your theme files to the Live Editor service.
  • Guide you through the process of updating content after you change a layout or content template.

To install Live Editor CLI, you need the following:

  • Windows, Mac, or Linux
  • Ruby programming language, v2.1 or newer
  • Internet connection

Once you have Ruby installed, you can install the liveeditor_cli Ruby gem from your terminal (command prompt) by running this command: 

gem install liveeditor_cli

After installation, make sure that Live Editor CLI works by running this command: 

liveeditor version

Example Output 

Live Editor CLI v1.0.0

You’re good to go!

The following guides in the Theme Designer’s manual will help familiarize you with how to use Live Editor CLI. If you want a list of everything that the CLI does, visit the Live Editor CLI Reference.

Or you can run this commend to get a listing of all commands and options: 

liveeditor help

Use any website design and development tools that you want with Live Editor CLI

Live Editor is designed to give you as much freedom as possible when it comes to developing and maintaining your website’s theme. The web design landscape is constantly evolving, and there are many great tools that you can use to design and develop your front end.

It doesn’t matter if you prefer Sass or Less, Sublime Text or Atom, Pinegrow or Dreamweaver, Grunt or Gulp, Bootstrap or Foundation, CodeKit or Koala, jQuery or MooTools—Live Editor themes are flexible enough for you to mix and match whatever tools you want.

Your chosen code editor, CSS preprocessor, build tools, and/or visual design tools only need to output the final liquid, css, and js files into the file and directory structure that Live Editor CLI expects.

The one thing that we highly recommend is using source code control software like Git to track revisions of your theme. (But even that is optional.)

Next steps

Learn about the different pieces that you’ll be gluing together with the File and Directory Structure guide.

Or jump straight ahead to the Templating Basics guide to sample the different kinds of code that you’ll be crafting.