Features

Power Tools for Power Users

Views

Magical unicorns, seriously. Views make your document come alive. You can bind them to raw data or to a model. You can change the element a view uses on the fly, or even its template or data. You can bind a view to a model for automatic updates.

Learn More

Templates

ChocolateChip-UI has two kinds of templates, markup in the DOM, or markup in the view itself. You can use custom variables that make sense for the data you're using. You can define helpers and templates can also include JavaScript.

Learn More

Components

Components are reusable views. When you need to use the same view in different places in your app but with different data, turn it into a component. Components have the same features as views, such as events, index number, etc.

Learn More

Models

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, models can propagate their changes so that views can update automatically.

Learn More

Mediators

ChocolateChip-UI's dispatch system enables you to create mediators to manage the flow of your app. You can use mediators to update a model as the user interacts with the view, and then update the related view with the changed data. Or use a mediator to persist the data.

Learn More

Widgets

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 More

Promises

ChocolateChip-UI supports ES6 Promises. If the browser supports these, no problem. Otherwise ChocolateChip-UI uses a polyfill. Promises provide an elegant way to avoid nested tower of doom callback structures. ChocolateChip-UI's Fetch API uses promises by default.

Learn More

Fetch

Fetch is Ajax with a simplified interface. It has builtin support for Promises. You can create headers for more advance uses. Promise chains make processing data and handling errors easy. It includes JSONP as well. ChocolateChip-UI includes a polyfill for older browsers.

Learn More

Router

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 More

Box

ChocolateChip-UI's Box provides local data persistence. It first tries to use IndexedDB. If there is a problem with the browser's implementation, it falls back to WebSQL or to localStorage. The data cap varies by browser.

Learn More

Gestures

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 More

DOM

Views with data binding mean you don't need to fiddle with the DOM. If you do need to, ChocolateChip-UI provides a powerful selector engine and DOM methods that replicate everything you know and love in jQuery. It works the same way.

Learn More

Layouts

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 More

Themes

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 More

Forms & Validation

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 More

Data Formatting

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 More

Hybrids

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 More

jQuery

ChocolateChip-UI does not use jQuery. By providing layouts, views, models, mediators, widgets, etc., there is no need for jQuery. ChocolateChip-UI's API follows jQuery conventions, so you'll feel comfortable and can be productive immediately.

Learn More

Right-to-Left Languages

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.

Learn More