`{lang="html"} or loading in a JavaScript framework using `<script>`{lang="html"} tags. While setting tags in a HTML document is dead simple, JavaScript frameworks have moved us well away from the days of pure HTML into a world of fully dynamic client-side pages and server-side rendering. Modern JavaScript applications need to render code outside the app entry (typically `<div id="app"></div>`{lang="html"}) in both a server-rendered and client-rendered environment. The role of the "head manager" is then to manage the tags in the `<head>`{lang="html"} and all tags outside the app entry. ```html <!DOCTYPE html> <html>  <head>  </head> <body>   <div id="app"></div>   </body> </html> ``` ## Introducing Unhead Unhead was built as a universal head manager for JavaScript applications. Initially allowing frameworks such as Vue and Nuxt, to offload the complex work of managing the head to a standalone library. While many frameworks themselves implement solutions for managing the above tags, it can be difficult to maintain for the diverse ways tags can be inserted into the document. As Unhead is a dedicated library it can innovate on the head management developer experience, providing an ecosystem of plugins and integrations that can be used across all frameworks. ## Innovating on Head Management - **Lazy DOM Patching** - A tiny DOM diffing engine that only updates what changed, avoiding full page re-renders - **Fully Typed API** - TypeScript-first with inline MDN documentation for every tag and attribute - **Flat SEO Meta** - Manage 100+ meta tags without nested objects using [`useSeoMeta()`](/docs/head/api/composables/use-seo-meta){lang="ts"} - **Schema.org Support** - Generate structured data with full TypeScript support via [`useSchemaOrg()`](/docs/schema-org/api/composables/use-schema-org){lang="ts"} - **Script API** - Load third-party scripts with proxied APIs, triggers, and performance controls using [`useScript()`](/docs/head/api/composables/use-script){lang="ts"} - **SSR + CSR** - First-class support for server-side rendering with seamless client hydration - **Framework Agnostic** - Works with Vue, React, Svelte, Solid, Angular, or vanilla TypeScript ## Next Steps Now that you understand what Unhead does, get started with your framework: - [Vue Installation](/docs/vue/head/guides/get-started/installation) - [React Installation](/docs/react/head/guides/get-started/installation) - [Svelte Installation](/docs/svelte/head/guides/get-started/installation) - [Solid Installation](/docs/solid-js/head/guides/get-started/installation) - [Angular Installation](/docs/angular/head/guides/get-started/installation) - [TypeScript (Vanilla)](/docs/typescript/head/guides/get-started/installation) Or explore the core concepts: - [Page Titles](/docs/head/guides/core-concepts/titles) - Master title management - [Tag Positions](/docs/head/guides/core-concepts/positions) - Control tag ordering - [Loading Scripts](/docs/head/guides/core-concepts/loading-scripts)

--- title: "Unhead: Full Stack Head Manager" description: Manage document head in SSR and CSR environments. Lazy DOM patching, TypeScript API, flat SEO meta, Schema.org support, and script loading. navigation: title: Introduction to Unhead --- ## What is head manager? Adding tags in your ``{lang="html"} is one of the fundamental tasks in web development. Whether it be setting a page title using ``{lang="html"} or loading in a JavaScript framework using `<script>`{lang="html"} tags. While setting tags in a HTML document is dead simple, JavaScript frameworks have moved us well away from the days of pure HTML into a world of fully dynamic client-side pages and server-side rendering. Modern JavaScript applications need to render code outside the app entry (typically `<div id="app"></div>`{lang="html"}) in both a server-rendered and client-rendered environment. The role of the "head manager" is then to manage the tags in the `<head>`{lang="html"} and all tags outside the app entry. ```html <!DOCTYPE html> <html>  <head>  </head> <body>   <div id="app"></div>   </body> </html> ``` ## Introducing Unhead Unhead was built as a universal head manager for JavaScript applications. Initially allowing frameworks such as Vue and Nuxt, to offload the complex work of managing the head to a standalone library. While many frameworks themselves implement solutions for managing the above tags, it can be difficult to maintain for the diverse ways tags can be inserted into the document. As Unhead is a dedicated library it can innovate on the head management developer experience, providing an ecosystem of plugins and integrations that can be used across all frameworks. ## Innovating on Head Management - **Lazy DOM Patching** - A tiny DOM diffing engine that only updates what changed, avoiding full page re-renders - **Fully Typed API** - TypeScript-first with inline MDN documentation for every tag and attribute - **Flat SEO Meta** - Manage 100+ meta tags without nested objects using [`useSeoMeta()`](/docs/head/api/composables/use-seo-meta){lang="ts"} - **Schema.org Support** - Generate structured data with full TypeScript support via [`useSchemaOrg()`](/docs/schema-org/api/composables/use-schema-org){lang="ts"} - **Script API** - Load third-party scripts with proxied APIs, triggers, and performance controls using [`useScript()`](/docs/head/api/composables/use-script){lang="ts"} - **SSR + CSR** - First-class support for server-side rendering with seamless client hydration - **Framework Agnostic** - Works with Vue, React, Svelte, Solid, Angular, or vanilla TypeScript ## Next Steps Now that you understand what Unhead does, get started with your framework: - [Vue Installation](/docs/vue/head/guides/get-started/installation) - [React Installation](/docs/react/head/guides/get-started/installation) - [Svelte Installation](/docs/svelte/head/guides/get-started/installation) - [Solid Installation](/docs/solid-js/head/guides/get-started/installation) - [Angular Installation](/docs/angular/head/guides/get-started/installation) - [TypeScript (Vanilla)](/docs/typescript/head/guides/get-started/installation) Or explore the core concepts: - [Page Titles](/docs/head/guides/core-concepts/titles) - Master title management - [Tag Positions](/docs/head/guides/core-concepts/positions) - Control tag ordering - [Loading Scripts](/docs/head/guides/core-concepts/loading-scripts) - Efficient script loading