complate

component-based templating

declarative • composable • portable

complate is a JSX-based HTML templating library. Components serve as declarative markup abstractions that are reusable across multiple languages and frameworks.

<Card title="Hello World">
    <p>lorem ipsum dolor sit amet</p>
</Card>
<article class="card">
    <h3 class="card-title">Hello World</h3>

    <div class="card-body">
        <p>lorem ipsum dolor sit amet</p>
    </div>
</article>

This Card component is implemented as a JavaScript function.

Stateless HTML Rendering

complate focuses on efficiently generating HTML, with support for progressive rendering. This makes complate a templating language ideal for server-side rendering, though client-side templating (including universal rendering) is not uncommon.

This classical approach to templating means generating HTML is a one-time “fire-and-forget” operation; there is no component life cycle as far as complate is concerned.

Components

Componentization is at the heart of the benefits of abstraction and composition. complate’s markup abstractions – called macros – encapsulate a component’s internal HTML structures and highlight its dynamic constituents via explicit input parameters. This avoids error-prone copy-and-paste workflows and allows authors to focus on content by composing high-level structures, making view code more concise, declarative, and expressive.

function Card({ title }, ...children) {
    return <article class="card">
        <h3 class="card-title">{title}</h3>
        <div class="card-body">
            {children}
        </div>
    </article>;
}

JSX and JavaScript

JSX is an extension of JavaScript, pioneered by React. Thus we can rely on JavaScript’s extensive ecosystem for modularization, tooling, sharing code, etc. complate users benefit from the tools available in this established ecosystem.

JavaScript also enables complate’s portability: A JavaScript runtime can be embedded in almost any modern environment (e.g. V8, Nashorn, GraalVM), so macros can be reused across platforms, independent of technology choice.

Note that this also means authors need basic familiarity with JavaScript and a compilation step is required to turn JSX macros into executable JavaScript. See Getting Started for integration with server-side frameworks.

Getting Started

We currently have support for complate for developing components in a styleguide and for porting components accross several different platforms. View this guide to see all of the different options that we have available.

Frequently Asked Questions

Please view our FAQ to see the questions that we are most frequently asked. The FAQ also contains a glossary of complate terminology.