Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

ember-showcase CI

A set of primitives to showcase interactive code examples

le demonstration a la gif


  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above


ember install ember-showcase


ember-showcase is an addon that provides you with component abstractions that you can build upon to showcase interactive code-samples in your applications.

This can be useful for documenting an addon, a styleguide or when writing a blog.

ember-showcase comes with no styling. As it is meant as a base for your own abstraction on top of it you can style it as you see fit. The follwing guide walks you through the existing components in ember-showcase and how you could create your own component abstraction on top of it.



The Showcase-component is a provider component that yields out everything you need to build your own interactive code sample component.

Showcase yields a nested hash that holds the following properties:

  • ui - a set of declarative components
    • useSnippet - a component that you use to register snippets to the Showcase
    • snippet - a component that renders a code snippet
  • state - state of the Showcase you can use to build your own code sample abstraction
    • activeSnippet - the currently active code snippet of all all the registered snippets. By default this will be the first registered snippet
    • snippets - all the registered snippets on the Showcase
  • actions - a set of actions you can trigger on the Showcase
    • registerSnippet - an action to register a code snippet on the Showcase
    • activateSnippet - an action to switch out the currently active snippet


In this example we will walk you through creating your own Demo-component that is based on ember-showcase. Demo will be able to show an interactive code sample - i.e. an ui that shows the code to demo in action. You will also be able to attach an optional set of code-snippets (based on ember-code-snippet) that you can toggle between to show other developers how the component you are demoing will be used in code.

Here's how you will be able to use it:

<Demo as |demo|>
    Hello world!
  <demo.ui.useSnippet @name="" @title="template.hbs" @language="html" />

And here's how you would use ember-showcase to implement Demo:

<Showcase as |showcase|>
    {{#each showcase.state.snippets as |snippet|}}
        {{on "click" (fn showcase.actions.activateSnippet snippet)}}
    {{yield (hash
  {{#if showcase.state.activeSnippet}}

Bundled addons

ember-showcase bundles some addons to provide its functionality.

If you need to customize code-snippet or code-highlighting functionality please have a look at the documentation of both addons.


See the Contributing guide for details.


This project is developed by effective-ember and contributors. It is licensed under the MIT License.