---
visibility: public
---

# Marionette.js

**repo:** [sadcitizen/awesome-marionette](https://github.com/sadcitizen/awesome-marionette)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[javascript|Javascript]]

---

# Awesome Marionette.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

> A list of resources for marionette.js

## General

- [Official site](http://marionettejs.com/)
- [Github repository](https://github.com/marionettejs/backbone.marionette)
- [Annotated source](http://marionettejs.com/annotated-src/backbone.marionette)
- [Marionette.js Blog](http://blog.marionettejs.com/)
- [StackOverflow](http://stackoverflow.com/questions/tagged/marionette) - Tagged questions
- [Gitter chat](https://gitter.im/marionettejs/backbone.marionette)
- [Marionette Inspector](https://github.com/marionettejs/marionette.inspector)
- [Yeoman generator for Marionette.js](https://github.com/mrichard/generator-marionette)
- [Marionette CLI](https://github.com/denar90/marionette-cli)
- [MarionetteJS CLI package for atom](https://atom.io/packages/atom-marionettejs-cli)

## Tutorials and articles

- [A Thorough Introduction To [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette Part 1: Application](https://www.smashingmagazine.com/2013/02/introduction-backbone-marionette/)
- [A Thorough Introduction To [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette Part 2: Modules](https://www.smashingmagazine.com/2013/04/thorough-introduction-backbone-marionette-part-2-modules/)
- [A Thorough Introduction To [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette Part 3: Views](https://www.smashingmagazine.com/2014/06/thorough-introduction-backbone-marionette-part-3/)
- [A Simple [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette tutorial: Application. Simple List](http://davidsulc.com/blog/2012/05/06/tutorial-a-full-backbone-marionette-application-part-1/)
- [A Simple [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette tutorial: Application with Interactions](http://davidsulc.com/blog/2012/04/22/a-simple-backbone-marionette-tutorial-part-2/)
- [A Visual Guide To Marionette.js Views](http://www.artandlogic.com/blog/2013/03/a-visual-guide-to-marionette-js-views/) by Matt Bajoras
- [Representing Marionette.js Views With State](http://www.artandlogic.com/blog/2013/06/representing-marionette-js-views-with-state/) by Matt Bajoras
- [The Case for Marionette.js](http://benmccormick.org/2014/12/02/the-case-for-marionette-js/)
- [Connecting Data to Your Views](http://benmccormick.org/2014/12/10/marionette-explained-connecting-your-data-to-your-views/)
- [Building Complex Layouts with Marionette.js](http://benmccormick.org/2014/12/22/building-complex-layouts-with-marionette-js/)
- [The Life of a Marionette View](http://benmccormick.org/2015/01/05/marionette-view-life-cycles/)
- [Building Modular Web [Apps](/@harrisonqian/awesome/wiki/platforms/apps) with [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Radio](http://benmccormick.org/2015/01/26/backbone-radio/)
- [From [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).js to Marionette.js (Russian)](http://habrahabr.ru/post/207730/) - by Mahnunchik
- [Marionette.js Behaviors, Part 1: The Basics](https://spin.atomicobject.com/2014/09/11/marionette-behaviors-overview/)
- [Marionette.js Behaviors, Part 2: [Testing](/@harrisonqian/awesome/wiki/testing/testing) Behaviors](https://spin.atomicobject.com/2014/09/12/testing-marionette-js-behaviors/)
- [Things I Learned from Building a Large Scale [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) + Marionette Application](http://authenticff.com/journal/building-large-scale-backbone-marionette-applications) by Ian Williams
- [Design Rules in a [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone)-Marionette App](http://cloudandcode.tumblr.com/post/98671637921/design-rules-in-a-backbone-marionette-app)
- [A Short Primer on Marionette.js](http://cloudandcode.tumblr.com/post/98265035816/a-short-primer-on-marionette-js)
- [Pimping [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) with Marionette](http://scm.io/blog/hack/2014/09/backbone-marionette/) by Tom Herold
- [Handling Forms with Marionette.js](http://spin.atomicobject.com/2013/11/25/forms-marionette-js-backbone/) by Al Scott
- [Nested Views in [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette](http://blog.mojotech.com/nested-views-in-backbone-marionette/) by Sam Saccone
- [DRY up Your Views in [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Marionette](http://blog.mojotech.com/dry-up-your-views-in-backbone-marionette/) by Sam Saccone
- [Strengthening Our [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) with Marionette (Part I)](http://tech.kinja.com/strengthening-our-backbone-with-marionette-part-i-1583630931)
- [Tutorial: Nested Views Using [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Marionette's CompositeView](http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/) bu David Sulc
- [Components with [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).js and Marionette.js](http://blog.jeremyfairbank.com/javascript/components-with-backbone-js-and-marionette-js/) by Jeremy Fairbank
- [Managing Layouts and Nested Views with [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette](http://lostechies.com/derickbailey/2012/03/22/managing-layouts-and-nested-views-with-backbone-marionette/) by Derick Bailey
- [Revisiting the [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Event Aggregator: Lessons Learned](http://lostechies.com/derickbailey/2012/04/03/revisiting-the-backbone-event-aggregator-lessons-learned/) by Derick Bailey
- [Why Should I Use [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette Instead of … ?](http://lostechies.com/derickbailey/2012/06/13/why-should-i-use-backbone-marionette-instead-of-%E2%80%A6/) by Derick Bailey
- [Polymer [Web Components](/@harrisonqian/awesome/wiki/front-end-development/web-components) with Marionette.js](http://blog.jeremyfairbank.com/javascript/polymer-web-components-with-marionette-js/) by Jeremy Fairbank
- [Building a Marionette App with Flux Architecture](http://iamnotarealprogrammer.com/flux-architecture-in-a-[backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone)-and-marionette-app/) by Kurtis Kemple
- [Marionette-Service: Service Objects for Marionette](http://benmccormick.org/2015/05/25/marionette-service-service-objects-for-marionette/) by Ben McCormick
- [Refactoring a [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) Application to Use [Microservices](/@harrisonqian/awesome/wiki/miscellaneous/microservices): What We Learned with [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) and Marionette](https://www.safaribooksonline.com/blog/2015/11/24/refactoring-javascript-microservice-backbone-marionette/) by Pasha Craydon 
- [SEO-Enabling Your Marionette App](https://docs.google.com/presentation/d/1jy9SXyr6ZjbY7lOSKN8QraH96-vR7mnAo0ePvzDb8uc/pub?start=false&loop=false&delayms=3000&slide=id.p)

## Books

- [Building [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Plugins](https://leanpub.com/building-backbone-plugins) by Derick Bailey and Jerome Gravel-Niquet
- [Backbone.Marionette.js: A Gentle Introduction](https://leanpub.com/marionette-gentle-introduction) by David Sulc
- [Structuring [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Code with RequireJS and Marionette Modules](https://leanpub.com/structuring-backbone-with-requirejs-and-marionette) by David Sulc
- [Marionette Exposé](https://leanpub.com/marionetteexpose) by Jack Killilea
- [Backbone.Marionette.js: A Serious Progression](https://leanpub.com/marionette-serious-progression) by David Sulc
- [Getting Started with [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Marionette](http://www.amazon.com/dp/1783284250/) by Raymundo Armendariz and Arturo Soto
- [Marionette Guides](https://www.gitbook.com/book/marionette/marionette-guides/details)
- [Better [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Applications with MarionetteJS](https://shop.smashingmagazine.com/products/better-backbone-applications-with-marionettejs)

## Videos

- [Dancing with Marionette](https://www.youtube.com/channel/UC6dVRPnSACav2AYB5XG7BZw) - Youtube channel
- [Backbone.js with Derick Bailey](https://www.youtube.com/watch?v=VERQEr-bVTs) by Derick Bailey
- [The Tools and Patterns for Building Large-Scale [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Applications](https://www.youtube.com/watch?v=qWr7x9wk6_c) by Brian Mann
- [Episode 03 of BackboneRails Screencast](https://www.youtube.com/watch?v=KT31H3Ayliw) by Brian Mann
- [Backbone Marionette and Require.js](https://www.youtube.com/watch?v=4K4JKtAGPu4) by Daniel Cousineau
- [Backbone's Rarely Enough: An Introduction to [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Marionette](https://www.youtube.com/watch?v=fZJMF4SOKm4) by Len Smith
- [Unsuck Your Backbone](http://www.youtube.com/watch?v=0o2whtCJw8I) by Amy Palamountain
- [Building Modular and Component Driven Architecture in [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).js and Marionette.js](https://www.youtube.com/watch?v=PrQSpdWkN6Q) by Jeremy Fairbank [Slides](http://presentboldly.com/jfairbank/modular-and-component-driven-architecture-in-marionettejs/)
- [Marionette: The [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Framework from BackboneConf 2014](https://www.youtube.com/watch?v=EvQnntaqVdE&index=13&list=PLlgxAbM67lYIGw8DnANC7VgREbzJRQged) by James Smith
- [Building Beautiful [Apps](/@harrisonqian/awesome/wiki/platforms/apps) with Marionette](https://www.youtube.com/watch?v=7yZKsgKxziw)
- [Nesting Your Views in Marionette](https://www.youtube.com/watch?v=CTr-tTwRH3o)
- [Marionette Behaviors](https://www.youtube.com/watch?v=6wvAswHkarE)
- [Backbone.Wreqr](https://www.youtube.com/watch?v=2b1G3TdlQEU)
- [Jason Laster - [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Under the Magnifying Glass Tools for Exploring and Debugging Your Apps](https://www.youtube.com/watch?v=jbGm3mJXh_s)
- [Browserify + Marionette = Better Apps](https://www.youtube.com/watch?v=7bGWuyuLK_4)
- [Using DevTools for Marionette Debugging](https://www.youtube.com/watch?v=75d0odmbu38)
- [Routing Made Better](https://www.youtube.com/watch?v=F32QhaHFn1k)
- [View and Application State](https://www.youtube.com/watch?v=FCUS6RrhRtI)

## Examples and boilerplates

- [Marionette Require Boilerplate](https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate)
- [Marionette Contact Manager](https://github.com/dmytroyarmak/marionette-contact-manager) - Continuation of development "[Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) Contact Manager" but using Marionette.js
- [Marionette, Require, and [Gulp](/@harrisonqian/awesome/wiki/miscellaneous/gulp).js Boilerplate](https://github.com/jroeckle/Marionette-Require-Gulpjs-Boilerplate) - A Lightweight boilerplate originally project based off "Marionette Require Boilerplate", with Gulp.js [integration](/@harrisonqian/awesome/wiki/platforms/integration) instead of Grunt.js
- [MarionetteJS + RequireJS + Twitter Bootstrap](https://github.com/ajaxray/marionette-boilerplate) - Let's start the dance! This boilerplate is a ready setup for starting your next [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) [javascript](/@harrisonqian/awesome/wiki/programming-languages/javascript) app in minutes
- [Marionette Gentle Introduction](https://github.com/davidsulc/marionette-gentle-introduction)
- [Marionette Wires](https://github.com/thejameskyle/marionette-wires)
- [Marionette Cookbook](https://github.com/MarionetteLabs/marionette-cookbook)
- [MarionetteJS + Brunch + Babel/ES6](https://github.com/denar90/brunch-with-marionettejs)
- [A Place to Write About Technical Subjects on the Web](https://github.com/jmeas/gistbook)
- [The Front End App for edit.sx](https://github.com/samccone/edit.sx-frontend)
- [Streamus](https://github.com/MeoMix/StreamusChromeExtension)
- [Marionette-Integrations](https://github.com/marionettejs/marionette-integrations) - example marionette [apps](/@harrisonqian/awesome/wiki/platforms/apps) using several different asset management tools
- [ES6 Marionette Project](https://github.com/abiee/es6-marionette)
- [Todo List](https://github.com/tastejs/todomvc/tree/master/examples/backbone_marionette) - TodoMVC example
- [Webpack-Marionette](https://github.com/alexpsi/webpack-marionette) A small boilerplate introducing webpack and es6 features to a Marionette/[Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) application, contains a sample CRUD application of an editable Cookbook.

## Libraries

- [Marionette State](https://github.com/Squareknot/marionette.state)
- [Marionette Virtual Dom](https://github.com/tiagorg/marionette-vdom)
- [Marionette Form View](https://github.com/viverae/marionette.formview)
- [A Better Router for [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone) and Marionette Applications](https://github.com/Betterment/backbone.blazer)
- [Marionette.Toolkit](https://github.com/RoundingWellOS/marionette.toolkit) - A collection of opinionated [Backbone](/@harrisonqian/awesome/wiki/front-end-development/backbone).Marionette extensions for large scale application architecture.
- [Orchestra](https://github.com/BedeGaming/orchestra) - Client-side app orchestration framework
