GitHub
npx create-abell-app my-cool-blog
cd my-cool-blog
npm run dev
Why Abell?
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)
{{
const a = 'Hello';
const b = ', World 🌻';
}}
<html>
<body>
I can render JavaScript! Look: {{ a + b.toUpperCase() }}
</body>
</html>
Output (.html)
<html>
<body>
I can render JavaScript! Look: Hello, WORLD 🌻
</body>
</html>
Rendered Output
Check out /docs/abell-syntax-guide for more examples.
Live dev-server to speed up your development 🏃
The dev-server is written from complete scratch to help you develop sites faster.
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>`)
.join('')
}}
</body>
</html>
Output
<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 $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)
./index.html
<body>
<section class="blog-contaier">
{{ $importContent('./index.md') }}
</section>
</body>
Note: As you can see in the example, the path in $importContent is relative to content/ directory
Output
<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 🐨🎉
GitHub Contributors
Sponsor us 🤗
