Switching to the New UI-lib

5 min read
ยท
Last updated on Mar 24, 2022
Note:
We've deprecated our UI-library. It's no longer maintained, therefore you should feel free to defer to your own UI guidelines.
In September 2016, we released a new UI-lib with new guidelines for the App Settings panel. The UI-lib includes a starter template (in React JSX, jQuery, and Angular) and UI controls (buttons, checkboxes, etc.).

We created the new UI-lib to unify the onboarding and user experience across all apps and Wix components. This makes it easier for users to get started with and use apps, because they’ll already know what to expect.

Still Using the Previous Version of the UI-lib?

Take the time to improve your app by moving over to our new UI-lib. 

By making your app easier to set up, you’ll offer users a better experience. This can lead to higher reviews, higher retention rates, and more upgrades.
Important:
You’ll still need to support the previous settings panel, because users who are still using the previous Wix editor won’t be able to use your new settings panel.
Here are the basic steps to implement the new UI-lib: 
  1. Talk to your account manager and let them know that you’re switching to the new UI-lib.
  2. Create mockups to show us your new settings panel.
  3. Finalize your mockups by implementing your account manager’s feedback. 
  4. Once the mockups are approved, develop and test your new settings panel. 
  5. Get your app approved by implementing your account manager’s feedback. 
We’ll go over each step in more detail below. Be sure to check out our tips at the end!
Note:
Your account manager is here to guide you - so reach out with any questions that come up.

1. Talk to Your Account Manager

Let your account manager know that you’re switching to the new UI-lib. You can discuss any new features or questions you have, and your account manager might be able to offer suggestions or tips for your app.

2. Create Mockups for Your New Settings Panel

By creating mockups and finalizing your app’s UI and user experience first, you’ll save a lot of time in development later.

  1. Get to know our App Settings template. Play around with the starter template so that you have an idea of how our tabs and UI controls work.
  2. Make a list of settings you offer in your app (and their default values). This will make it easier for you to organize your settings into tabs.
  3. Keep your existing users in mind as you make this list. Don’t remove any settings you already had in your panel, and think carefully about how to add new features so that existing users don’t see anything on their live site that they haven’t customized. (For example: if you previously had a color picker, and you now have a color picker with opacity - make sure opacity is set to 1 by default.)
  4. Follow our guidelines to organize your settings into the new panel structure. Our
    App Settings Panel guide shows you exactly how to do this.

3. Finalize Your Mockups with Your Account Manager

Send the mockups to your account manager. You’ll work together to get your mockups pixel-perfect. 

Your account manager will give you feedback on your app’s design, user experience, content, and more.
Important:
Don’t do any development until your mockups are approved. Also, once we approve your mockups, don’t make any UI/UX changes. If there’s something you must change, talk to your account manager - otherwise, it’ll slow down the app review later. 

4. Develop & Test Your App

Once we approve your mockups, you can start development. 

Here’s how:
  1. Create a test app for your app with the new UI-lib. In the Dev Center, create a new app and choose Test out the waters.
  2. Get node.js.
  3. Get one of these starter templates, depending on your preferred language. (It’s much faster to create a new panel panel based on these templates, than to use your existing files.)
    -React JSX
    -jQuery
    -AngularJS
  4. Test your app thoroughly by going through our testing guide.

5. Get the App Approved by Implementing Our Feedback

Once you’ve developed and thoroughly tested your app, let your account manager know.

We’ll do a thorough app review and send you our feedback.

Once your app is approved, just send us the URL for this new endpoint - we’ll take care of deploying the app with the new UI-lib. 
Important:
Remember that users who are still using the previous Wix editor can’t use the new settings panel - so you’ll still need to support the previous settings panel.

Tips for Creating Your New Mockups:

  • Your account manager is here to help. If there’s anything you’re not sure about - which UI controls to use, how to add new settings so that they don’t affect existing users - just ask.
  • Go over the examples in our docs. We added lots of images, GIFs, and use cases in our
    App Settings Panel guide to show you how to create your new settings panel.
  • See how other apps did it. We recommend checking out the Amazon app and the FAQ app to see their settings panel.

Tips for Development:

  • Start with the latest version of the starter templates on github. We recently made some improvements, and updated the dependencies. Don’t use a previous version that you starting using a long time ago - it’ll mean a lot more work for you later, and you’ll need to manually update your dependencies.
  • Check out our language-specific instructions. We have some important notes for React JSX, jQuery, and AngularJS. 
  • Don’t change any CSS properties in our UI controls. We’ll ask you to change it back, and it’ll delay the later app review.
  • Reflect changes in the app automatically - don’t refresh the app. Here's how.
Next article