Build your first html★ enhanced page in under 5 minutes.
Step 1: Add the Script
Include html★ in your HTML file:
HTML
<!DOCTYPE html><html lang="en"><head> <title>My html★ App</title></head><body> <!-- Your content here --> <script src="https://unpkg.com/html-star"></script></body></html>Step 2: Create Navigation
Add a navigation with data-target to specify where content loads:
HTML
<nav data-target="#main" data-push> <a href="/pages/home.html">Home</a> <a href="/pages/about.html">About</a> <a href="/pages/contact.html">Contact</a></nav> <main id="main"> <h1>Welcome!</h1> <p>Click a link above to load content.</p></main>What's happening?
data-target="#main"— Load content into the #main elementdata-push— Update the browser URL (enables back button)- All child links inherit these attributes automatically!
Step 3: Create Page Fragments
Create simple HTML files for each page. No <html> or <head> needed — just the content:
pages/home.html:
HTML
<h1>Home</h1><p>Welcome to our website!</p>pages/about.html:
HTML
<h1>About</h1><p>Learn more about us.</p>Step 4: Add View Transitions (Optional)
Enable smooth animations by adding data-transitions to your html element:
HTML
<html lang="en" data-transitions>Add some CSS for the transition:
CSS
#main { view-transition-name: main-content;} ::view-transition-old(main-content) { animation: fade-out 0.15s ease-out;} ::view-transition-new(main-content) { animation: fade-in 0.15s ease-in;} @keyframes fade-out { to { opacity: 0; }} @keyframes fade-in { from { opacity: 0; }}Complete Example
HTML
<!DOCTYPE html><html lang="en" data-transitions><head> <title>My html★ App</title> <style> #main { view-transition-name: main; } </style></head><body> <nav data-target="#main" data-push> <a href="/pages/home.html">Home</a> <a href="/pages/about.html">About</a> </nav> <main id="main"> <h1>Welcome</h1> </main> <script src="https://unpkg.com/html-star"></script></body></html>Try It Out
That's it! You now have SPA-style navigation with:
- ✓ AJAX page loading
- ✓ Browser history support
- ✓ Smooth View Transitions
- ✓ Graceful fallback (works without JS)