Create entirely new UI

You don't like React? You prefer jQuery? Or you are JavaScript ninja and prefer writing vanilla JS? Welcome on board. You'll see how straightforward it is to create a whole new UI for AlloyEditor.

1 - Get ready to build AlloyEditor

Follow the instructions in our How to build it Guide to know how to change and build AlloyEditor.

2 - Create UI folder

Create a new directory under src/ui with the name of your UI (e.g jquery)

3 - Create Build

Create a subfolder, called gulp-tasks and a build.js file with your custom build steps. You can check out the [Gulp Project]( or some of the existing tasks for extra insight into the build system.

4 - Build your UI

In order to build AlloyEditor using your brand new UI (jquery), run
gulp --ui jquery

That is everything. How will you structure the directories, which modules will you use, will you load Buttons and Toolbars on demand, what gulp tasks will you add - these questions are entirely up to you. The good news is that you won't start from scratch entirely. You still will be able to use the core of AlloyEditor, as well as the API from CKEditor.

Once you are ready with the UI, please send us a pull request and we will merge it!

comments powered by Disqus