Instantly share code, notes, and snippets.


demo gif

The final result: require() any module on npm in your browser console with browserify

This article is written to explain how the above gif works in the chrome (and other) browser consoles. A quick disclaimer: this whole thing is a huge hack, it shouldn't be used for anything seriously, and there are probably much better ways of accomplishing the same.

Update: There are much better ways of accomplishing the same, and the script has been updated to use a much simpler method pulling directly from browserify-cdn. See this thread for details:


View index.js
var Sequelize = require('sequelize');
module.exports = function(config) {
var models = {};
sequelize = new Sequelize(config.database, config.username, config.password, config.options);
// Bootstrap models
fs.readdirSync(__dirname).forEach(function (file) {
View gist:4067528
* Gets the starting index of the selected text
function _getSelectionHtml() {
* Returns HTML String of current selection
var html = "";
View youtube.js
import React from 'react';
let YouTube;
class YoutubeComponent extends React.Component {
constructor(props) {
this.state = {
mounted: false
View emoji-support.js
* Determine if this browser supports emoji.
* Modified from
* and probobly originally github's javascript source
function doesSupportEmoji() {
var context, smiley;
if (!document.createElement('canvas').getContext) return;
context = document.createElement('canvas').getContext('2d');
View d3-component.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
const size = 600;
class CustomD3Component extends D3Component {
initialize(node, props) {
View filter.js
const React = require('react');
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
class FilterComponent extends D3Component {
initialize(node, props) {
// instead of adding an svg, add a canvas
var canvas ="canvas")
View mycomponent.js
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.PureComponent {
unwrapChildren() {
return => {
if (c => && === 'wrapper') {
return c.props.children[0];
return c;
View app.js
var svg ='#example-2')
.attr('width', '100%')
.attr('viewBox', '0 0 202 202');
var data = d3.range(10).map(function (d, i) {
return i;
View slideshow.js
const React = require('react');
const IdyllComponent = require('idyll-component');
const Slide = require('./slide');
class Slideshow extends IdyllComponent {
getChildren(children) {
let processedChildren = [];
React.Children.forEach(children, (child) => {
if (typeof child === 'string') {