<Hx>uberschrift 🧢</Hx>

Zero-dependency magic heading levels for React and Vue.js

---

uberschrift
vueberschrift
Issues
CI status

---

📖 Full Documentation

🛠️ Usage

⚛️ React

npm install uberschrift

page.tsx:

import { Hx, HxBoundary } from "uberschrift";

<Hx>Outside of the top level: this will be an h1</Hx>

<HxBoundary>
  <Hx>Within the top level: this will be an h2</Hx>

  <HxBoundary>
    <Hx>Within the 2nd level: this will be an h3</Hx>

    <HxBoundary>
      <Hx>Within the 3rd level: this will be an h4</Hx>
    </HxBoundary>

    <Hx>Again within the 2nd level: this will be an h3</Hx>
  </HxBoundary>
</HxBoundary>

renders as:

<h1>Outside of the top level: this will be an h1</h1>
<h2>Within the top level: this will be an h2</h2>
<h3>Within the 2nd level: this will be an h3</h3>
<h4>Within the 3rd level: this will be an h4</h4>
<h3>Again within the 2nd level: this will be an h3</h3>

🌲 Vue.js

npm install vueberschrift

App.vue:

<script setup lang="ts">
  import { Hx, HxBoundary } from "vueberschrift";
</script>

<template>
  <Hx>Outside of the top level: this will be an h1</Hx>
  <HxBoundary>
    <Hx>Within the top level: this will be an h2</Hx>
    <HxBoundary>
      <Hx>Within the 2nd level: this will be an h3</Hx>
    </HxBoundary>
  </HxBoundary>
</template>

---

Sponsors

---

👩‍💻 Development

npm install
npx turbo dev
npx turbo test
npx turbo build