Ember Freestyle

Ember Freestyle is an Ember addon that allows you to quickly create a living styleguide for your Ember app. Whereas other living style guide projects showcase current CSS using dummy HTML, Ember Freestyle presents existing Ember components from your app in a dedicated living style guide.

Live Demo


Anatomy of a Basic Style Guide

Here is a simple style guide, where {{loading-spinner}} is a hypothetical component in your application.

{{#freestyle-guide title="My Living Style Guide" subtitle="Showcasing My App's Components"}}
  {{#freestyle-section name="UI Elements"}}
    {{#freestyle-usage "loading-spinner" title="Loading Spinner"}}

Living Style Guide Driven Development

Ember Freestyle facilitates a living style guide driven development approach for Ember apps. Chris LoPresto gave a talk on this topic at EmberConf 2016. Interactive Slides


Ember Freestyle would not be possible without inspiration from the Ember community at large. Specific thanks go out to: