Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Ionic is an open source framework for building mobile apps. It’s like a big fancy design pattern library. Lots of components. Optimized for performance and use on mobile. Built in modern tools like Sass, and for modern tools like Angular.

They have loads of examples here on CodePen. Here’s one:

See the Pen Swipeable Cards 1.0.0-beta.11 by Ionic (@ionic) on CodePen.

The Ionic team just took their CodePen integration to the next level, by allowing you to start and Ionic server (for testing) via their command line tool from a CodePen URL.

One of the best features of the CLI is the LiveReload server that gets started when you run ionic serve.

If you’re familiar with CodeKit, it’s a bit like that. You view the site (on any browser on any device that supports WebSockets) and any changes to it are kept in sync with refreshing or CSS injection or whatever needed.

That’s cool, but it still requires you setting up the whole testing environment. With this latest upgrade to their CLI tool, you can do:

ionic start myapp http://codepen.io/ionic/pen/hqcju

from the command line and it will:

… run its normal process, scaffolding out the project and installing the correct plugins, but it will also include the code from the Codepen. All the JavaScript and CSS will be parsed into their own respective files, and any inline templates will be made into html template files and saved into the templates directory.

Pretty sweet! Go read all about it.