How to use ember-freestyle - 9 common examples

import Ember from 'ember';
import FreestyleController from 'ember-freestyle/controllers/freestyle';

const { inject } = Ember;

export default FreestyleController.extend({
  emberFreestyle: inject.service(),

  /* BEGIN-FREESTYLE-USAGE fp--notes
### A few notes regarding freestyle-palette

- Accepts a colorPalette POJO like the one found in the freestyle.js blueprint controller
- Looks very nice

And another thing...

###### Markdown note demonstrating prettified code

import Ember from 'ember';

export default Ember.Component.extend({

import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';
import { computed } from '@ember/object';
import FreestyleController from 'ember-freestyle/controllers/freestyle';

export default FreestyleController.extend({
  emberFreestyle: service(),
  showCode: alias('emberFreestyle.showCode'),

  dynamicProperties: computed(function() {
    return {
      blockContent: {
        value: 'Dynamic Block Content',
        inputType: 'textarea'
      },
      size: {
        value: 'medium',
        inputType: 'select',
        options: [
          'small',
          'medium',
          'large'

import { inject as service } from '@ember/service';
import { set } from '@ember/object';
import { later } from '@ember/runloop';
import FreestyleController from 'ember-freestyle/controllers/freestyle';

export default FreestyleController.extend({
  emberFreestyle: service(),
  isDemoVisible: true,
  myProgress: 0.5,
  isFirstSwitchOn: true,
  colorPalette: {
    primary: {
      name: 'cyan',
      base: '#00bcd4',
    },
    accent: {
      name: 'amber',
      base: '#ffc107',
    },
    secondary: {
      name: 'greyish',
      base: '#b6b6b6',

import { inject as service } from '@ember/service';
import FreestyleController from 'ember-freestyle/controllers/freestyle';

export default FreestyleController.extend({
  queryParams: {
    currentPage: 'page',
    sortProperty: 'sort',
    sortDescending: 'desc',
  },

  currentPage: 1,
  sortProperty: 'name',
  sortDescending: true,

  emberFreestyle: service(),
});

import Ember from 'ember';
import FreestyleController from 'ember-freestyle/controllers/freestyle';

const { inject } = Ember;

export default FreestyleController.extend({
  emberFreestyle: inject.service()
});

import { inject as service } from '@ember/service';
import FreestyleController from 'ember-freestyle/controllers/freestyle';

export default FreestyleController.extend({
  queryParams: {
    currentPage: 'page',
    sortProperty: 'sort',
    sortDescending: 'desc',
  },

  currentPage: 1,
  sortProperty: 'name',
  sortDescending: true,

  emberFreestyle: service(),
});

import EmberFreestyle from 'ember-freestyle/services/ember-freestyle';

export default EmberFreestyle.extend({
  defaultTheme: 'solarized-light',
});

import EmberFreestyle from 'ember-freestyle/services/ember-freestyle';

export default EmberFreestyle.extend({
  defaultTheme: 'solarized-light',
});

import Service from 'ember-freestyle/services/ember-freestyle';
import discoveredComponents from '../-freestyle/discovered-components';

export default Service.extend({
  discoveredComponents
});