Another reason why React is awesome: render components directly inside your style guide, passing in props

gulpfile.js

gulp.task('styleguide', ['build'], function() {
  var React = require('react');
  require('node-jsx').install();
  var p = require('path');

  var components = {};

  // This is the important bit
  var normalizedPath = p.join(__dirname, "src/components/");
  require("fs").readdirSync(normalizedPath)
    .filter(function(path) {
      return p.extname(path) === '.js' || p.extname(path) === '.jsx';
    })
    .forEach(function(path) {
      var name = p.basename(path, p.extname(path));
      var component = require(p.join(normalizedPath, path));
      components[name] = React.createFactory(component);
    });

  var app = express();
  app.use(express.static(__dirname + '/dist'));
  app.set('views', __dirname + '/styleguide');
  app.set('view engine', 'jade');
  app.engine('jade', require('jade').__express);
  app.get('/', function(req, res) {
    res.render('index', {
      React: React,
      components: components, // <- and this bit here
      dummy: React.createElement('span', null, 'Dummy content')
    });
  });
  app.listen(8181);
  console.log('Styleguide started on port 8181');
  gulp.watch(paths.allStyles, ['stylus']);
  gulp.watch(paths.svg, ['svg']);
});

styleguide.jade

h2.sg Input
  .sg-example
    != React.renderComponentToString(components.Input({type: "text", label: "Input", id: "test"}))
    != React.renderComponentToString(components.Input({type: "text", label: "Input", id: "test", value:"Test input"}))