Features
Power Tools for Power Users
Components
Magical unicorns, seriously. Components make your document come alive. You can bind a component to a state object for automatic updates. You can change the template or data that a component uses to change it dynamically.
Learn MoreTemplates
ChocolateChip-UI components have templates defined with ES6 template literals. You can use custom variables that make sense for the data you're using. You can use a plain template literal or the html tagged template literal. You can also easily define template helpers.
State
Data is the ultimate truth in an app. Models provide a convenient way to encapsulate data and make it available to the system for use. Unlike raw data, state objects can propagate their changes so that components can update automatically.
Learn MorePubsub
ChocolateChip-UI's pubsub system enables you to create mediators to manage the flow of your app. You can use mediators to update app state as the user interacts with a component, or to persist the data.
Learn MoreWidgets
Navigation lists, select lists, editable lists, tab bars, slide out menus, switches, buttons, carousels, popups, popovers, sheets, segmented buttons, steppers, busy indicators. Lots of widgets to implement the user interactions you need.
Learn MoreRouter
Routing enables you to write code detached from the DOM. ChocolateChip-UI automatically dispatches these for you and gives you with the correct data points in the route callback. Routes are used internally and do not affect the url.
Learn MoreGestures
ChocolateChip-UI provides extensive support for interactions with multiple types of devices: mouse, finger, stylus. Whether it's a tap, a mouse down, a click or a swipe, ChocolateChip-UI gives you a consistent interface for capturing these.
Learn MoreDOM
Components bound to data mean you don't need to fiddle with the DOM. If you do need to, ChocolateChip-UI provides a handlful of DOM methods that follow jQuery conventions. But seriously, you should almost never need to use them.
Learn MoreLayouts
From the simple to the complex, ChocolateChip-UI has a comprehesive layout system to build any type of layout you need. By default ChocolateChip-UI layouts are responsive, so you don't need to worry about device sizes. You do need to make sure your content fits properly on narrower devices.
Learn MoreThemes
ChocolateChip-UI uses themes to create the look and feel of Android and iOS. You create your app with one markup and one JavaScript. To support a platform is just a matter of providing the appropriate theme. Themes make your apps look great with little effort.
Learn MoreForms
If you have forms, you can use ChocolateChip-UI's form validators to check you data as the user is filling out the form. You can also validate the form at submit. If the form passes, it will be converted into a JSON object.
Learn MoreFormatting
Raw data, that's what you usually get when you query a database. It doesn't look pretty. ChocolateChip-UI provides a number of helpful data formatters so your data can look the way your users expect. There are options for localization too.
Learn MoreHybrids
So, you made a web app with ChocolateChip-UI and you want to deploy it to Android or iOS. ChocolateChip-UI provides you with chui, a command line tool to turn your app into a hybrid that you can put on each platform's app store.
Learn MoreRight-to-Left
ChocolateChip-UI has great support for Hebrew, Arabic, Farsi, Sorani, Pashto, Urdu and other right-to-left languages. Just add dir='rtl' to the HTML tag.