Text editor web app for Tangram scenes
Clone or download
Latest commit 0950bb0 May 23, 2018
Failed to load latest commit information.
meta Update image sources and update processing script to pass linter May 22, 2017
src update urls May 22, 2018
.editorconfig Make everything 2-space indents Oct 31, 2016
.eslintignore Migrate linter to eslint Jun 3, 2016
.eslintrc Revert removal of react-addons-test-utils (enzyme needs it), +other t… May 1, 2017
.gitignore Move public files into one location Feb 22, 2017
.stylelintrc Convert CSS to use default indentation of 2 Oct 3, 2016
.yarnrc Add save-exact option for yarn Dec 23, 2016
CONTRIBUTING.md Update deployment docs in CONTRIBUTING.md May 22, 2017
circle.yml disable auto-deploy Dec 28, 2017
electron.js Do not let eslint complain if electron is not installed Apr 27, 2017
gulpfile.js check for valid callback May 22, 2018
karma.conf.js Remove eslintrc-legacy and update karma for eslint/es6 Apr 27, 2017
package-lock.json update peer dependencies May 22, 2018
package.json update peer dependencies May 22, 2018
yarn.lock update peer dependencies May 22, 2018


CircleCI Gitter

Editor for Tangram scene files

Tangram Play is an interactive text editor for creating maps using Mapzen’s Tangram. With Play, you can write and edit map styles in YAML and preview the changes live in the web browser. Start with one of Mapzen’s base maps or create your own style!

Here is a clip of Patricio's live demo at JS.Geo (October 2015) (notes are here).


Learn more about using Tangram and Mapzen vector tiles in documentation.

Having a problem with Tangram Play? Do you have feedback to share? Contact Mapzen Support by emailing tangram@mapzen.com.

Tangram Play is still in active development and you can have a role in it! Add bugs or feature requests as an issue on the project’s GitHub repository.


We welcome contributions from the community. For more information how to run Tangram Play in your local environment and get started, please see CONTRIBUTING.md.

Query string API

  • lines=[number]/[number-number]: you highlight a line or a range of lines. Example lines=10-12.

  • scene=[url.yaml]: load a specific .yaml file using a valid url


  • Ctrl + [number]: Fold indentation level [number]
  • Alt + F: fold/unfold line
  • Alt + P: screenshot of the map

Sublime-like hotkeys

  • Ctrl + F: Search
  • Ctrl + D: Select next occurrence
  • Alt + ArrowKeys: move word by word
  • Shift + ArrowKeys: Select character by character
  • Shift + Alt + ArrowKeys: Select word by word