Anix Syntax Reference
Anix provides a clean, concise syntax for creating HTML templates. This guide covers the basic syntax elements and how to use them.
Basic Syntax
p.mb-3 "Anix uses a clean, indentation-based syntax that makes HTML templates more readable and maintainable. Here's how it works:"Anix Code
page ["My Page", "/my-page"] {
div.container {
h1 "Hello World"
p "This is a paragraph"
}
}
Rendered HTML
<div data-page="My Page" data-url="/my-page"> <div class="container"> <h1>Hello World</h1> <p>This is a paragraph</p> </div></div>
Page Declaration
Every Anix file typically starts with a page declaration that defines the page title and URL:
page ["Page Title", "/page-url"] {
//Page content goes here
}
This creates a div with data attributes for the page title and URL, which can be used for routing and navigation.
Classes and IDs
Anix provides a concise way to add classes and IDs to elements:
Classes
div.container.mt-4 p.text-center.lead
Rendered HTML
<div class="container mt-4"></div> <p class="text-center lead"></p>
IDs
It should be always placed before the class name.
div#main button#submit-btn.btn.btn-primary
Rendered HTML
<div id="main"></div> <button id="submit-btn" class="btn btn-primary"></button>
Nesting Elements
Anix uses curly braces and indentation to nest elements:
Nested Elements
div.container {
header {
h1 "My Website"
nav {
a "Home" -> "#"
a "About" -> "#"
}
}
}
Rendered HTML
<div class="container">
<header>
<h1>My Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>
</div>
The closing curly brace } indicates the end of a nested block.
Attributes
Anix provides multiple ways to specify attributes:
Parenthesis Syntax
input(type='text', name='username', placeholder='Enter username') img(src='./image.jpg', alt='Description', w='300', h='auto')
Rendered HTML
<input type="text" name="username" placeholder="Enter username"> <img src="./image.jpg" alt="Description" width="300" height="auto">
Shorthand for Links
a.btn.btn-primary 'Click Me' -> 'https://example.com'
Rendered HTML
<a class="btn btn-primary" href="https://example.com">Click Me</a>
JavaScript Integration
Anix provides several ways to include JavaScript in your templates:
Inline Script
script {
console.log('Page loaded');
}
External Script
script(src='./assets/js/main.js')
JS Commands
js:click('#myButton') {
alert('Button clicked!');
}
See the JavaScript Commands section for more details on built-in JS commands.
Advanced JS Imports (`importjs`)
For more advanced cases, `importjs` can import a specific function from a JS file, pass arguments to it, and render the returned HTML. This happens at build time, making it great for generating components from JS logic.
1. JavaScript File Example
function createAlert(type, message) {
const BORDER_COLORS = {
info: 'deepskyblue',
success: 'mediumspringgreen',
danger: 'tomato'
};
const color = BORDER_COLORS[type] || 'grey';
const style = `border-left: 4px solid ${color}; padding: 1rem; background: #2c2c2c;`;
return `<div style='${style}'>${message}</div>`;
module.exports = { createAlert };
}
2. Anix Usage
"// Note the syntax: 'path/to/file.js': functionName(args)
importjs 'ui.js': createAlert('info', 'This is an informational alert.')
importjs 'ui.js': createAlert('danger', 'This is a danger alert!')"
3. Rendered HTML
"<div style='border-left: 4px solid deepskyblue; padding: 1rem; background: #2c2c2c;'>This is an informational alert.</div> <div style='border-left: 4px solid tomato; padding: 1rem; background: #2c2c2c;'>This is a danger alert!</div>"
Includes & Components
Anix allows you to reuse code by including other files or defining components. This helps keep your code DRY and modular.
Includes
The `include` statement inserts the content of another Anix file directly into the current file. It must end with a semicolon.
Anix Code
"// In your page file:
include './includes/_Header.anix';
div.main-content {
p 'Page-specific content...'
}
include './includes/_Footer.anix';"
Components
Components are powerful, reusable pieces of UI with their own parameters (props).
1. Defining a Component
Define components in their own file (e.g., `views/components/button.anix`) using the `component` keyword. Use `{{propName}}` for placeholders.
"// In /components/button.anix
component primary-button(text, href) {
a.btn.btn-primary(href='{{href}}') '{{text}}'
}"
2. Using a Component
First, `import` the component file. Then, use it like a self-closing HTML tag, passing props as attributes.
"// In your page file (e.g., index.anix)
import 'components/button.anix';
div.actions {
<primary-button text='Get Started' href='/docs' />
<primary-button text='Contact Us' href='/contact' />
}"
Rendered HTML
"<div class="actions"> <a class="btn btn-primary" href="/docs">Get Started</a> <a class="btn btn-primary" href="/contact">Contact Us</a> </div>"
Template Directives (Future)
Template directives like loops and conditionals are a planned feature to make templates more dynamic.
"// Example of a possible future syntax
if (user.isLoggedIn) {
p 'Welcome, {{user.name}}!'
}"
"// Example of a possible future syntax
for (item in items) {
li '{{item}}'
}"
Routing
Anix supports simple routing by associating pages with URLs. Use the page declaration at the top of your file to define the route:
page ['About', '/about'] {
h1 'About Us'
p 'This is the about page.'
}
Each page gets a unique URL, making navigation and linking straightforward.
Scroll Animations
p.mb-3 "Anix supports Scroll animations by using 'scroll-animate' class and data-animate attribute. We provide Some scroll animations out of the box while installation. Follow the example on how to use scroll animation in Anix."script(src='./assets/js/scroll-animate.js') // Import scroll-animate on your page
h1.scroll-animate(data-animate='jello') 'Your Text' // For single line elements
div.scroll-animate(data-animate='fade-in-up'){
// Your other elements here
}
Comments
Anix supports several comment styles:
// This is a single-line comment # This is also a comment div.container { // Inline comment h1 'Title' # Another inline comment }Comments are not included in the rendered HTML output.