A talk describing fb-flo, the motivation behind and how it works


Amjad Masad

June 20, 2014


  1. 6.
  2. 7.

    WHAT • Edit code in my favorite editor and have

    it reflect on the live web page • CSS & JS • Flexible and hackable enough • Remote File Systems • Build Step (We write in ES6) • Many Many source files
  3. 8.

    OTHER TOOLS • live reload and livestyle are not actually

    live editing • Chrome Workspaces • Doesn’t support build step • No support for remote file systems • Can’t use your favorite editor
  4. 9.

    ENTER FB-FLO • Live edit any static resource • Live

    reload is also supported • Works with your editor of your choice • Easily integrates with your build step, no matter how complex • Easily integrates with your dev environment • Configurable and hackable
  5. 10.

    HOW • Server npm module • watches source files •

    sends changes via websocket • user-defined resolver function • Client is chrome extension • Uses chrome devtools API to live edit code • Fires event on code change
  6. 11.

    SHORTCOMINGS • Hard to get started (need good gulp, grunt

    integration) • Limited to Chrome now. Firefox is in the works • Adds UI to DevTools • Live editing code is inherently limited