` or loading JavaScript with a `<script>` tag. While setting tags in an HTML document is simple, JavaScript frameworks have moved us away from pure HTML and 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>`) in both server-rendered and client-rendered environments. The role of a head manager is to manage tags in `<head>`, attributes on `<html>` and `<body>`, and supported 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. It initially allowed frameworks such as Vue and Nuxt to offload head management to a standalone library. Many frameworks implement their own head-management solutions, but supporting every way tags can be inserted into a document is difficult. As a dedicated library, Unhead provides a head-management API, plugins, and integrations that can be shared across frameworks. ## What Unhead Provides - **Lazy DOM patching:** A small DOM diffing engine updates only the tags that changed. - **Typed API:** Tag and attribute types include inline MDN documentation. - **Flat SEO metadata:** Manage more than 100 meta tags without nested objects using [`useSeoMeta()`](/docs/head/api/composables/use-seo-meta). - **Schema.org support:** Generate typed structured data with [`useSchemaOrg()`](/docs/schema-org/api/composables/use-schema-org). - **Script API:** Load third-party scripts with proxied APIs, triggers, and resource hints using [`useScript()`](/docs/head/api/composables/use-script). - **SSR and CSR:** Render on the server, then adopt and update those tags on the client. - **Framework integrations:** Use Unhead with Vue, React, Svelte, Solid, Angular, or vanilla TypeScript. ## Install for 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) For framework-independent behavior, start with these guides: - [Page Titles](/docs/head/guides/core-concepts/titles): Set titles and title templates - [Tag Positions](/docs/head/guides/core-concepts/positions): Control tag placement and ordering - [Loading Scripts](/docs/head/guides/core-concepts/loading-scripts): Manage script loading and APIs

--- 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." canonical_url: "https://unhead.unjs.io/docs/head/guides/get-started/intro-to-unhead" last_updated: "2026-08-11T00:46:59.647Z" --- ## What is a head manager? Adding tags to `` is a fundamental web-development task, whether you're setting a page title with `` or loading JavaScript with a `<script>` tag. While setting tags in an HTML document is simple, JavaScript frameworks have moved us away from pure HTML and 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>`) in both server-rendered and client-rendered environments. The role of a head manager is to manage tags in `<head>`, attributes on `<html>` and `<body>`, and supported 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. It initially allowed frameworks such as Vue and Nuxt to offload head management to a standalone library. Many frameworks implement their own head-management solutions, but supporting every way tags can be inserted into a document is difficult. As a dedicated library, Unhead provides a head-management API, plugins, and integrations that can be shared across frameworks. ## What Unhead Provides - **Lazy DOM patching:** A small DOM diffing engine updates only the tags that changed. - **Typed API:** Tag and attribute types include inline MDN documentation. - **Flat SEO metadata:** Manage more than 100 meta tags without nested objects using [`useSeoMeta()`](/docs/head/api/composables/use-seo-meta). - **Schema.org support:** Generate typed structured data with [`useSchemaOrg()`](/docs/schema-org/api/composables/use-schema-org). - **Script API:** Load third-party scripts with proxied APIs, triggers, and resource hints using [`useScript()`](/docs/head/api/composables/use-script). - **SSR and CSR:** Render on the server, then adopt and update those tags on the client. - **Framework integrations:** Use Unhead with Vue, React, Svelte, Solid, Angular, or vanilla TypeScript. ## Install for 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) For framework-independent behavior, start with these guides: - [Page Titles](/docs/head/guides/core-concepts/titles): Set titles and title templates - [Tag Positions](/docs/head/guides/core-concepts/positions): Control tag placement and ordering - [Loading Scripts](/docs/head/guides/core-concepts/loading-scripts): Manage script loading and APIs