blocks  and  text together blocks  and  text      together

Droplet is an new kind of editor that lets you edit in either blocks or text and switch any time.

Use Droplet

Pencilcode

Code.org Applab

CS50 IDE on Cloud9

Blocks and Text Together

Droplet is a new kind of text editor.


Features

Droplet Is A Text Editor

Droplet works directly with program text, so can do anything a normal text editor can do.

  • Load and edit any preexisting programs in popular text languages
  • Instantly parse inline text code into blocks
  • Leverage your favorite debuggers and linters

Droplet Is A Block Editor

Droplet confers all the practical and educational advantages of being able to work with visual blocks.

  • Syntax-aware drag-and-drop
  • Touchscreen and mobile compatible
  • Configurable palettes, dropdowns, and tooltips for education
  • Smooth animation from blocks to text

Supported Languages

Droplet is language-agnostic and completely pluggable with new languages. The following languages are currently supported:

The following languages have partially-working support:

  • Python, being developed by EarSketch
  • Java, no activity
  • BASIC, no activity

Droplet has a wrapper that allows it to adapt any ANTLR4 grammar pretty smoothly with minimal work (C mode is done this way). If your favorite language is on that list, consider adding a mode!

Embed

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.

Get Droplet via npm or bower:


  npm install --save droplet-editor
  bower install --save droplet-editor

Or download droplet-full.js and include it with a <script> tag. Then, pick a div, and call:


  new droplet.Editor(div, {})

That's it! Find out more in the embedding guide.

Contribute

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 github.com/droplet-editor-droplet to get started.

People

I'm Anthony Bau (dab1998@gmail.com, github/dabbler0). 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.

Thanks to:

  • The Pencilcode foundation and Code.org for supporting and contributing to Droplet
  • Brent van Minnen from Code.org (github/bjvanminnen) for adding the feature where blocks can be dropped into text mode
  • Sarah Filman from Code.org (github/sfilman) for her advice and guidance
  • Saksham Aggarwal from Pencilcode (github/sakagg) for adding HTML mode and +/- buttons to Droplet
  • David Bau from Pencilcode (github/davidbau) for his advice and guidance
  • Jeremiah Blanchard from Full Sail University (github/jblanchard-fs) for adding Python mode

License

  The MIT License (MIT)

  Copyright (c) 2014 Anthony Bau (dab1998@gmail.com)

  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.