DoubleShore.Umbraco.HeadlessPreview — nugetz
mteodoro/ DoubleShore.Umbraco.HeadlessPreview v1.0.6 .NET 10.0
Enable instant content preview for your headless Umbraco setup. One-click preview from Umbraco backoffice, works with Next.js, Nuxt, Astro, and more.
Get Started dotnet CLI PackageReference Package Manager
$ dotnet add package DoubleShore.Umbraco.HeadlessPreviewReadme 🚀 Umbraco Headless Preview
Instant frontend preview for your headless Umbraco setup
Built with ❤️ by Double Shore - Your trusted Umbraco specialists.
✨ What is this?
DoubleShore.Umbraco.HeadlessPreview seamlessly connects Umbraco's backoffice to your frontend application, enabling content editors to preview unpublished changes in real-time with a single click.
🎯 Perfect for Headless CMS Setups
When you decouple Umbraco from your frontend, you lose the native preview functionality. This package brings it back - better than ever.
🌟 Features
Feature Description One-Click Preview Preview button appears directly in Umbraco's content editor Any Frontend Works with Next.js, Nuxt, Astro, SvelteKit, Remix, and more Multi-Language Full support for multilingual content preview with localized labels
<p align="center">
<strong>Double Shore</strong>
<br>
<em>Digital Solutions Built with Clarity</em>
</p>
Integrates with your frontend's draft/preview mode
Localization Preview label can be localized via Umbraco dictionary
Zero Config Just add your frontend URL - we handle the rest
Lightweight Minimal footprint, maximum performance
📦 Installation dotnet add package DoubleShore.Umbraco.HeadlessPreview
Or via NuGet Package Manager:
Install-Package DoubleShore.Umbraco.HeadlessPreview
⚡ Quick Start
1. Configure Umbraco Add to your appsettings.json:
{
"HeadlessPreview": {
"BaseUrl": "https://your-frontend.com",
"PreviewSecret": "your-super-secret-key",
"PreviewEndpoint": "/api/preview",
"PreviewLabel": "Preview on Frontend",
"UseLocalization": true
}
}
2. Implement Frontend Endpoint Create a preview API endpoint on your frontend. See examples below for each framework.
3. Preview! Click "Preview on Frontend" in Umbraco's content editor to see your unpublished changes.
🌍 Localization To localize the preview label:
Create a dictionary item in Umbraco with key HeadlessPreview_Label
Add translations for each language
Set PreviewLabel to #HeadlessPreview_Label in appsettings.json
{
"HeadlessPreview": {
"PreviewLabel": "#HeadlessPreview_Label",
"UseLocalization": true
}
}
🔧 Configuration Options Setting Description Default BaseUrlYour frontend URL required PreviewSecretShared secret for authentication required PreviewEndpointPath to your preview API /api/previewPreviewLabelButton label (or dictionary key with #) Preview on FrontendUseLocalizationEnable dictionary lookup for label trueEnabledEnable/disable the package true
🖼️ Frontend Examples
Next.js (App Router) // app/api/preview/route.ts
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const secret = searchParams.get('secret');
const path = searchParams.get('path');
if (secret !== process.env.PREVIEW_SECRET) {
return new Response('Invalid token', { status: 401 });
}
const draft = await draftMode();
draft.enable();
redirect(path || '/');
}
Nuxt 3 // server/api/preview.ts
export default defineEventHandler(async (event) => {
const query = getQuery(event);
if (query.secret !== process.env.PREVIEW_SECRET) {
throw createError({ statusCode: 401, message: 'Invalid token' });
}
// Enable preview mode via cookie
setCookie(event, 'preview-mode', 'true', { path: '/' });
return sendRedirect(event, query.path as string || '/');
});
Astro // src/pages/api/preview.ts
import type { APIRoute } from 'astro';
export const GET: APIRoute = async ({ request, cookies, redirect }) => {
const url = new URL(request.url);
const secret = url.searchParams.get('secret');
const path = url.searchParams.get('path');
if (secret !== import.meta.env.PREVIEW_SECRET) {
return new Response('Invalid token', { status: 401 });
}
cookies.set('preview-mode', 'true', { path: '/' });
return redirect(path || '/');
};
🤝 Contributing Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request
📄 License This project is licensed under the MIT License - see the LICENSE file for details.
🏢 About Double Shore Double Shore
Our Services
🔧 Umbraco Development - Custom implementations and migrations
🚀 Headless CMS - Decoupled architectures with modern frontends
📈 Performance Optimization - Making your sites blazing fast
🎓 Training & Consulting - Upskill your team
Get in Touch
