Skins in AlloyEditor are a very powerful feature that allows you to seamlessly integrate the editor inside your app.

Skin Architecture

AlloyEditor skins are organized according to the following principles:


Style values are parameterized as much as possible. This allows skins to fully extend others just by changing a small set of variable values.


A skin is created by combining one or more components together. Different skins may use different components, so irrelevant styling can be easily stripped out.

Structure vs Skin

All styling is separated into structure and skin. Structure represents everything that affects the sizing and position of the elements. Meanwhile, skin represents all the purely cosmetic changes.

Skins Overview

At this moment, you can use any of the following skins out of the box:

Ocean (default)


Add the following external stylesheet to use Atlas Skin
<link href="alloy-editor/assets/alloy-editor-atlas-min.css" rel="stylesheet">


Add the following external stylesheet to use Moono Skin
<link href="alloy-editor/assets/alloy-editor-moono-min.css" rel="stylesheet">

Check out this guide to know more about how to create your own skin.

comments powered by Disqus