Understanding Composr

Composr is designed to be run procedurally, which means you need to go step by step in order for Composr to understand how to build your web page. The first thing that should always go in your main .js file is the page declaration, for example:

composr.page("my-id");

In the example above, my-id should be the HTML id attribute of the div that you want your Composr site to be rendered in. This script is required for any other Composr functions to be run, because otherwise, it doesn’t know where to place elements.

After declaring the page using composr.page, you can add elements:

composr.buildElement(header, "Hello world!");

Here, we created a header element that says ”Hello world!”. You might expect this header to show up instantly, but similar to React.js, Composr doesn’t affect the DOM until you call another function:

composr.renderPage(true);

In the future, this script will not use any parameters, but since Composr is still in beta, there must be a true boolean arguement. When you add elements In Composr, you add them one at a time in order of how they will be rendered on the page from top to bottom, like so:

composr.buildElement(header, "I’m big");
composr.buildElement(subheader, "I’m somewhat smaller");
composr.buildElement(para, "I’m paragraph text");