Sloth

Fresh take on static site generation, using HTML-first approach to build
websites.

Imagine Custom Elements, but works without JS and SSR friendly.

Get Started Take a quick look
  • HTML that You Know and Love

    ❤️ HTML that You Know and Love

    Sloth leverages native HTML elements like template and slot to build reusable components. Use HTML import to extract template and reuse across different pages. No more copy-pasting HTML.

  • Bypass Platform Limitation

    🚥 Bypass Platform Limitation

    Write Custom Elements in dev, serve native HTML elements in production. No need to pre-render, add polyfill, or wait for browser support. Everything is crawlable cURL-able.

  • Powered by Vite

    ⚡️ Powered by Vite

    Sloth is implemented as a Vite plugin. This means you get all the benefits like Lightning Fast HMR and Optimized Build. The setup is just a single line of config!

  • Global and Scoped Style

    🌏 Global and Scoped Style

    Using CSS pre-processor? CSS Framework? Use global style, even if you're writing Custom Elements. Prefer scoped styles? Don't worry, we got this. Need both? Why not? Mix them up!

  • Custom Elements API

    ⚙️ Custom Elements API

    Need to add a sprinkle of JS? Use connectedCallback API to add logic when the component is rendered. This works even in production, without Shadow DOM.

  • Blazing Fast Load Time

    🔥 Blazing Fast Load Time

    Unlike its sinful meaning, pages built using Sloth loads fast. HTML-first means the output is just–you guessed it–HTML. Ship 0 JS by default.

1 minute Intro

Write a template

Use template element to define a template, and pass an id to name your Custom Elements. You need to follow Custom Elements naming convention by using kebab-case.

You can (optionally) create a slot as a children placeholder. Slot have a unique name that can be referenced later. 

<template id="hello-world">
  <h1>Hello, <slot name="name"></slot>!</h1>
</template>

Reuse using Custom Elements

Use Custom Elements to reuse and render your components anywhere by matching it with previously defined id. Fill a slot by using any HTML element by referencing the name 
<hello-world>
  <span slot="name">World</span>
</hello-world>

Serve native HTML elements

In build time the custom element will be compiled to native HTML elements, with scoped styles and element extensions if any. 
<div data-template="hello-world">
  <h1>Hello, <span>World</span>!</h1>
</div>

Have Questions?

Check out these FAQs below:

How does it work?

Built on top of Vite, Sloth borrows the similar philosophy: use native API in dev, bundle in prod.

In dev, Sloth will automatically define Custom Elements by its template id. If there's a style declaration, it will create a scoped style using Constructable Stylesheet, as well as forward any global styles from root page.

Sloth also leverages Vite Instant HMR to replace only templates that changes if you're using external templates via HTML import.

In build time, Sloth will replace all Custom Elements declaration with a wrapper element. This wrapper element will be used to simulate scoped style in production build, as we no longer have Shadow DOM.

Do I need to learn Custom Elements before using it?

While Sloth uses native web platform features such as Custom Elements, the similarities are mostly in syntax and usage. It's true that knowing Custom Elements beforehand allows you to write more complex template faster, but this docs alone should hopefully be enough resource to get started.

HTML import is deprecated, will this work on browser C?

Yes, because Sloth doesn't rely on HTML import. Sloth only borrows its syntax to define template dependencies. In dev, Sloth fetch the templates and construct dependencies graph manually in a Directed Acyclic Graph. This graph will be used in HMR scenario where it only "re-renders" templates that's changed instead of the entire page.

In build time, all HTML imports are removed and templates are rendered inline. Think of it as bundling HTML, similar to how Vite bundles JS in prod and serves each dependencies manually in dev. If you have inline template declarations, those will be removed too.

Tell me something it can't do

Although it has a concept of variable/props, you can only pass a string. This inherent limitation is due to the fact that Sloth is built on top of HTML template.

There's no loop and conditionals, you can't arbitrarily set HTML attributes or use ternary to produce different result. Those template "features" are intentionally not supported because we don't want to invent non-standard syntax like #{each} and {% if cond %}, or evaluate JavaScript expression inside template.

We want to rely purely on native HTML/Web features. This means Custom Elements, template, slot, and data attribute. If you think this is a deal-breaker, you're free to use other alternatives.

Does it support [insert CSS framework here]?

If Vite supports it, there's no reason why Sloth doesn't. Just FYI, this docs is built using Tailwind and a small amount of scoped styles as well as global styles.

Can I use this with multiple HTML pages?

Yes, using Vite multi page app. Same as this docs.

Can I use prebuilt Custom Elements?

Yes if you use main entry point (JS that's referenced directly from an index.html). If you import the dependencies in an external template, it won't be transpiled but you probably can use something like Skypack.

Note that using real prebuilt Custom Elements means your content might not be visible with JS disabled.

Need more information?

Head to the Docs