npx create-abell-app my-cool-blog
cd my-cool-blog
npm run dev
Sponsors 🤗
Gold Sponsors
You can become our sponsor through,


Or if you prefer any other mode of payment, you can contact at saurabhdaware99@gmail.com
Why Abell?
- New Template Engine
- Output Only What is Needed
- Control Over Bundling
- Build JSON Based Websites
- Build Markdown Based Websites
New template engine to flatten the learning curve and faster builds 💅
Abell files are HTML files which allow you to write JS inside curly brackets so you can use JavaScript to loop over data, require static data, and use conditions in the HTML. Styling, client-side scripting and almost everything else stays same as you would do in vanilla HTML.
Input (.abell)
index.abell
{{
const a = 'Hello';
const b = ', World 🌻';
}}
<html>
<body>
I can render JavaScript!
Look: {{ a + b.toUpperCase() }}
</body>
</html>
Output What is Needed
Abell builds a static website for you on abell build
so if your website does not need any client-side JavaScript, Abell will not add any JavaScript in your project!
For example, if we don't have any CSS and script in the code, this is what the output will look like:
Input
- index.abell
- Nav.abell
- Footer.abell
- Meta.abell
Output

Control over bundling!
Have a critical CSS/JS that needs to load as soon as user visits the page? With Abell you can inline a CSS or JavaScript from component!
Nav.abell
<AbellComponent>
<template>
<nav>I am an important navigation bar!</nav>
</template>
<!-- 'inlined' attribute adds CSS to <head> tag of the parent page during build -->
<style inlined>
nav {
background-color: #111;
color: #fff;
padding: 10px 20px;
}
/*
styles are scoped by default.
You can use 'global' attribute on style tag to make it global.
*/
</style>
<!--
'bundle' attribute adds the content to a new bundle of given name
('nav.js' in this case)
-->
<script bundle="nav.js"> /* not so important JavaScript */ </script>
</AbellComponent>
Build JSON based websites { }
If you have a portfolio and you're bored of writing code to add new project, you can have all the info of your projects
./site.json
{
"title": "This is my Title",
"projects": [
{
"name": "My cool project",
"description": "Look at this cool project"
},
{
"name": "Another project",
"description": "This is another project"
}
]
}
./projects.abell
{{ const siteData = require('./site.json'); }}
<html>
<head>
<title>{{ siteData.title }}</title>
</head>
<body>
{{
siteData.projects
.map(project =>
`<div>${project.name}</div>`
)
}}
</body>
</html>
Output
./projects.html
<html>
<head>
<title>This is my Title</title>
</head>
<body>
<div>My cool project</div>
<div>Another project</div>
</body>
</html>
Build Markdown based websites 📖
With abell, you can import markdown content using Abell.importContent('path/to/mardown.md')
. Even this text that you're reading right now is coming from https://github.com/abelljs/abell-website/blob/main/content/index.md
./content/index.md
# Abell's Intro Blog!
I loveeee writing markdown!
Star [Abell on GitHub](https://github.com/abelljs/abell)
./theme/index.abell
<body>
<section class="blog-contaier">
{{ Abell.importContent('./index.md') }}
</section>
</body>
Note: As you can see in the example, the path in Abell.importContent is relative to ./content
directory
Output
./dist/index.html
<body>
<section class="blog-contaier">
<h1 id="abell-s-intro-blog-">Abell's Intro Blog!</h1>
<p>I loveeee writing markdown!</p>
<p>Star <a href="https://github.com/abelljs/abell">Abell on GitHub</a></p>
</section>
</body>
And a lot more!!
Get started with Abell for complete documentation 🐨🎉