Advanced content
building
Demo
Features
Dynamic array of commands
Customize the features you want to include and also add your own commands.
Flexible content design
Take full control over your content’s layout beyond traditional post building.
Resource uploading made easy
Handle uploaded media with simple and direct events using Align’s friendly event bus.
Bring your own
icons
Customize align icons in seconds by simply modifying some SVG paths.
Unlimited
possibilities
Align comes with several commands out of the box. Define those you want to include and also introduce your personalized commands in a component-like approach.
Interactive
backgrounds
Choose to set a parallax effect or add a video to your backgrounds to make your content more engaging.
Integrated
Colorpicker
Enjoy a colorful experience using a built-in colorpicker made for Vue that comes with Align out of the box.
Syntax
Highlighting
Align uses Highlight.js under the hood to highlight any code snippets you might include, to serve your tech needs.
Write faster
with hotkeys
Kick up the productivity gear with different hotkeys for most of Align’s commands for both Windows and macOS.
Installation
and Usage
npm install @baianat/align
// or use yarn
yarn add @baianat/align
// Usage
// Include necessary files
<head>
<link rel="stylesheet" href="dist/css/align.css">
<!-- use editor's theme -->
<!-- or create your own -->
<link rel="stylesheet" href="dist/css/default-theme.css">
<!-- @baianat/colorpicker stylesheet -->
<link rel="stylesheet" href="path-to-colorpicker/css/colorpicker.css">
</head>
<body>
...
<!-- @baianat/colorpicker script file -->
<script type="text/javascript" src="path-to-colorpicker/js/colorpicker.j"></script>
<script type="text/javascript" src="dist/js/align.js"></script>
</body>
// HTML Layout
<div class="align"></div>
<script>
new Align('.align', {
// settings
});
</script>