complate

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

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.

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 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.

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.

Please view our FAQ for more details and a glossary of complate terminology. There you’ll also find guidance on whether complate is suitable for your purposes.