Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ember-off-canvas-components with all npm packages installed. Try it out:

var emberOffCanvasComponents = require("ember-off-canvas-components")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ember-off-canvas-components v0.2.1

A micro library of [Ember.js] components that interact to create an Off-Canvas user interface.

Ember Off Canvas Components

A micro library packaged as and Ember CLI Addon - a group of Ember.js Components that interact to create an Off-Canvas user interface.

Build Status


As an Ember CLI addon

Use this addon in you ember-cli application...

npm install --save-dev pixelhandler/ember-off-canvas-components

As a Standalone Library

Download a release.

Copy to your vendor directory and link up the .js and .css files

View a demo

  • An off-canvas area is positioned outside of the viewport and slides into view when activated.
  • (Off-canvas is a UI pattern, and not associated with the html canvas element.)



git clone
cd ember-off-canvas-components
npm install


  1. ember server
  2. Visit your app at http://localhost:4200.

Running Tests

  • ember test
  • ember test --server


  • ember build

For more information on using ember-cli, visit

Also see the packaging readme file for a non Ember CLI release.

Test the addon as a dependency

The dummy app is used for the demo on the gh-pages branch. Test out the addon in an ember-cli by copying some of the source code of the dummy app.

Test with local clone of this repo using npm link

cd ember-off-canvas-components
npm link
cd ../
ember new test-app
cd test-app
npm link ember-off-canvas-components

Or, test with a github repo

ember new test-app
cd test-app
npm install pixelhandler/ember-off-canvas-components --save-dev

Copy the dummy app files and run the test-app

cp node_modules/ember-off-canvas-components/tests/dummy/app/templates/application.hbs app/templates/application.hbs
cp node_modules/ember-off-canvas-components/tests/dummy/app/templates/index.hbs app/templates/index.hbs
cp node_modules/ember-off-canvas-components/tests/dummy/app/templates/off-canvas.hbs app/templates/off-canvas.hbs
cp node_modules/ember-off-canvas-components/tests/dummy/app/controllers/index.js app/controllers/index.js
cp node_modules/ember-off-canvas-components/tests/dummy/app/routes/index.js app/routes/index.js
cp node_modules/ember-off-canvas-components/tests/dummy/app/styles/app.css app/styles/app.css
ember server
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free