---
layout: default
title: Examples
categories:
 - example
---
  <div class="row-fluid">
    <div class="container">
      <div class="plain-title">
        <h1>NoFlo Examples</h1>
        <h2>{{ site.tagline }}</h2>
        <p>This page lists some demos and applications that have been built with NoFlo. You can also find <a href="{{ site.baseurl }}/component/">dozens of projects</a> on NPM. If you have something out in the open that you'd like to add, please <a href="mailto:henri.bergius@iki.fi">drop us a line</a>!</p>
      </div>

      <div class="main">
        <div class="demos">
          <h2>Examples for Node.js</h2>
          {% for example in site.categories['example'] %}
          {% if example.tags contains 'nodejs' %}
          <div class="demo">
            <div class="demo__info span4">
              <h3 class="demo__title">{{ example.title }}</h3>
              {{ example.content }}
              {% if example.demo %}
              <a href="{{ example.demo }}" class="btn btn-primary big-button demo__button">Run Demo</a>
              {% endif %}
              {% if example.flowhub %}
              <a href="{{ example.flowhub }}" class="btn btn-primary big-button demo__button">Open in Flowhub</a>
              {% endif %}
              <h4>Related Resources </h4>
              {% if example.blog %}
              <p><a href="{{ example.blog }}">Introductory blog post</a></p>
              {% endif %}
              {% if example.source %}
              <p><a href="{{ example.source }}">Source code</a></p>
              {% endif %}
              {% if example.video %}
              <p><a href="{{ example.video }}">Video presentation</a></p>
              {% endif %}
            </div>
            <div class="demo__screenshot span8">
              {% if example.image %}
              <img src="{{ example.image }}" alt="" title="" />
              {% else %}
              <img src="http://placehold.it/760x370" alt="" title="" />
              {% endif %}
            </div>
          </div>
          {% endif %}
          {% endfor %}
          <hr />
          <h2>Examples for web browsers</h2>
          {% for example in site.categories['example'] %}
          {% unless example.tags contains 'nodejs' %}
          <div class="demo">
            <div class="demo__info span4">
              <h3 class="demo__title">{{ example.title }}</h3>
              {{ example.content }}
              {% if example.demo %}
              <a href="{{ example.demo }}" class="btn btn-primary big-button demo__button">Run Demo</a>
              {% endif %}
              {% if example.flowhub %}
              <a href="{{ example.flowhub }}" class="btn btn-primary big-button demo__button">Open in Flowhub</a>
              {% endif %}
              <h4>Related Resources </h4>
              {% if example.blog %}
              <p><a href="{{ example.blog }}">Introductory blog post</a></p>
              {% endif %}
              {% if example.source %}
              <p><a href="{{ example.source }}">Source code</a></p>
              {% endif %}
            </div>
            <div class="demo__screenshot span8">
              {% if example.image %}
              <img src="{{ example.image }}" alt="" title="" />
              {% else %}
              <img src="http://placehold.it/760x370" alt="" title="" />
              {% endif %}
            </div>
          </div>
          {% endunless %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>