index.html

---
layout: default
title: Droplet
---
<link rel="stylesheet" href="assets/droplet.css"/>
<div class="jumbotron">
  <div class="container">
    <svg width="100%" viewBox="0 0 250 30">
      <defs>
        <filter id="droplet-path-bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="interim"></feGaussianBlur>
          <feComponentTransfer in="interim" out="blur">
          <feFuncA type="linear" slope="1.3" intercept="0">
          </feFuncA></feComponentTransfer>
          <feDiffuseLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut">
          <feDistantLight azimuth="225" elevation="45"></feDistantLight>
          </feDiffuseLighting>
          <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"></feComposite>
          <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="1.4" k2="0" k3="0" k4="0" result="litPaint"></feComposite>
        </filter>
        <linearGradient id="fadeGrad" y2="0" x2="1">
          <stop offset="0" stop-color="white" stop-opacity="1"/>
          <stop offset="0.6" stop-color="white" stop-opacity="0"/>
        </linearGradient>

        <mask id="fade" maskContentUnits="objectBoundingBox">
          <rect width="1" height="1" fill="url(#fadeGrad)"/>
        </mask>
      </defs>
      <g mask="url(#fade)">
        <path fill="#90caf9" d="M3 27 L3 27 L0 24 L0 3 L3 0 L227 0 L230 3 L230 24 L227 27 M3 27 Z" filter="url(#droplet-path-bevel)"></path><path fill="#FFF" d="M8 22 L8 22 L5 19 L5 8 L8 5 L58 5 L61 8 L61 19 L58 22 M8 22 Z" stroke="#000" stroke-width="0"></path>
        <text fill="#000" x="6" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">blocks</text>
        <text fill="#000" x="61" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">&nbsp;and&nbsp;</text>
        <path fill="#FFF" d="M109 22 L109 22 L106 19 L106 8 L109 5 L222 5 L225 8 L225 19 L222 22 M109 22 Z" stroke="#000" stroke-width="0"></path>
        <text fill="#000" x="107" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">text&nbsp;together</text>
      </g>
      <text fill="#000" x="6" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">blocks</text>
      <text fill="#000" x="61" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">&nbsp;and&nbsp;</text>
      <text fill="#000" x="107" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">text</text>
      <text fill="rgb(147, 15, 128)" x="107" y="18" dominant-baseline="alphabetic" font-family="Courier New, monospace" font-size="15">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;together</text>
    </svg>
    <p>
    Droplet is an new kind of editor that lets you edit in either blocks or text and switch any time.
    </p>
  </div>
</div>
<div class="container">
  <h2>Use Droplet</h2>
  <div class="row">
    <div class="col-xs-4 wilderness-user">
      <a href="http://pencilcode.net/first">
        <img class="logo" src="/assets/pencilcode.png"/>
      </a>
      <h3>Pencilcode</h3>
    </div>
    <div class="col-xs-4 wilderness-user">
      <a href="https://code.org/educate/applab">
        <img class="logo" src="/assets/codeorg.png"/>
      </a>
      <h3>Code.org Applab</h3>
    </div>
    <div class="col-xs-4 wilderness-user">
      <a href="http://ide.cs50.io">
        <img class="logo" src="/assets/cloud9.svg"/>
      </a>
      <h3>CS50 IDE on Cloud9</h3>
    </div>
  </div>
</div>
<div class="container">
  <h2>Blocks and Text Together</h2>
  <p>
  Droplet is a new kind of text editor.
  </p>
  <div class="row">
    <div class="col-xs-6">
      <select class="form-control" id="language-select">
        <option value="javascript">JavaScript</option>
        <option value="c_cpp">ANSI C</option>
        <option value="html">HTML</option>
        <option value="coffeescript">CoffeeScript</option>
      </select>
    </div>
    <div class="col-xs-6">
      <button class="btn btn-primary" id="toggle">Toggle Blocks</button>
    </div>
  </div><br/>
  <div id="editor-wrapper" style="position:relative;width:100%;height:500px;border: 1px solid black;">
    <div id="editor"></div>
  </div>
</div>
<div class="container">
  <h2>Features</h2>
  <div class="container">
    <h3>Droplet Is A Text Editor</h3>
    <p>Droplet works directly with program text, so can do anything a normal text editor can do.</p>
    <ul>
      <li>Load and edit any preexisting programs in popular text languages</li>
      <li>Instantly parse inline text code into blocks</li>
      <li>Leverage your favorite debuggers and linters</li>
    </ul>
    <h3>Droplet Is A Block Editor</h3>
    <p>Droplet confers all the practical and educational advantages of being able to work with visual blocks.
    <ul>
      <li>Syntax-aware drag-and-drop</li>
      <li>Touchscreen and mobile compatible</li>
      <li>Configurable palettes, dropdowns, and tooltips for education</li>
      <li>Smooth animation from blocks to text</li>
    </ul>
    </p>
    <h3>Supported Languages</h3>
    <p>Droplet is language-agnostic and completely pluggable with new languages. The following languages are currently supported:</p>
    <ul>
      <li>JavaScript, maintained by <a href="http://code.org">Code.org</a></li>
      <li>CoffeeScript, maintained by <a href="http://pencilcode.net">Pencilcode</a></li>
      <li>HTML, maintained by <a href="http://pencilcode.net">Pencilcode</a></li>
      <li>C, maintained for <a href="http://cs50.harvard.edu">Harvard CS50</a></li>
    </ul>
    <p>The following languages have partially-working support:<p>
    <ul>
      <li>Python, being developed by <a href="https://earsketch.gatech.edu">EarSketch</a></li>
      <li>Java, no activity</li>
      <li>BASIC, no activity</li>
    </ul>
    <p>Droplet has a wrapper that allows it to adapt <a href="https://github.com/antlr/grammars-v4">any ANTLR4 grammar</a> pretty smoothly with minimal work (C mode is done this way). If your favorite language is on that list, consider adding a mode!</p>
  </div>
</div>
<div class="container">
  <h2>Embed</h2>
  <p>Adding Droplet to a page usually only takes a few lines of code. Droplet depends on ACE Editor for its text mode and mimics most of its API methods, so if your app uses ACE already, adding Droplet will be even easier.<p>
  <p>Get Droplet via <code>npm</code> or <code>bower</code>:</p>
  <pre><code>
  npm install --save droplet-editor
  bower install --save droplet-editor
  </code></pre>
  <p>Or download <a href="assets/droplet-full.js">droplet-full.js</a> and include it with a <code>&lt;script&gt;</code> tag. Then, pick a div, and call:</p>
  <pre><code>
  new droplet.Editor(div, {})
  </code></pre>
  <p>That's it! Find out more in the <a href="embed.html">embedding guide</a>.</p>
  </p>
</div>
<div class="container">
  <h2>Contribute</h2>
  <p>Droplet is completely open-source and wants contributors! Add your favorite language or a feature you've been missing, or pick up an issue from the Github issue tracker. Grab the source at <a href="http://github.com/droplet-editor/droplet">github.com/droplet-editor-droplet</a> to get started.</p>
</div>
<div class="container">
  <h2>People</h2>
  <p>I'm Anthony Bau (<a href="mailto:dab1998@gmail.com">dab1998@gmail.com</a>, <a href="http://github.com/dabbler0">github/dabbler0</a>). I am a student, so most of my substantial work on Droplet will happen during the summer. I maintain it and do small fixes in my free time over the year.</p>
  <p>Thanks to:
  <ul>
    <li>The <a href="http://pencilcode.net">Pencilcode</a> foundation and <a href="http://code.org">Code.org</a> for supporting and contributing to Droplet</li>
    <li>Brent van Minnen from Code.org (<a href="http://github.com/bjvanminnen">github/bjvanminnen</a>) for adding the feature where blocks can be dropped into text mode</li>
    <li>Sarah Filman from Code.org (<a href="http://github.com/sfilman">github/sfilman</a>) for her advice and guidance</li>
    <li>Saksham Aggarwal from Pencilcode (<a href="http://github.com/sakagg">github/sakagg</a>) for adding HTML mode and +/- buttons to Droplet</li>
    <li>David Bau from Pencilcode (<a href="http://github.com/davidbau">github/davidbau</a>) for his advice and guidance</li>
    <li>Jeremiah Blanchard from Full Sail University (<a href="http://github.com/jblanchard-fs">github/jblanchard-fs</a>) for adding Python mode</li>
  </ul>
  </p>
</div>
<div class="container">
  <h2>License</h2>
  <pre>
  The MIT License (MIT)

  Copyright (c) 2014 <a href="mailto:dab1998@gmail.com">Anthony Bau (dab1998@gmail.com)</a>

  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files (the "Software"), to deal
  in the Software without restriction, including without limitation the rights
  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  copies of the Software, and to permit persons to whom the Software is
  furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  SOFTWARE.
  </p>
</div>
<script src="assets/ace/ace.js"></script>
<script src="assets/droplet-full.js"></script>
<script>
var modes = {
  'javascript': {
    mode: 'javascript',
    palette: [
      {
        'name': 'Output',
        'color': 'blue',
        'blocks': [
          {'block': 'console.log("hello");'},
        ]
      },
      {
        'name': 'Variables',
        'color': 'blue',
        'blocks': [
          {'block': 'var a = 10;'},
          {'block': 'a = 10;'},
          {'block': 'a += 1;'},
          {'block': 'a -= 10;'},
          {'block': 'a *= 1;'},
          {'block': 'a /= 1;'}
        ]
      },
      {
        'name': 'Functions',
        'color': 'purple',
        'blocks': [
          {'block': 'function myFunction(param) {\n  __\n}'},
          {'block': 'myFunction(arg);'},
        ]
      },
      {
        'name': 'Logic',
        'color': 'teal',
        'blocks': [
          {'block': 'a === b'},
          {'block': 'a !== b'},
          {'block': 'a > b'},
          {'block': 'a < b'},
          {'block': 'a || b'},
          {'block': 'a && b'},
          {'block': '!a'}
        ]
      },
      {
        'name': 'Operators',
        'color': 'green',
        'blocks': [
          {'block': 'a + b'},
          {'block': 'a - b'},
          {'block': 'a * b'},
          {'block': 'a / b'},
          {'block': 'a % b'},
          {'block': 'Math.pow(a, b)'},
          {'block': 'Math.sin(a)'},
          {'block': 'Math.tan(a)'},
          {'block': 'Math.cos(a)'},
          {'block': 'Math.random()'}
        ]
      },
      {
        'name': 'Control flow',
        'color': 'orange',
        'blocks': [
          {'block': 'for (var i = 0; i < 10; i++) {\n  __\n}'},
          {'block': 'if (a === b) {\n  __\n}'},
          {'block': 'if (a === b) {\n  __\n} else {\n  __\n}'},
          {'block': 'while (true) {\n  __\n}'},
          {'block': 'function myFunction(param) {\n  __\n}'}
        ]
      },
    ]
  },
  'coffeescript': {
    mode: 'coffeescript',
    palette: [
      {
        'name': 'Output',
        'color': 'blue',
        'blocks': [
          {'block': 'console.log "hello"'},
        ]
      },
      {
        'name': 'Variables',
        'color': 'blue',
        'blocks': [
          {'block': 'a = 10'},
          {'block': 'a += 1'},
          {'block': 'a -= 10'},
          {'block': 'a *= 1'},
          {'block': 'a /= 1'}
        ]
      },
      {
        'name': 'Functions',
        'color': 'purple',
        'blocks': [
          {'block': 'myFunction = (param) ->\n  ``'},
          {'block': 'myFunction(arg);'},
        ]
      },
      {
        'name': 'Logic',
        'color': 'teal',
        'blocks': [
          {'block': 'a is b'},
          {'block': 'a isnt b'},
          {'block': 'a > b'},
          {'block': 'a < b'},
          {'block': 'a || b'},
          {'block': 'a && b'},
          {'block': '!a'}
        ]
      },
      {
        'name': 'Operators',
        'color': 'green',
        'blocks': [
          {'block': 'a + b'},
          {'block': 'a - b'},
          {'block': 'a * b'},
          {'block': 'a / b'},
          {'block': 'a % b'},
          {'block': 'a ** b'},
          {'block': 'Math.sin(a)'},
          {'block': 'Math.tan(a)'},
          {'block': 'Math.cos(a)'},
          {'block': 'Math.random()'}
        ]
      },
      {
        'name': 'Control flow',
        'color': 'orange',
        'blocks': [
          {'block': 'for el, i in list\n  ``'},
          {'block': 'if a is b\n  ``'},
          {'block': 'if a is b\n  ``\nelse\n  ``'},
          {'block': 'while true\n  ``'},
          {'block': 'myFunction = (param) ->\n  ``'}
        ]
      },
    ]
  },
  'c_cpp': {
    "mode": "c_cpp",
    "modeOptions": {
      "knownFunctions": {
        "GetString": {
          "color": "green",
          "shape": "value-only"
        },
        "toupper": {
          "color": "green",
          "shape": "value-only"
        },
        "strlen": {
          "color": "green",
          "shape": "value-only"
        },
        "printf": {
          "color": "blue",
          "shape": "block-only"
        },
        "puts": {
          "color": "blue",
          "shape": "block-only"
        },
        "scanf": {
          "color": "blue",
          "shape": "block-only"
        },
        "getchar": {
          "color": "green",
          "shape": "value-only"
        },
        "fopen": {
          "color": "green",
          "shape": "value-only"
        },
        "fprintf": {
          "color": "blue",
          "shape": "block-only"
        },
        "fputs": {
          "color": "blue",
          "shape": "block-only"
        },
        "fscanf": {
          "color": "blue",
          "shape": "block-only"
        },
        "fgetc": {
          "color": "green",
          "shape": "value-only"
        },
        'fillRect': {
          'color': 'blue',
          'shape': 'block-only'
        }
      }
    },

    "palette": [
    {
      'name': 'Functions',
      'color': 'blue',
      'blocks': [
      {
        'block': 'printf();',
        'expansion': 'printf("%c", character);',
        'context': 'blockItem'
      },
      {
        'block': 'scanf();',
        'expansion': 'scanf("%c", &character);',
        'context': 'blockItem'
      },
      {
        'block': 'strlen()',
        'expansion': 'strlen(str)',
        'context': 'expression'
      },
      {
        'block': 'getchar()',
        'context': 'expression'
      },
      {
        'block': 'FILE *file;',
        'expansion': 'FILE *file = fopen("file.txt", "r");',
        'context': 'blockItem'
      },
      {
        'block': 'fprintf();',
        'expansion': 'fprintf(file, "%s\\n", "Hello, World!");',
        'context': 'blockItem'
      },
      {
        'block': 'fputs();',
        'expansion': 'fputs(file, "Hello, World!");',
        'context': 'blockItem'
      },
      {
        'block': 'fscanf();',
        'expansion': 'fscanf(file, "%s", str);',
        'context': 'blockItem'
      },
      {
        'block': 'fgetc()',
        'expansion': 'fgetc(file)',
        'context': 'expression'
      }]
    },
    {
      'name': 'Variables',
      'color': 'green',
      'blocks': ([
          {
            'block': 'int n = 0;',
            'context': 'blockItem'
          },
          {
            'block': 'double f = 0;',
            'context': 'blockItem'
          },
          {
            'block': 'string str = 0;',
            'context': 'blockItem'
          },
          {
            'block': 'a = 0;',
            'context': 'blockItem'
          },
          {
            'block': 'type a = 0;',
            'context': 'blockItem'
          },
          {
            'block': 'type a;',
            'context': 'blockItem'
          },
          {
            'block': 'type a (arg1);',
            'context': 'blockItem'
          },
          {
            'block': 'a + b',
            'context': 'expression'
          },
          {
            'block': 'a - b',
            'context': 'expression'
          },
          {
            'block': 'a * b',
            'context': 'expression'
          },
          {
            'block': 'a / b',
            'context': 'expression'
          },
          {
            'block': 'a % b',
            'context': 'expression'
          },
          {
            'block': 'a[b]',
            'context': 'expression'
          }
      ])
    },
    {
      'name': 'Logic',
      'color': 'blue',
      'blocks': [
      {
        'block': 'a > b',
        'context': 'expression'
      },
      {
        'block': 'a < b',
        'context': 'expression'
      },
      {
        'block': 'a == b',
        'context': 'expression'
      },
      {
        'block': 'a != b',
        'context': 'expression'
      },
      {
        'block': '!a',
        'context': 'expression'
      },
      {
        'block': 'a && b',
        'context': 'expression'
      },
      {
        'block': 'a || b',
        'context': 'expression'
      }
      ]
    },
    {
      'name': 'Control',
      'color': 'purple',
      'blocks': [
      {
        'block': 'if (a == b)\n{\n  puts("Equal");\n}',
        'context': 'blockItem'
      },
      {
        'block': 'if (a == b)\n{\n  puts("Equal");\n} else {\n  puts("Not equal");\n}',
        'context': 'blockItem'
      },
      {
        'block': 'while (i < 10)\n{\n  i++;\n}',
        'context': 'blockItem'
      },
      {
        'block': 'for (int i = 0; i < n; i++)\n{\n  printf("%d\\n", i);\n}',
        'context': 'blockItem'
      }
      ]
    },
    {
      'name': 'Structure',
      'color': 'orange',
      'blocks': [
      {
        'block': '#include <cs50.h>',
        'context': 'compilationUnit'
      },
      {
        'block': '#include "myFile.h"',
        'context': 'compilationUnit'
      },
      {
        'block': '#define MY_CONSTANT 10',
        'context': 'compilationUnit'
      },
      {
        'block': 'int main(int n, char *args[])\n{\n  puts("Hello");\n}',
        'context': 'externalDeclaration'
      },
      {
        'block': 'type function(myType param)\n{\n  return 0;\n}',
        'context': 'externalDeclaration'
      },
      {
        'block': 'struct myStruct\n{\n  int property1;\n  int property2;\n};',
        'context': 'externalDeclaration'
      },
      {
        'block': 'myType myStructProperty;',
        'context': 'structDeclaration'
      },
      {
        'block': 'myType globalVariable = 0;',
        'context': 'externalDeclaration'
      },
      {
        'block': 'typedef type1 type2;',
        'context': 'externalDeclaration'
      }
      ]
    },
    {
      'name': 'Memory',
      'color': 'red',
      'blocks': [
      {
        'block': 'myType *a = malloc(sizeof(myType));',
        'context': 'blockItem'
      },
      {
        'block': 'myType *a = malloc(sizeof(myType) * length);',
        'context': 'blockItem'
      },
      {
        'block': 'myType a[length];',
        'context': 'blockItem'
      },
      {
        'block': '*a',
        'context': 'expression'
      },
      {
        'block': 'a[0]',
        'context': 'expression'
      },
      {
        'block': 'a.property',
        'context': 'expression'
      }
      ]
    }
    ]
  }
};

var sessions = {};

var editor = new droplet.Editor(document.getElementById('editor'), modes['javascript']);

document.getElementById('toggle').addEventListener('click', function() {
  editor.toggleBlocks();
});

document.getElementById('language-select').addEventListener('change', function() {
  if (this.value in sessions) {
    editor.aceEditor.setSession(sessions[this.value]);
  }
  else {
    var newSession = sessions[this.value] = ace.createEditSession('', 'ace/mode/' + this.value);
    editor.aceEditor.setSession(newSession);
    editor.bindNewSession(modes[this.value]);
  }
});

</script>