Ionic Creator is a Rapid Prototyping Tool for Developing Ionic Framework Mobile Apps
Ionic Framework is one of the most active open source framework for developing mobile apps. It’s based on technologies like Cordova and AngularJS and I’ve been using it for the last couple of years with great success.
What is Ionic Creator?
In November 2015, the team from Ionic has started a new project called Ionic Creator. The idea was to have a web based visual designer for for creating mobile apps, especially combining the Ionic UI elements and assigning code for various UI events. The end result could be downloaded or used in the command line tool Ionic CLI as a start template for a full fledged mobile application.
The Ionic Creator project started as a simple tool for creating a scaffolding for mobile applications. The Ionic team has been actively developing Ionic Creator and added a number of features turning it from a scaffolding tool to an almost completely visual designer for mobile apps. In this post I will list in chronological order the features added to Ionic Creator.
First Ionic Creator out of Beta
The original description sounded something like:
Creator is a super simple prototyping tool for building real hybrid mobile apps (using Ionic). It takes the pain out of wiring up your app’s architecture and UI from the ground up each time, by letting you visually build your app with drag-and-drop mobile components and templates. When you’re ready, you can share your prototypes with colleagues, customers, and collaborators – and even export your prototypes into clean HTML, CSS, and JS (and even native files).
Ionic Creator Pro
- Added the ability to use a Side-Menu and Tabs in the same project
- Enabled Device Preview Modes (preview in iPhone, iPad, Android Phone and Tablet)
- The Creator Mobile App which allows you to preview projects right on your device.
- Create up to 5 Projects
- The ability to protect your projects by making them Private or Password Protected.
- Export an Ionic Project or a prototype native IPA/APK file
Ionic Creator gets a new mobile app and much more
- A new Creator Mobile app (iOS, Android) that now supports project sharing. Download and enter the code 123456 to try it out!
- Device Preview Modes that allow you to preview with iOS and Android, phones or tablets, and horizontal or vertical orientation.
- Icon + Splashscreen support has been added to Creator Package.
- New List Item component with a ton more customizations available.
Theming and SCSS Support Lands in Creator
- Change Header & Page Background Colors with ease.
- Set Default iOS and Android Fonts using Google Fonts.
- Full CSS and SCSS Editing gives you full control over how your app looks and feels. Your custom additions export with your project.
- Override Default Ionic Theme Colors and SCSS Variables.
Custom Code Support! From 0 to App Store
- One-Click Addons for Firebase, Kinvey, & MixPanel (more soon!)
- Edit Page Controllers to add dynamic functionality to your app.
- Edit HTML of any component with one simple click.
- Directives & Template Tags on any component.
- URL Route Parameters so you can pass data to pages.
Google Maps support is now in Ionic Creator
Ionic Creator offers drag and drop of components like Google Maps. It allows to easily add a Google Map to your app with just a few clicks. Set a location, configure a few settings, and you have a ready-to-go map right in your app!
Program your own Google Map
Want a group of Markers dynamically loaded into your map through your own API? With our one-click Google Maps Addon, we give you full control over your map so you can program it from scratch right in the tool.
New features in Ionic Creator
- Your Side-Menus can now have Controllers.
- Fixed an issue with Spacer component in Side Menus.
- Added a setting for Back button to show page name in Theming.
- A tutorial for using Forms + Route Parameters is coming on Thursday.
- An Ionic Auth series of tutorials is coming next week.
- New Feature: HTML Template Based Pages
New Slider component in Creator
The Slider Component will let you add background images & components to individual slides that the user can swipe between. Visit the Slider Documentation to learn more and watch the Weekly Workshop.