Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Design, remix, and share your street – all in your browser! Add bike paths, widen sidewalks or traffic lanes, learn how all of this can impact your community.
JavaScript CSS Shell
branch: master
Failed to load latest commit information.
bin [fix #459] Parse MongoDB connection string properly.
doc/images Remove unused doc images and move these images from public/ to doc/
public Remove clippaths from SVG icons to workaround an IE bug
.gitignore Bump all deps to latest. Changes to API for config, sendgrid and vali…
CNAME Add CNAME Remove e-mail from bug feedback. All bug reports should be filed thro…
Procfile fix Procfile for Heroku
apiary.apib updating Apiary config file
app.js Refactor index.ejs into several split apart Jade template files. Adju…
index.js a simple smoke test using Protractor and Chromedriver #444
package.json Bump npm engine per Heroku advice

Build Status Dependency Status Code Climate


Streetmix is a browser-based interactive tool that lets you design, remix, and share your neighborhood street. Add trees or bike paths, widen sidewalks or traffic lanes, and learn how your decisions can impact your community.

Streetmix is currently live at



What are street sections?

A "section" is shortened way of saying "cross-section view", a type of 2D non-perspectival drawing commonly used in engineering and architecture to show what something looks like when you take a slice of it and look at it head-on. Similarly, a street section is a cross section view of a street, showing the widths and placement of vehicle lanes, bike lanes, sidewalks, trees, street furniture or accessories (like benches or street lamps), as well as engineering information like how the road is sloped to facilitate drainage, or the locations of underground utilities. Although sections can be simplified line drawings, urban designers and landscape architects have created very colorful illustrative street sections, removing most of the engineering particulars to communicate how a street could be designed to feel safe, walkable or habitable.


Why does Streetmix exist?

When city planners seek input from community meetings from the public on streetscape improvements, one common engagement activity is to create paper cut-outs depicting different street components (like bike lanes, sidewalks, trees, and so on) and allow attendees to reassemble them into their desired streetscape. Planners and city officials can then take this feedback to determine a course of action for future plans. By creating an web-based version of this activity, planners can reach a wider audience than they could at meetings alone, and allow community members to share and remix each other's creations.

The goal is to promote two-way communication between planners and the public, as well. Streetmix intends to communicate not just feedback to planners but also information and consequences of actions to the users that are creating streets. Kind of like SimCity did with its in-game advisors!

Streetmix can be used as a tool to promote and engage citizens around streetscape and placemaking issues, such as Complete Streets or the Project for Public Spaces' Rightsizing Streets Guide.

Why the name "Streetmix"?

"Streets" + "remix" :-)

How did this project start?

Streetmix was started as a Code for America hackathon project in January 2013, inspired by community meetings like the one described above, and a similar CfA project in 2012 called Blockee.

Development Setup

First-time setup

On Mac OS X 10

These installation instructions assume that you have already installed the Homebrew package manager.

1) Download and install Node.js.

brew install nodejs

2) Download, install and start MongoDB.

brew install mongodb

3) Download and install Coreutils.

brew install coreutils

4) Clone this remote repository to a folder on your computer.

git clone

5) Install project dependencies.

cd streetmix
npm install

On Windows

Streetmix was not developed on a Windows platform, and testing is limited. We've been able to successfully stand up a local installation on 64-bit Windows 7-based Dell laptops for an event without Internet access. These instructions below will assume that the user has basic familiarity with Git, GitHub, and the Windows Terminal command line interface, and has administrative permissions to install software on the machine.

Installing core dependencies

You may skip each of these steps if a fairly recent stable version is already present on the system.

  • Install Git.
  • Install node.js. The site should detect your system and provide you with the correct installer, but you may specify the package at (e.g. Windows 64-bit installer).
  • Install MongoDB. Select the appropriate Windows installer package from their downloads page.
  • Install a modern browser. Streetmix has been tested in Chrome (preferred), Firefox, Safari, and Internet Explorer 11. (Previous versions of Internet Explorer will not work.)
Installing Streetmix

1) In the command line terminal, clone a copy of the Streetmix repository to your local machine:

git clone

You may additionally specify the name of the directory to install to, if you wish.

2) Go into the project’s root directory and install all Node libraries.

cd streetmix
npm install

3) Set up the MongoDB environment. Follow the instructions under “Set up the MongoDB environment” from the MongoDB website.

On all systems

1) Setup environment variables. You can either set these in your .bash_profile (or equivalent, on Mac OSX or *nix-based systems) or place them in a file named .env in the project root directory (great for development environments or Windows environments).

Variable name Description Required?
SENDGRID_USERNAME Your SendGrid username Yes
SENDGRID_PASSWORD Your SendGrid password Yes
TWITTER_OAUTH_CONSUMER_KEY Development Twitter OAuth consumer key, obtained from @streetmix Twitter account Yes
TWITTER_OAUTH_CONSUMER_SECRET Development Twitter OAuth consumer secret, obtained from @streetmix Twitter account Yes
NO_INTERNET_MODE Boolean. Set to true to run a local "demo" without external Internet access No

A sample .env file will look like this:

Note: If NO_INTERNET_MODE is true, you do not need the Sendgrid or Twitter authentication keys, as those will be disabled due to lack of Internet.

HOWTO: Start the application

1) Start MongoDB.


2) Start the web server.

cd streetmix
npm start

3) Load the application in your web browser.


HOWTO: Run browser integration tests

1) Install test dependencies (only required once)

grunt test:local:setup

2) Run browser tests locally

grunt test:local



Submitting an Issue

We use the GitHub issue tracker to track bugs and features. Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. You can indicate support for an existing issue by voting it up. When submitting a bug report, please include any details that may be necessary to reproduce thebug, including your node version, npm version, and operating system.

Submitting a Pull Request

  1. Fork the project.
  2. Create a topic branch.
  3. Implement your feature or bug fix.
  4. Commit and push your changes.
  5. Submit a pull request.


The team is comprised of 2013 Code for America fellows.

You can contact the team at

Also, this project was made possible by the support of Code for America staff and other 2013 fellows, as well as our network of urbanists, design and planning professionals, and testers, who have provided us countless amounts of time and feedback towards this development.


Copyright (c) 2013 Code for America. See LICENSE for details.

Something went wrong with that request. Please try again.