Overview

API2HTML is a dynamic web server that allows you to create sites by transforming API output into nice HTML. API2HTML retrieves the API responses for you and injects them into the views in a predictable way, allowing you to focus only on how to iterate it and surround it with HTML.

How API2HTML works?

To create a new site define in a configuration .json file all the pages you want to serve (URL patterns) along with its associated view (template) and external API call where the data is (backend). In a nutshell, you create a json file similar to this:

"pages":[
    {
	"URLPattern": "/posts/:post_id",
	"BackendURLPattern": "https://jsonplaceholder.typicode.com/posts/:post_id",
	"Template": "post",
	...

API2HTML will take it from here and will serve pages like /posts/23, calling the defined backend API and injecting the data in the post template. Your only work is to write a nice post template and associate it a little bit of styling.

API2HTML does server-side rendering meaning that is perfect to have an SEO site and maintaining only an API.

As you can see API2HTML is a simplification of the MVC model: You have the controller parametrized in the configuration file and the model is deducted from the API response and enriched with any fields you add in the extra configuration section.

This overview is a simplification of what API2HTML can do for you as the server can provide you with base layouts, multi-site generation, caching and other exciting features that make it very powerful.

What do I need to code/learn?

If you are familiar with HTML, you are almost ready to go!

API2HTML requires you to write the templates using the logic-less mustache templating system. If you are unfamiliar with mustache, don’t worry, there’s nothing much to learn and is not like learning any of the template engines you might be used to. For now, know that {{ Data }} is the object containing the whole API response in the current path, and that you can access its fields directly using a dot . separator. Example:

<h1>Products for sale in {{ Data.category }}</h1>
<table>
	<tr>
        <td>Product</td>
        <td>Price</td>
	<tr>
{{#Data.products}}
	<tr>
        <td><a href="/product/{{name}}">{{title}}</a></td>
        <td>{{price.amount}} {{price.currency}}</td>
	</tr>
{{/Data.products}}

{{^Data.products}}
	<tr><td colspan="2">Sorry, there are no products in this category :(</td></tr>
{{/Data.products}}
</table>

Notice in this example that…

• It displays the category name by accessing the content in the API through {{ Data.category }}
• Loops over all products thanks to {{#Data.products}}. Notice the # indicating the loop.
  • Inside the loop there are attributes like name, title, amount or currency that are inside the products context and can be referred directly.
• It also adds a message when the API did not return results, notice the negation ^ in {{^Data.products}}

Your templates are going to be larger than this, but pretty much you’ve seen what you can do with Mustache.

Continue reading on writing API2HTML templates or Mustache syntax

---

Continue to Installation →