Semantic HTML made easy

Build interfaces with semantic HTML, CSS tokens, and light DOM web components.

Accessible Composable Framework-neutral

The four layers

Skirbi separates concerns into four focused layers. Each layer does one thing well, from component plumbing to composition.

Sugar Web Component primitives. Semtic Semantic HTML components. Pinta Tokens and component recipes. Dibuho Composition patterns.

Clean authoring. Real HTML output.

Write compact semantic components. Skirbi leaves real, standards-based HTML in the document.

Author HTML

<semtic-article title="Hello world">
  <p>Clean authoring. Real HTML output.</p>
</semtic-article>

Rendered HTML HTML

<semtic-article>
  <article>
    <semtic-header>
      <header><h1>Hello world</h1></header>
    </semtic-header>
    <section>
      <p>Clean authoring. Real HTML output.</p>
    </section>
  </article>
</semtic-article>

What do you want to do?

Jump into the docs, explore components, or see how it all fits together.

Learn the basics A gentle introduction to Skirbi and its philosophy. Browse components Explore live components rendered in the browser. Build a real project Choose the parts of the system that fit your work. Integrate anywhere Use Skirbi with your toolchain and stack.

No Shadow DOM. No class soup. Everything inspectable.

Semantic HTML. CSS-owned styling. Framework-neutral components.