Skins

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 these 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.

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

Skins Overview

You can use these skins out of the box:

  <link href="alloy-editor/assets/alloy-editor-atlas-min.css" rel="stylesheet">

  <link href="alloy-editor/assets/alloy-editor-moono-min.css" rel="stylesheet">