Abell Documentation

Get Started with Starters

Blog Starter

by Abell Team

Preview GitHub

Use this Starter

Deploy with Netlify Generate on GitHub

Create new project locally with:

npx create-abell-app my-app --template abelljs/abell-starter-minima

Portfolio Starter

by Abell Team

Preview GitHub

Use this Starter

Deploy with Netlify Generate on GitHub

Create new project locally with:

npx create-abell-app my-app --template abelljs/abell-starter-portfolio

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>

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

index.html

Control Over Bundling!

Have 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!

<AbellComponent>
  <template>
    <footer>© Abell <span class="year"></span></footer>
  </template>

  <!-- 
    'inlined' attribute adds CSS to <head> tag of the parent page during build. 
    Without it, styles are bundled into a new file and link is added to parent page.
   -->
  <style inlined>
    footer {
      background-color: #111;
      color: #fff;
      padding: 10px 20px;
    }
  </style>

  <!-- 
    'bundle' attribute adds the content to a separate bundle of given name 
    ('footer.js' in this case) 

    scopedSelector ensures the selected element is from same component. 
    It is replacement to document.querySelector
  -->
  <script bundle="footer.js">     
    scopedSelector('.year').innerHTML = new Date().getFullYear();
  </script>
</AbellComponent>

{{
  const TestFooter = require('./components/TestFooter.abell');
}}

<html>
<body>
  <footer>
    This footer will be unaffected by the styles in Footer component since they are scoped.
    <span class="year">This span will be ignored as well</span>
  </footer>

  <TestFooter />
</body>
</html>

Output

<html>
<head>
  <style>
  /* Styles are inlined because of 'inlined' attribute in component */

  footer[data-abell-hCdFua] {
    background-color:#111;
    color:#fff;
    padding:10px 20px;
  }
  </style>
</head>
<body>
  <footer>
    This footer will be unaffected by the styles in Footer component since they are scoped
    <span class="year">This span will be ignored as well</span>
  </footer>
  <footer data-abell-hCdFua>© Abell <span class="year" data-abell-hCdFua></span></footer>

  <!-- JS from component, goes into this file -->
  <script src="./bundled-js/footer.js"></script>
</body>
</html>

// this line is injected by Abell
const scopedSelector = (queryString) => document.querySelector(queryString + '[data-abell-hCdFua]');const scopedSelectorAll = (queryString) => document.querySelectorAll(queryString + '[data-abell-hCdFua]'); 

// Your JavaScript
scopedSelector('.year').innerHTML = new Date().getFullYear();

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 in a JSON file and render the list in Abell 🥳

{{ const siteData = require('./site.json'); }}
<html>
  <head>
    <title>{{ siteData.title }}</title>
  </head>
  <body>
    {{
      siteData.projects
        .map(project => 
          `<div>${project.name}</div>`
        )
    }}
  </body>
</html>

{
  "title": "This is my Title",
  "projects": [
    {
      "name": "My cool project",
      "description": "Look at this cool project"
    },
    {
      "name": "Another project",
      "description": "This is another project"
    }
  ]
}

Output

./dist/projects.html

<html>
  <head>
    <title>This is my Title</title>
  </head>
  <body>
    <div>My cool project</div>
    <div>Another project</div>
  </body>
</html>

Make Use of Node.js Ecosystem

Though there is a way to create Abell Plugins, in most of the cases you can completely remove that abstraction and make use of Node.js directly from your Abell file.

{{
  // Native Node.js Modules
  const fs = require('fs');
  const path = require('path');

  // NPM Library 🤯 https://npmjs.org/package/remarkable
  const { Remarkable } = require('remarkable');
  const md = new Remarkable();
}}

<html>
<body>
  {{
    const markdownPath = path.join(__dirname, 'introduction.md');

    // Read Markdown Content and render it to HTML with Remarkable
    md.render(fs.readFileSync(markdownPath, 'utf-8'))
  }}
</body>
</html>

# Hello from Markdown

![Abell Logo](https://abelljs.org/favicon.ico)

This text is coming from 
[Markdown File](https://en.wikipedia.org/wiki/Markdown) 
in `theme/introduction.md`

Don't know how to implement something in Abell? 
Search for how to implement it in Node.js and 
most of the things will just work out of the box

Output

./dist/index.html

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

Get Started with Starters

Blog Starter

Use this Starter

Portfolio Starter

Use this Starter

Sponsors

Gold Sponsors

Backers

Why Abell?

New Template Engine to Flatten the Learning Curve and Faster Builds 💅

Output What is Needed

Control Over Bundling!

Build JSON Based Websites { }

Make Use of Node.js Ecosystem

And a lot more!!

GitHub Contributors