Full-stack
<head>management for SolidJS applications
- 💎 SolidJS-optimized head management
- 🔄 Reactive titles, meta tags, and other head elements
- 🔍 SEO-friendly head control
- 🖥️ Server-side rendering support
- 📦 Lightweight with zero dependencies (except for SolidJS & unhead)
# npm
npm install @unhead/solid-js
# yarn
yarn add @unhead/solid-js
# pnpm
pnpm add @unhead/solid-jsimport { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/client'
// main.jsx
import { render } from 'solid-js/web'
import App from './App'
const head = createHead({ /* config */ })
render(() => (
<UnheadContext.Provider value={head}>
<App />
</UnheadContext.Provider>
), document.getElementById('root'))import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/server'
// entry-server.jsx
import { renderToString } from 'solid-js/web'
import App from './App'
export function render(url) {
const head = createHead()
const html = renderToString(() => (
<UnheadContext.Provider value={head}>
<App />
</UnheadContext.Provider>
))
return { html, head }
}import { UnheadContext } from '@unhead/solid-js'
import { createHead } from '@unhead/solid-js/client'
// entry-client.jsx (for hydration)
import { hydrate } from 'solid-js/web'
import App from './App'
const head = createHead({ /* config */ })
hydrate(() => (
<UnheadContext.Provider value={head}>
<App />
</UnheadContext.Provider>
), document.getElementById('root'))// Home.jsx
import { useHead } from '@unhead/solid-js'
function Home() {
useHead({
title: 'Home Page',
meta: [
{
name: 'description',
content: 'Welcome to our website'
}
]
})
return <h1>Home</h1>
}
export default Home// About.jsx
import { useSeoMeta } from '@unhead/solid-js'
function About() {
useSeoMeta({
title: 'About Us',
description: 'Learn more about our company',
ogTitle: 'About Our Company',
ogDescription: 'Our fantastic about page',
ogImage: 'https://example.com/image.jpg',
})
return <h1>About Us</h1>
}
export default Aboutimport { useHead } from '@unhead/solid-js'
// Profile.jsx
import { createEffect, createSignal } from 'solid-js'
function Profile() {
const [userName, setUserName] = createSignal('User')
// SolidJS automatically tracks reactive changes in useHead
useHead(() => ({
title: `${userName()} - Profile`, // Reactive title
meta: [
{
name: 'description',
content: `${userName()}'s profile page`, // Reactive description
},
],
}))
return (
<div>
<h1>
{userName()}
's Profile
</h1>
<button onClick={() => setUserName('New Name')}>
Update Name
</button>
</div>
)
}
export default Profile# Install dependencies
npm install
# Generate build files
npm run build
# Run tests
npm run test