Abell Documentation

    npx create-abell-app my-cool-blog
cd my-cool-blog
npm run dev

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 (.html)

index.html

<html>
  <body>
    I can render JavaScript! Look: Hello, WORLD 🌻
  </body>
</html>

View on CodeSandbox

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!

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;
    }

    /* Other critical CSS */
  </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 🐨🎉

GitHub Contributors

Check out GitHub @abelljs for list of repositories, every repo has a README for contribution guide

Sponsors 🤗

Gold Sponsors