clock menu more-arrow no yes

Filed under:

Hopscotch's visual coding app is now on the iPhone

Kick your command line interface to the curb

If you buy something from a Verge link, Vox Media may earn a commission. See our ethics statement.

Today, Hopscotch Technologies released an iPhone version of its popular visual coding app for kids. The new app lets users design games, art, and animations using a block-based visual programming language and then share those programs in-app with other Hopscotch users. It's a major overhaul of the original Hopscotch app for the iPad, which launched back in 2013 and topped 4 million downloads since.

"Smartphones are these ubiquitous computers that everyone is carrying around in their pockets, but there hasn't been an attempt before this to make a real programming language that's been optimized to be used on these devices," Hopscotch co-founder and CEO Jocelyn Leavitt tells The Verge.

Leavitt compares using Hopscotch on an iPhone to using Instagram to take and edit photos: "With Instagram, first you take a picture. Then you crop it. Then you put a filter on it. Then you write a comment." With Hopscotch, first you pick an object — for example, the cartoon monkey in the screencap below. Then you pick an ‘event handler,' which is basically a trigger action, like ‘swiping right on your iPhone.' Then you pick a ‘block,' which is a behavior or action caused by that trigger, like ‘move right by 100 pixels.'" So from this...

...you get this:

Add up a lot of elements and actions like this one and you get complex games and cool animations. Here's a game upload by user Axolotl called "Ocean Fight!"

The iPhone app adds a bunch of new features to Hopscotch, including programmable colors and the ability to copy and paste code and undo actions. But the biggest change is how the code for a particular project is organized. In the old iPad app, elements like this cartoon monkey were organized on a grid, where they could be selected, edited, and assigned actions. This grid-style editing interface has been reorganized into a collapsible scrolling list in the iPhone app, making it easier to navigate on the smaller screen. The new setup feels like a cross between a text message thread and a traditional command line interface, and Leavitt's team generally prefers the rearrangement over how the app is organized on the iPad. "It's more intuitive," she says.

The idea of programming directly on your iPhone might seem strange. It certainly wasn't an idea Leavitt and her team took to immediately when they first started designing the original Hopscotch iPad app years ago. "We were very hesitant to build an app for the phone because it was such a big design challenge," she says. "Like, how do we make a tool sophisticated enough and powerful enough that's also usable on an iPhone? It was already hard enough putting it on the small screen of an iPad."

But Leavitt mentioned two things that tipped them toward rehauling Hopscotch for a smaller screen. The first was how ubiquitous smartphones have become since Leavitt and her co-founder Samantha John started the company in 2011, the same year global manufacturers shipped more smartphones than computers (including desktops, PCs, and tablets) for the first time ever. The second was the enormous number of projects that have been created by Hopscotch users since then. Over 6 million games have been published using the app.

It's a major overhaul of the original app

"As a programming language [Hopscotch] is still pretty limited," says Leavitt. "There's not a ton you can do with it, even though you have the advantage of it being open-ended. But if you look at the stuff coming out of the community, the users are able to create such amazing projects out of it, not the variety, but the amount, the sheer volume of creative output right now, it's remarkable to me. That speaks to the real thirst in the marketplace almost more than the quality of our product."