---
title: "Unhead: Head Management for Vue, React, Svelte & More"
description: "Framework-agnostic library for managing HTML head tags. Titles, meta tags, scripts, and structured data with SSR support for Vue, React, Svelte, Solid, Angular."
canonical_url: "https://unhead.unjs.io/docs/head/guides/get-started/overview"
last_updated: "2026-07-20T12:13:27.313Z"
---

**What is Unhead?** A framework-agnostic library for managing titles, meta tags, scripts, and other HTML `<head>` elements. It works with Vue, React, Svelte, Solid, Angular, and vanilla TypeScript.

Use Unhead to update document metadata from application code during server or client rendering.

## Get started

Choose your framework below. The examples on this site will update to use its Unhead integration.

<framework-selector-minimal className="mb-7">



</framework-selector-minimal>

<div className="grid,grid-cols-2,gap-5">
<u-page-card :spotlight="true" description="See how Unhead manages tags during server and client rendering" icon="i-heroicons-information-circle" spotlight-color="primary" title="Intro to Unhead" to="/docs/head/guides/get-started/intro-to-unhead">



</u-page-card>

<u-page-card :spotlight="true" description="Examples for common head-management scenarios" icon="i-heroicons-bookmark" spotlight-color="primary" title="Starter Recipes" to="/docs/head/guides/get-started/starter-recipes">



</u-page-card>
</div>

## Core concepts

These guides cover the behavior you will use most often.

<div className="grid,grid-cols-2,gap-5">
<u-page-card :spotlight="true" description="Set page titles and shared title templates" icon="i-heroicons-document-text" spotlight-color="info" title="Titles & Title Templates" to="/docs/head/guides/core-concepts/titles">



</u-page-card>

<u-page-card :spotlight="true" description="Control where and how tags are rendered in your document" icon="i-heroicons-arrows-pointing-out" spotlight-color="info" title="Tag Sorting & Placement" to="/docs/head/guides/core-concepts/positions">



</u-page-card>

<u-page-card :spotlight="true" description="Manage attributes on the HTML and body elements" icon="i-heroicons-tag" spotlight-color="info" title="Class & Style Attributes" to="/docs/head/guides/core-concepts/class-attr">



</u-page-card>

<u-page-card :spotlight="true" description="Add and manage inline content in your head elements" icon="i-heroicons-code-bracket" spotlight-color="info" title="Inline Style & Scripts" to="/docs/head/guides/core-concepts/inner-content">



</u-page-card>

<u-page-card :spotlight="true" description="Understand how Unhead prevents and resolves duplicate tags" icon="i-heroicons-document-duplicate" spotlight-color="info" title="Tag Deduplication" to="/docs/head/guides/core-concepts/handling-duplicates">



</u-page-card>

<u-page-card :spotlight="true" description="Attach load, error, and body event handlers" icon="i-heroicons-cursor-arrow-ripple" spotlight-color="info" title="DOM Event Handling" to="/docs/head/guides/core-concepts/dom-event-handling">



</u-page-card>

<u-page-card :spotlight="true" description="Control script triggers, lifecycle, APIs, and resource hints" icon="i-heroicons-code-bracket-square" spotlight-color="info" title="Script Loading" to="/docs/head/guides/core-concepts/loading-scripts">



</u-page-card>
</div>

## Extend Unhead

Add custom runtime behavior with plugins, or transform head calls during your build.

<div className="grid,grid-cols-2,gap-5">
<u-page-card :spotlight="true" description="Create custom plugins and extend core functionality" icon="i-heroicons-cog-8-tooth" spotlight-color="warning" title="Plugins API" to="/docs/head/api/plugins">



</u-page-card>

<u-page-card :spotlight="true" description="Run Unhead transforms through Vite or webpack" icon="i-heroicons-puzzle-piece" spotlight-color="warning" title="Build Plugins" to="/docs/head/guides/build-plugins/overview">



</u-page-card>
</div>

## Built-in plugins

Unhead ships plugins for these common cases.

<div className="grid,grid-cols-2,gap-5">
<u-page-card :spotlight="true" description="Use dynamic template parameters in your head tags" icon="i-heroicons-variable" spotlight-color="success" title="Template Params" to="/docs/head/guides/plugins/template-params">



</u-page-card>

<u-page-card :spotlight="true" description="Order tags relative to named tags" icon="i-heroicons-bars-arrow-down" spotlight-color="success" title="Alias Sorting" to="/docs/head/guides/plugins/alias-sorting">



</u-page-card>

<u-page-card :spotlight="true" description="Normalize canonical URLs against a configured host" icon="i-heroicons-link" spotlight-color="success" title="Canonical Plugin" to="/docs/head/guides/plugins/canonical">



</u-page-card>

<u-page-card :spotlight="true" description="Derive Open Graph and Twitter tags from existing metadata" icon="i-heroicons-chart-bar" spotlight-color="success" title="Infer SEO Meta" to="/docs/head/guides/plugins/infer-seo-meta-tags">



</u-page-card>

<u-page-card :spotlight="true" description="Minify inline scripts and styles during server rendering" icon="i-heroicons-arrows-pointing-in" spotlight-color="success" title="Minify" to="/docs/head/guides/plugins/minify">



</u-page-card>

<u-page-card :spotlight="true" description="Report invalid or risky resolved head tags during development" icon="i-heroicons-check-badge" spotlight-color="success" title="Validate" to="/docs/head/guides/plugins/validate">



</u-page-card>
</div>
