A few days ago, I tweeted that something new and exciting was coming from Ionic:

This is not that thing. You’ll have to stay tuned for that! trollface

Instead, I am excited to share the Ionic Playground, a fun new tool that makes it incredibly easy to build Ionic apps and demos in the browser, without having to install anything. To use it, just visit

The Ionic Playground has a simple HTML, CSS, and Javascript editor with a live app preview that updates immediately with new changes. You can preview the mobile version of the app, share your work with anyone in the world, and fork other apps to add your own personal touch.


Try out the Live demo of the app shown above!

Mobile development made easy

One of the biggest challenges in using Ionic and other mobile development tools today is getting all the dependencies installed for mobile development. You need Node.js, Cordova, the Ionic CLI, platform tools for Android and iOS, developer accounts for each platform, etc.

Yet, we think one of the biggest advantages of web-based mobile technologies like Ionic is the ability to offer rapid app development right in the browser, without having to install a thing. The Playground finally takes advantage of that potential.

My hope is that the Playground will be widely used for education. We are starting to see Ionic being used to train the next generation of mobile developers, and tweets like this continue to blow my mind:

The Playground will make an awesome tool for teaching people to build mobile apps without having to worry about all the difficulties of actually building, testing, and deploying on a device (not to mention registering and configuring iOS/Android developer accounts!). Plus, students can work alongside a teacher, and immediately see the impact of their work, which is incredibly rewarding!

Beyond education, the Playground will make it easy to demonstrate issues in Ionic for development purposes, quickly build prototypes and demos, and try out new designs.

Next steps

We have a lot of ideas for the Playground, including adding snippets for common Ionic components, starting real device projects from a demo, and integration with the View app. Please let us know what you think about the Playground today and if you have any crazy ideas on how to make it even better!

Open the Ionic Playground!

Sign up for the Ionic Newsletter to get the latest news and updates!


  • JonathanW says:


  • Very cool. Query – how do we find the ‘apps’ (playgrounds, whatever) that we built? So I make something – click form – how do I get back to the original? Like maybe I want to compare. I could bookmark of course, but is this meant to be ephemeral? Like, if I build something and want to link to it in a blog, would you consider that a (kinda) bad idea?

    • Ben Sperry says:

      This is in the works for future versions! We wanted to get this out sooner than later, and then iterate over time on it (much like how we do with everything else!). 🙂

  • DenzilDoyle says:

    Codepen for Ionic! 😀

  • Anthony says:

    Amazing ! Going to try this out now.

  • Andrew Clinton says:

    So this is pretty much amazing. Keep up the good work guys!

  • Nice, I love it how you guys are constantly innovating and coming up with cool ideas!

    • Ben Sperry says:

      Thanks Leo. Our main motivation is making sure that building with Ionic is the most enjoyable experience as possible. Playground just moves us closer in that direction!

      • Well you’re definitely getting there. The tools you’re building and the ecosystem around it are fabulous, and so is the community. I’m now in the process of designing my first serious app with Ionic, love doing it. Great stuff.

  • Matt Kremer says:

    Great work guys, I love the “MVP”ness of this 😉

  • maleeb says:

    good job, build an embed for external sites (like codepen) 🙂

  • Kemoel Lima says:

    Very good!

  • Austen says:

    This is awesome! Developing with Ionic continues to “feel good”, and it is only getting better! Thanks

  • Joshua Berk says:

    This is awesome. Would be even better to see you do a true integration with Cloud9!

  • David says:

    Very cool – so how does this intersect with Creator? I mean it is in the browser too and why not have novice (for education) and advanced (actual dev) roles to access Creator… Novice role you would see something like this and advanced being where you have an editor side by side w/ full blown Codiqa level editor (and beyond) (or where Creator is or was going) and you can use the creator components via drag and drop or code or then just edit them simultaneously and it all stays in sync etc.

    • yesimahuman says:

      We actually just hired someone to focus full time on creator, so expect lots of awesome stuff coming there soon.

      I do see a world where they are both one thing, but not sure yet how that’s going to work. The benefit of playground is that it’s so *simple*. Creator is quite a bit more complex (which can be good since it lets you do some interesting things without coding), but it’s really hard to beat a simple code editor with live preview like this.

      Stay tuned!

      • loic knuchel says:

        I don’t see a service merging Playgroud & Creator. To me, they answer differents needs and publics. But it could be cool to import Creator projects in Playground and vice versa…

  • loic knuchel says:

    Codepen for Ionic ! Great ! 😀
    And with some more feature it could be really AWESOME !!!

    Here is my wishlist :

    – Collaborative editing (I organize mob programming Ionic sessions and it would be an awesome tool if we can collaborate on one app)
    – Multi-file support like a real editor. To me it’s a must have to create app more complicated than a “Hello World”
    – Create new project from app (ionic start myApp
    – Download app (Ionic view or Android apk !)
    – Discover, vote and bookmark apps. It could be a great way to share a discover components or designs
    – Have mocks for Cordova plugins
    – Versionning (with ability to navigate in history like framapad :

    I’m giving a Ionic formation in july and I would love using it 😀
    Thank you again for all the awesomeness

  • Matheus Cruz Rocha says:

    Great work guys, this is awesome to help the people at forum, to teach somebody. Just Amazing.

  • Daniel Møgelgaard Pedersen says:

    Just missing typescript support, then it would be perfect.

  • loic knuchel says:

    I’m a huge fan of , so if you could have similar feature and you encourages people of submitting their components / UI, it would be so greaaaaaat 😀

  • Impressive! And good taste for design

  • Nick Green says:

    Love it! Great for a brainstorm to demo in 60 min workflow!!!

  • Alex Muha says:

    Очень здорово! Молодцы, так прдолжать!

  • McLovin says:

    This is awesome. How can we add content into our playground? IE, I have a .GIF for a wait spinner that I want to use. Do I need to host that elsewhere or can I upload it and use it?

  • David Castro says:

    For developing heavier projects in the browser, I recommend Cloud9. allows me to develop even from a low powered netbook.

  • adalberto Joco says:

    Amazing news, thanks !

  • Awesome tool !
    What about code completion ? would be great for usual components, but then it’s not really the point I guess 🙂

  • Alex says:

    There is a bug in the demo app in Preview Mode when viewing it on the iPhone in Safari (iOS8). If you do a screen edge swipe from left to right to go back a page then it looks like the event fires twice and the animation flashes twice. Is this a problem with the demo or an inherent issue with the tool in its current iteration?

  • Dylan says:

    Awesome! It would be great to have the ability to write Jade instead of HTML too 🙂

  • Ańuj Jain says:

    Nice work team. I was waiting for such great tool….!!!!

  • faizalheesyam says:

    Ionic is the only development framework that I found have a complete ecosystem to work with.. with powerful CLI, tools for previewing/testing/debugging, the serve lab idea is awesome! you have Ionic View, the upcoming Ionic Push, and now the Playground.. this is like Codepen for Ionic! development is fun again! feels good to know I’m on the right track with the right community..

    honestly, its not easy for me before as a front-end web developer to enter the world of hybrid mobile development.. there’s always a missing pieces, there’s always something lack somewhere.. something can be too powerful, but not n00b friendly, something can be very easy to understand, but not powerful enough.. I have to mix and match tools from here and there, just to come up with something.

    but now, I have Ionic.. Thank you guys…

  • Federico Rodriguez says:

    Amazing! Just when you thought it couldn’t be faster to start an Ionic project with the CLI and the starter templates… Great tool to show your boss what Ionic can do! Starter templates for Playground would be nice. Keep up the great work!

  • Lukas Menges says:

    Great work! It´s an easy starting point for a new app. But will be there a download button? So that you can complete your work local?

  • kevin jose says:


  • Uttam Panara says:

    Really It’s much more easier to live experiment. I like it. Thanks

  • Jewon Bong says:


  • Madhes says:

    Nice tool, Hereafter we don’t need plunkr.

  • David says:

    Nice Tool
    Thanks Ionic Team

  • Robert says:

    Nice! Great start. Now I’m waiting for Coffeescript, SASS and Jade support 🙂

  • Can Tecim says:

    Its beautiful idea, Now we can test and deploy features into our project very fast. Keep it up guys i’m very exciting

  • Rahul Singh Thakur says:

    This is super awesome. I have been using it for past 2-3 hours and am not able to execute angular codes in it. Do we have this as an enhancement planned or is it something that I missed

  • Nicholas Blanchard says:

    This is cool but will we ever get support for things like slim/haml and sass? One of the main reasons I use codepen over other similar services.

    • yesimahuman says:

      Possibly sass in the far future, but probably not jade/haml/slim just because we don’t recommend it for ionic dev and trying to pick between one is going to be impossible.

  • satish11nov says:

    You guys are awesome !!!

  • Jiyuu says:

    Well done Ionic team! However, it may be a stupid question, but… what’s the differences between your tool and another such as CodePen? I don’t get it.

  • hxtheone says:

    Nice tool, and could you please add vim mode to the editor? may it be the best tool to build ionic app!

  • Mark Bolden says:

    This is awesome!! You guys are keeping it 100 with your commitment to innovation!!

  • Jordan says:

    Love it. 😀

  • Sneha Mohanty says:

    Hey guys and gals, to see the full and easy way of installation and setup of an ionic app ( npm , ant , cordova and all of it ), please visit my blog –

  • moussaoui91 says:

    Is Ionic Playground Open source?

  • Bla says:

    Do we have a list of more demo apps on playground?

7 Trackbacks