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:
After installation, make sure that Live Editor CLI works by running this command:
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:
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
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.)
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.